ES6+ Modern JavaScript Features

Modern JS features are used daily and tested in every interview. Knowing them well shows you write production-quality code.

Destructuring

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];

// Object destructuring with rename & default
const { name: userName = 'Guest', age = 18 } = user;

// Nested
const { address: { city } } = user;

// In function params
function greet({ name, age = 0 }) {
  return `${name} is ${age}`;
}

Spread & Rest

const arr = [1, 2, 3];
const clone = [...arr];              // shallow clone
const merged = [...arr, 4, 5];      // merge

const obj = { a: 1, b: 2 };
const updated = { ...obj, b: 99 };   // { a:1, b:99 }

function sum(...nums) {               // rest
  return nums.reduce((a, b) => a + b, 0);
}

Optional Chaining & Nullish Coalescing

const city = user?.address?.city;    // no error if address is null
const name = user?.name ?? 'Guest'; // ?? returns right side only if left is null/undefined
const name2 = user?.name || 'Guest'; // || returns right side if left is falsy (0, '' also trigger it)