JavaScript ES6+ Features You Need to Know

Destructuring

Destructuring extracts values from objects and arrays into named variables.

// Object destructuring
const user = { name: "Alice", age: 30, role: "admin" };
const { name, age } = user;
const { name: userName, role = "user" } = user; // rename + default

// Array destructuring
const [first, , third] = [1, 2, 3];  // skip index 1

// Nested destructuring
const { address: { city } } = { address: { city: "London" } };

// In function params
function greet({ name, role = "user" }) {
    return `Hello ${name} (${role})`;
}

Template literals

Template literals use backticks and allow embedded expressions and multi-line strings.

const name = "Alice";
const score = 95;

// String interpolation
console.log(`Hello, ${name}! Score: ${score}`);

// Expressions
console.log(`2 + 2 = ${2 + 2}`);

// Multi-line
const html = `
    <div>
        <h1>${name}</h1>
    </div>
`;

Optional chaining and nullish coalescing

Optional chaining (?.) safely accesses nested properties. Nullish coalescing (??) provides a default for null/undefined.

const user = {
    profile: {
        address: null
    }
};

// Without optional chaining — throws if profile is null
user.profile.address.city;

// With optional chaining — returns undefined safely
user?.profile?.address?.city;     // undefined

// Nullish coalescing: only triggers on null/undefined
const city = user?.profile?.address?.city ?? "Unknown";
// "Unknown"

// vs || which triggers on ALL falsy values
const count = 0 || 10;    // 10  (0 is falsy)
const count2 = 0 ?? 10;   // 0   (0 is not null/undefined)

ES Modules (import/export)

ES modules replace CommonJS require() in modern JavaScript and TypeScript.

// Named exports
export const PI = 3.14;
export function add(a, b) { return a + b; }

// Default export
export default class Calculator { ... }

// Importing
import Calculator from './calculator';       // default
import { PI, add } from './math';            // named
import { add as sum } from './math';         // alias
import * as math from './math';              // namespace
import Calculator, { PI } from './module';   // both

Short-circuit evaluation and logical assignment

Logical operators can be used for concise conditionals and assignments.

// Short-circuit: right side only evaluated if needed
const name = user && user.name;       // name if user is truthy
const display = name || "Anonymous";  // fallback

// Logical assignment operators (ES2021)
x ||= "default";   // x = x || "default"
x &&= transform(x); // x = x && transform(x)
x ??= "default";   // x = x ?? "default"

// Comma operator (rare but tested)
let x = (1, 2, 3);  // x = 3 (last value)

Exam tip

The ?? vs || distinction is the most common ES6+ interview question. ?? only returns the right side for null or undefined — not for 0, false, or empty string. This catches people who default to || for "falsy" checks.