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

// ----- for...of WITH ARRAYS -----
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}
// red
// green
// blue

// ----- for...of WITH STRINGS -----
const greeting = 'Hi!';
for (const char of greeting) {
  console.log(char);
}
// H
// i
// !

// ----- for...of WITH MAPS -----
const userMap = new Map([
  ['name', 'Alice'],
  ['role', 'admin'],
]);
for (const [key, value] of userMap) {
  console.log(`${key}: ${value}`);
}
// name: Alice
// role: admin

// ----- for...of WITH SETS -----
const uniqueIds = new Set([101, 102, 103, 101]);
for (const id of uniqueIds) {
  console.log(id);
}
// 101
// 102
// 103

// ----- BREAK and CONTINUE WORK -----
const numbers = [1, 2, 3, 4, 5];
for (const n of numbers) {
  if (n === 3) continue;
  if (n === 5) break;
  console.log(n);
}
// 1
// 2
// 4

// ----- DO NOT CONFUSE with for...in -----
const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // 'a' 1, 'b' 2 — but not recommended for arrays
}
const arr = [10, 20, 30];
for (const index in arr) {
  console.log(index, arr[index]); // '0' 10, '1' 20, '2' 30 — uses index as string, includes inherited props
}

// ----- MAP: KEY-VALUE WITH ANY KEY TYPE -----
const userRoles = new Map();
userRoles.set(101, 'admin');
userRoles.set('user-102', 'editor');
userRoles.set({ id: 103 }, 'viewer'); // object as key

console.log(userRoles.get(101));   // 'admin'
console.log(userRoles.has('user-102')); // true
console.log(userRoles.size);       // 3

// Iteration preserves insertion order
for (const [id, role] of userRoles) {
  console.log(`User ${id}: ${role}`);
}
// User 101: admin
// User user-102: editor
// User [object Object]: viewer

// ----- SET: UNIQUE VALUES -----
const visitorIps = new Set();
visitorIps.add('192.168.1.1');
visitorIps.add('10.0.0.1');
visitorIps.add('192.168.1.1'); // duplicate ignored
console.log(visitorIps.size);   // 2
console.log(visitorIps.has('10.0.0.1')); // true

// Convert Set to Array when needed
const ipArray = [...visitorIps];
console.log(ipArray); // ['192.168.1.1', '10.0.0.1']

// ----- WEAKMAP: KEYS MUST BE OBJECTS, ALLOWS GC -----
const cache = new WeakMap();
let obj = { name: 'temp' };
cache.set(obj, 'cached data');
obj = null; // 'cached data' is now eligible for garbage collection

// ----- WEAKSET: SIMILAR FOR SET -----
const activeUsers = new WeakSet();
let user = { id: 1 };
activeUsers.add(user);
user = null; // user is removed from activeUsers when GC runs

// ----- PRACTICAL USE: REMOVING DUPLICATES FROM AN ARRAY -----
const numbersWithDuplicates = [1, 2, 3, 2, 4, 1, 5];
const uniqueNumbers = [...new Set(numbersWithDuplicates)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

// ----- STRING METHODS -----
const filename = 'photo_2024.jpg';
console.log(filename.startsWith('photo')); // true
console.log(filename.endsWith('.jpg'));    // true
console.log(filename.includes('2024'));    // true

const separator = '---'.repeat(3);
console.log(separator); // '---------' (9 dashes)

// ----- ARRAY METHODS -----
const temperatures = [72, 85, 68, 90, 73];

// find first temperature over 80
const firstHot = temperatures.find(t => t > 80);
console.log('First hot day:', firstHot); // 85

// find index of first over 85
const extremeIndex = temperatures.findIndex(t => t > 85);
console.log('First extreme index:', extremeIndex); // 3

// check if any temperature is 90
console.log(temperatures.includes(90)); // true

// fill with defaults (replace elements from index 1 to 3)
const defaultTemps = [0, 0, 0, 0, 0];
defaultTemps.fill(72, 1, 3);
console.log(defaultTemps); // [0, 72, 72, 0, 0]

// keys, values, entries
const colors = ['red', 'green', 'blue'];
for (const index of colors.keys()) {
  console.log(index); // 0,1,2
}
for (const value of colors.values()) {
  console.log(value); // 'red','green','blue'
}
for (const [i, v] of colors.entries()) {
  console.log(`${i}: ${v}`);
}
// 0: red, 1: green, 2: blue

// ----- FLAT & FLATMAP (ES2019) -----
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(2)); // [1, 2, 3, [4]]

const phrases = ['hello world', 'foo bar'];
const words = phrases.flatMap(phrase => phrase.split(' '));
console.log(words); // ['hello', 'world', 'foo', 'bar']

// QUICK COMPARISON SNIPPETS:

// 1. Variable scoping
// ES5
var x = 1;
if (true) { var x = 2; } // x is overwritten to 2
// ES6
let y = 1;
if (true) { let y = 2; } // y remains 1 outside

// 2. Function and this
// ES5
var obj = {
  name: 'Alice',
  greet: function() {
    var self = this;
    setTimeout(function() { console.log('Hi ' + self.name); }, 100);
  }
};
// ES6
var obj = {
  name: 'Alice',
  greet: function() {
    setTimeout(() => console.log(`Hi ${this.name}`), 100);
  }
};

// 3. String interpolation
// ES5: 'Welcome ' + user.name + ', you have ' + count + ' items.'
// ES6: `Welcome ${user.name}, you have ${count} items.`

// 4. Extracting values
// ES5: var name = user.name; var role = user.role;
// ES6: const { name, role } = user;

// 5. Copying arrays
// ES5: var copy = original.slice();
// ES6: const copy = [...original];