ES6+ Features

Site Admin · 11 Sep 2026 · 7 views

ES6+ Features

ECMAScript 2015 (ES6) transformed JavaScript with major new features. Later versions added more. These features make modern JavaScript cleaner, safer, and more expressive.

Destructuring

// Array destructuring
const [first, second] = [10, 20, 30];
console.log(first);    // 10
console.log(second);   // 20

// Skip elements
const [a, , c] = [1, 2, 3];
console.log(c);        // 3

// Swap variables
let x = 1, y = 2;
[x, y] = [y, x];

// Object destructuring
const user = {name: "Alice", age: 30, city: "Berlin"};
const {name, age, city} = user;
console.log(name);     // "Alice"

// Rename during destructuring
const {name: userName, age: userAge} = user;

// Rest in destructuring
const [head, ...rest] = [1, 2, 3, 4];
console.log(head);   // 1
console.log(rest);   // [2, 3, 4]

Spread Operator

// Copy and combine arrays
const nums = [1, 2, 3];
const more = [...nums, 4, 5];   // [1, 2, 3, 4, 5]

// Spread into function arguments
const max = Math.max(...[3, 7, 1]);  // 7

// Copy and merge objects
const defaults = {theme: "light", lang: "en"};
const user = {...defaults, theme: "dark"};  // Merge with override

Template Literals

const name = "Bob";
const age = 42;

// String interpolation
const message = `Hello, ${name}. You are ${age} years old.`;

// Multi-line strings without escaping
const html = `
<div class="card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
</div>
`;

// Expressions inside
const total = `Total: $${(9.99 * 2).toFixed(2)}`;

Other Notable Features

// Optional chaining (avoids TypeError)
const city = user?.address?.city ?? "Unknown";

// Nullish coalescing (null/undefined fallback)
const count = input ?? 0;

// Object shorthand
const a = 1, b = 2;
const obj = {a, b};

// Array.find, includes, flat
[4, 5, 6].includes(5);    // true
[[1], [2, 3]].flat();     // [1, 2, 3]