JavaScript ES6+ Features – Modern JavaScript Explained

// let / const – block-scoped
let count = 0;
const MAX = 100; // cannot be reassigned (but object properties can change)
// var is function-scoped and hoisted — avoid it

// Template literals
const name = 'Alice';
const greeting = `Hello, ${name}! You have ${MAX - count} points left.`;
const multiLine = `
  Line 1
  Line 2
  Line 3
`.trim();

// Tagged template literal
function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `${values[i]}` : ''), '');
}
const html = highlight`Hello ${name}, your score is ${95}!`;
// 'Hello Alice, your score is 95!'

// Arrow functions
const add = (a, b) => a + b;
const square = n => n * n;
const greet = () => 'Hello!';
const getUser = id => ({ id, name: 'Alice' }); // wrap object in ()

// Default parameters
function createUser(name, role = 'user', active = true) {
  return { name, role, active };
}
console.log(createUser('Bob')); // { name: 'Bob', role: 'user', active: true }

const x = 10, y = 20;

// Shorthand properties
const point = { x, y }; // { x: 10, y: 20 }

// Method shorthand
const obj = {
  value: 0,
  increment() { this.value++; },     // instead of increment: function() {}
  async fetchData() { /* ... */ },    // async method shorthand
  get doubled() { return this.value * 2; }, // getter
  set doubled(v) { this.value = v / 2; }    // setter
};

// Computed property names
const prefix = 'get';
const api = {
  [`${prefix}Name`]() { return 'Alice'; },
  [`${prefix}Age`]()  { return 28; }
};
console.log(api.getName()); // 'Alice'
console.log(api.getAge());  // 28

// for...of loop – works with any iterable
for (const char of 'hello') {
  console.log(char); // h e l l o
}
for (const [i, v] of ['a', 'b', 'c'].entries()) {
  console.log(i, v); // 0 'a', 1 'b', 2 'c'
}

// Symbol – always unique
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false

// Use as private-ish object key
const ID = Symbol('id');
const user = { [ID]: 42, name: 'Alice' };
console.log(user[ID]); // 42
// Symbol keys don't appear in Object.keys() or JSON.stringify

// Well-known symbols
// Symbol.iterator – makes an object iterable
const range = {
  from: 1,
  to: 5,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        return current <= last
          ? { value: current++, done: false }
          : { value: undefined, done: true };
      }
    };
  }
};

for (const n of range) {
  console.log(n); // 1 2 3 4 5
}
console.log([...range]); // [1, 2, 3, 4, 5]

// Generator function
function* count(start, end) {
  for (let i = start; i <= end; i++) {
    yield i; // pause here, resume on next .next() call
  }
}

const gen = count(1, 5);
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log([...count(1, 3)]); // [1, 2, 3]

// Infinite sequence (pull-based — only computes what you ask)
function* naturals() {
  let n = 0;
  while (true) yield n++;
}
const nat = naturals();
console.log([...Array(5)].map(() => nat.next().value)); // [0,1,2,3,4]

// Generator delegation with yield*
function* combined() {
  yield* [1, 2, 3];
  yield* 'abc';
}
console.log([...combined()]); // [1, 2, 3, 'a', 'b', 'c']

// Proxy intercepts operations on an object
const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : `Property "${prop}" not found`;
  },
  set(target, prop, value) {
    if (typeof value !== 'number') throw new TypeError('Must be a number');
    target[prop] = value;
    return true; // indicate success
  }
};

const numbers = new Proxy({}, handler);
numbers.x = 10; // OK
// numbers.y = 'hello'; // TypeError: Must be a number
console.log(numbers.x);    // 10
console.log(numbers.z);    // 'Property "z" not found'

// Optional chaining ?. (ES2020)
const user = { profile: { address: { city: 'London' } } };
console.log(user?.profile?.address?.city);  // 'London'
console.log(user?.settings?.theme);         // undefined (no error)
console.log(user?.getName?.());             // undefined (method may not exist)

// Nullish coalescing ?? (ES2020) – falls back only on null/undefined
const port = null;
console.log(port ?? 3000);    // 3000
console.log(port || 3000);    // 3000 (same here, but...)
console.log(0 ?? 3000);       // 0 (!! zero is NOT nullish)
console.log(0 || 3000);       // 3000 (zero is falsy — wrong for port!)

// Logical assignment (ES2021)
let a = null;
a ??= 'default'; // assign only if null/undefined
console.log(a);  // 'default'

let b = 0;
b ||= 42;        // assign if falsy
console.log(b);  // 42

let c = 1;
c &&= 99;        // assign if truthy
console.log(c);  // 99

// Array.at() (ES2022) – negative indexing
console.log([1,2,3].at(-1)); // 3

// Object.hasOwn() (ES2022) – better hasOwnProperty
console.log(Object.hasOwn({ a: 1 }, 'a')); // true

// structuredClone() (ES2022) – deep clone
const original = { nested: { value: 1 }, arr: [1, 2, 3] };
const clone = structuredClone(original);
clone.nested.value = 99;
console.log(original.nested.value); // 1 — truly independent

// Array grouping (ES2024 – Object.groupBy)
const items = [
  { name: 'a', type: 'x' }, { name: 'b', type: 'y' }, { name: 'c', type: 'x' }
];
const grouped = Object.groupBy(items, item => item.type);
// { x: [{name:'a',...},{name:'c',...}], y: [{name:'b',...}] }