Modern JavaScript Syntax Guide (2026)

Quick answer: Modern JavaScript syntax removes most boilerplate: destructuring to pull values apart, spread to copy and merge, optional chaining ?. and nullish coalescing ?? to handle missing data safely, logical assignment such as ??=, and Python-style named capture in regular expressions. These are all standard in every current browser.The sections below walk the modern JavaScript syntax you will actually write — destructuring, spread, optional chaining and template literals — and show when each piece of modern JavaScript syntax became safe to use in production.

Destructuring

const user = { name: "Ada", role: "engineer", city: "Chennai" };

// object: pull out by key, with defaults and renaming
const { name, role: job = "guest", country = "IN" } = user;

// array: pull out by position
const [first, , third] = ["a", "b", "c"];      // third is "c"

// in a function signature
function greet({ name, role = "guest" }) {
  return `${name} is a ${role}`;
}

Destructuring in a parameter list documents exactly what a function needs, and it makes the call site readable because the caller passes an object with named fields.

Spread and rest in modern JavaScript syntax

const base = { theme: "dark", size: "m" };
const custom = { ...base, size: "l" };        // copy, then override

const nums = [1, 2, 3];
Math.max(...nums);                            // spread into arguments

function total(...values) {                   // rest collects into an array
  return values.reduce((a, b) => a + b, 0);
}

The same three dots are called spread when they expand a value and rest when they collect values. Copying with spread is how you update an object without mutating the original — the pattern every modern framework depends on.

Optional chaining and nullish coalescing

These two operators remove a mountain of defensive if checks.

const city = user.address?.city;             // undefined if address is missing
const first = data?.items?.[0]?.name;        // safe through arrays and objects
const label = user.nickname ?? user.name;    // fallback only when null or undefined

user.role ??= "viewer";                      // assign only if null or undefined
counts[key] ??= 0;                           // the useful counter idiom

The distinction matters. width || 100 replaces a legitimate 0 with 100, which is a real bug. width ?? 100 only replaces null and undefined, so a zero width survives. Use ?? whenever a valid value could be falsy.

Modern JavaScript syntax in the standard library

The language keeps growing. These became standard in recent editions and are safe in current browsers and Node.

// ES2024: group without a manual loop
Object.groupBy(people, p => p.role);       // { engineer: [...], designer: [...] }

// ES2025: set operations and lazy iterator helpers
setA.union(setB);
[1, 2, 3, 4].values().filter(n => n % 2 === 0).take(1).toArray();  // [2]

// ES2026: async collection and precise error checks
await Array.fromAsync(asyncIterable);
Error.isError(value);

You do not need to adopt every new method immediately, but knowing they exist saves you from hand-writing a grouping loop or a manual union of two sets.

Template literals and tagged templates

const msg = `Order ${id} shipped on ${new Date().toDateString()}`;

function highlight(strings, ...values) {
  return strings.reduce((out, s, i) =>
    out + s + (values[i] ? `<mark>${values[i]}</mark>` : ""), "");
}
highlight`Hello ${name}!`;

Tagged templates look exotic but are just a function call with the literal pieces and the interpolated values separated. They power libraries such as styled-components, and they are worth recognising when you meet one.

Next: promises and async/await. To learn modern JavaScript with a mentor, Ampersand Academy teaches web development one-to-one.

Frequently asked questions