ES6+ Features Explained — The Why, When, and Real-World How

// ----- THE VAR PROBLEM -----
function calculateDiscount_OLD(price) {
  if (price > 100) {
    var discount = 20; // declared inside the if-block
  }
  // 'discount' leaks OUT of the if-block because var is function-scoped
  console.log('var discount outside block:', discount); // 20 (!) — or undefined if price <= 100
}
calculateDiscount_OLD(150);

// ----- THE let FIX -----
function calculateDiscount_NEW(price) {
  if (price > 100) {
    let discount = 20; // block-scoped — stays inside the if-block
  }
  // This line would throw: ReferenceError: discount is not defined
  // console.log(discount); // safely commented out — the error IS the feature!
  console.log('let prevents the accidental leak — discount is not visible here');
}
calculateDiscount_NEW(150);

// ----- const FOR VALUES THAT SHOULD NOT CHANGE -----
const TAX_RATE = 0.08; // Tax rate won't change during the program
const itemPrice = 49.99;
const totalPrice = itemPrice + itemPrice * TAX_RATE;
console.log('Total with tax:', totalPrice.toFixed(2)); // 53.99

// TAX_RATE = 0.10; // Uncommenting this throws: TypeError: Assignment to constant variable

// ----- IMPORTANT: const with objects -----
const userProfile = { name: 'Alice', role: 'admin' };
userProfile.role = 'editor'; // This IS allowed — we're mutating the object, not rebinding the variable
console.log('Updated role:', userProfile.role); // editor
// userProfile = {}; // THIS would throw — you can't rebind the const variable itself

// ----- THE `this` PROBLEM ARROW FUNCTIONS SOLVE -----
const timer = {
  message: 'Time is up!',

  // Old-style function: `this` depends on how the function is called
  startOld: function () {
    setTimeout(function () {
      // Inside a regular callback, `this` is no longer the timer object
      // In strict mode it's undefined; in browsers it's the window object
      console.log('Old way — this.message:', this.message); // undefined (or crash)
    }, 100);
  },

  // Arrow function: `this` is inherited from startNew's scope (the timer object)
  startNew: function () {
    setTimeout(() => {
      console.log('Arrow way — this.message:', this.message); // 'Time is up!'
    }, 100);
  },
};
timer.startOld();
timer.startNew();

// ----- ARROW FUNCTIONS AS ARRAY CALLBACKS -----
const products = [
  { name: 'Keyboard', price: 79 },
  { name: 'Monitor', price: 299 },
  { name: 'Mouse', price: 45 },
];

// map with an arrow function — clean, one-liner transformation
const productNames = products.map((product) => product.name);
console.log('Product names:', productNames); // ['Keyboard', 'Monitor', 'Mouse']

// filter — only items under $100
const affordableProducts = products.filter((product) => product.price < 100);
console.log('Under $100:', affordableProducts.map((p) => p.name)); // ['Keyboard', 'Mouse']

// ----- OBJECT DESTRUCTURING -----
const orderDetails = {
  orderId: 'ORD-8821',
  customer: 'Bob Martinez',
  total: 124.5,
  status: 'shipped',
};

// Extract only what you need — notice the rename: status -> orderStatus
const { orderId, customer, status: orderStatus } = orderDetails;
console.log(`Order ${orderId} for ${customer} is ${orderStatus}`);
// Order ORD-8821 for Bob Martinez is shipped

// ----- ARRAY DESTRUCTURING -----
const [firstPlace, secondPlace, , fourthPlace] = ['Alice', 'Bob', 'Carol', 'Dave'];
console.log('Winner:', firstPlace);   // Alice
console.log('Runner-up:', secondPlace); // Bob
console.log('4th place:', fourthPlace); // Dave (skipped Carol with the empty comma)

// ----- DESTRUCTURING IN FUNCTION PARAMETERS (very common in React) -----
function renderUserCard({ name, role = 'viewer', avatarUrl = '/default-avatar.png' }) {
  // Default values in destructuring mean we never get undefined for missing fields
  console.log(`Rendering card for ${name} (${role}) — avatar: ${avatarUrl}`);
}

renderUserCard({ name: 'Alice', role: 'admin' });
// Rendering card for Alice (admin) — avatar: /default-avatar.png
renderUserCard({ name: 'Charlie' });
// Rendering card for Charlie (viewer) — avatar: /default-avatar.png

// ----- SPREAD WITH ARRAYS -----
const northernCities = ['Oslo', 'Stockholm', 'Helsinki'];
const southernCities = ['Rome', 'Athens', 'Madrid'];

// Combine two arrays without mutation
const allCities = [...northernCities, 'Paris', ...southernCities];
console.log('All cities:', allCities);
// ['Oslo', 'Stockholm', 'Helsinki', 'Paris', 'Rome', 'Athens', 'Madrid']

// Clone an array (not a reference — a new array)
const citiesCopy = [...northernCities];
citiesCopy.push('Reykjavik');
console.log('Original unchanged:', northernCities); // Oslo, Stockholm, Helsinki
console.log('Clone has new city:', citiesCopy);      // Oslo, Stockholm, Helsinki, Reykjavik

// ----- SPREAD WITH OBJECTS (the React state update pattern) -----
const currentUserSettings = {
  theme: 'dark',
  language: 'en',
  notificationsEnabled: true,
};

// Create a new settings object with just the theme changed
// The spread copies all existing keys, then the last key 'wins' for overrides
const updatedSettings = { ...currentUserSettings, theme: 'light' };
console.log('Original settings:', currentUserSettings.theme); // dark — untouched
console.log('Updated settings:', updatedSettings.theme);      // light

// ----- REST PARAMETERS -----
function calculateShippingCost(baseRate, ...itemWeights) {
  // `itemWeights` collects all arguments after the first into a real array
  const totalWeight = itemWeights.reduce((sum, weight) => sum + weight, 0);
  const shippingCost = baseRate + totalWeight * 0.5;
  console.log(`Items: ${itemWeights.length}, Total weight: ${totalWeight}kg, Cost: $${shippingCost.toFixed(2)}`);
}

calculateShippingCost(5, 1.2, 0.8, 3.5); // 3 items
// Items: 3, Total weight: 5.5kg, Cost: $7.75
calculateShippingCost(5, 0.5);            // 1 item
// Items: 1, Total weight: 0.5kg, Cost: $5.25

// ----- TEMPLATE LITERALS -----
const orderSummary = {
  id: 'ORD-4492',
  itemCount: 3,
  total: 87.49,
  deliveryDate: 'Thursday',
};

// Multiline template literal — no more \n escape sequences
const confirmationEmail = `
Hi there,

Your order ${orderSummary.id} has been confirmed.
You ordered ${orderSummary.itemCount} items for a total of $${orderSummary.total.toFixed(2)}.
Expected delivery: ${orderSummary.deliveryDate}.

Thank you for shopping with us!
`.trim();

console.log(confirmationEmail);
// Full email block with real line breaks — no string concatenation needed

// ----- SIMULATING AN API CALL WITH A PROMISE -----
// In real code this would be fetch() — here we simulate network delay
function fetchUserById(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const mockDatabase = {
        101: { name: 'Alice Chen', email: 'alice@example.com', plan: 'pro' },
        102: { name: 'Bob Singh', email: 'bob@example.com', plan: 'free' },
      };
      const user = mockDatabase[userId];
      if (user) {
        resolve(user); // success path
      } else {
        reject(new Error(`No user found with ID ${userId}`)); // error path
      }
    }, 300); // simulate 300ms network delay
  });
}

// ----- USING PROMISE CHAINING (.then / .catch) -----
fetchUserById(101)
  .then((user) => {
    console.log('Promise chain — User found:', user.name);
    return user.plan; // return value flows into the next .then
  })
  .then((plan) => {
    console.log('User plan:', plan); // 'pro'
  })
  .catch((error) => {
    console.error('Promise error:', error.message);
  });

// ----- SAME LOGIC WITH async/await — FAR MORE READABLE -----
async function loadUserProfile(userId) {
  try {
    const user = await fetchUserById(userId); // pauses here until Promise resolves
    console.log('async/await — User found:', user.name);
    console.log('Email:', user.email);
    return user; // async functions always return a Promise
  } catch (error) {
    // Errors from the awaited Promise land here — equivalent to .catch()
    console.error('async/await error:', error.message);
  }
}

loadUserProfile(102); // valid user
loadUserProfile(999); // user that doesn't exist — triggers the catch

// ----- RUNNING MULTIPLE REQUESTS IN PARALLEL -----
async function loadDashboardData() {
  console.log('\nLoading dashboard data in parallel...');

  // Promise.all runs both requests AT THE SAME TIME and waits for both to finish
  // This is faster than awaiting them one after the other
  const [user101, user102] = await Promise.all([
    fetchUserById(101),
    fetchUserById(102),
  ]);

  console.log('Dashboard loaded:');
  console.log(`- ${user101.name} (${user101.plan})`);
  console.log(`- ${user102.name} (${user102.plan})`);
}

loadDashboardData();