ES6+ Features Every Developer Should Master in 2026

Arrow Functions

const add = (a, b) => a + b;
const double = x => x * 2;
const greet = () => 'Hello!';

const processUser = (user) => {
  const fullName = `${user.first} ${user.last}`;
  return { ...user, fullName };
};

Destructuring

// Object destructuring
const { name, age, role = 'user' } = user;
const { name: userName } = user; // rename

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

Template Literals

const greeting = `Hello, ${name}!`;
const html = `
  <div class="card">
    <h2>${user.name}</h2>
  </div>
`;

Spread and Rest Operators

// Spread
const arr2 = [...arr1, 4, 5];
const obj2 = { ...obj1, c: 3 };
const config = { ...defaults, ...userConfig };

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

Optional Chaining and Nullish Coalescing

const city = user?.profile?.address?.city;
const name = user?.name ?? 'Anonymous';

Array Methods (ES6+)

Array.from(arrayLike);
[1, 2, 3].includes(2);  // true
[1, [2, [3]]].flat(Infinity); // [1, 2, 3]
Object.entries({ a: 1 }); // [['a', 1]]

Structured Clone for Deep Copies

const original = { nested: { value: 42 } };
const clone = structuredClone(original);
clone.nested.value = 100;
console.log(original.nested.value); // 42 (unchanged)