Modern ES Features

Since ECMAScript 2015 (ES6), JavaScript has received a steady stream of quality-of-life features that make everyday code shorter, safer, and easier to read. Four of the most commonly used are template literals, optional chaining, the nullish coalescing operator, and destructuring.

These features do not change what JavaScript can compute — everything they do could be written with older syntax — but they remove significant boilerplate and reduce a whole category of bugs related to accessing missing or undefined data.

Why it matters

Code written since 2015 looks very different from older JavaScript. Template literals, optional chaining and nullish coalescing remove whole categories of clumsy checks, and they appear on almost every line of a current codebase. Without them you can neither read modern code nor write it concisely.

Template Literals

Template literals use backticks (`) instead of quotes, and allow embedded expressions using ${expression} syntax, along with real multi-line strings without concatenation. This replaces older, more error-prone string concatenation with +.

Optional Chaining (?.)

Optional chaining lets you safely access a deeply nested property without manually checking every level for null or undefined first. If any part of the chain before ?. is null or undefined, the whole expression short-circuits and evaluates to undefined instead of throwing a TypeError. It also works with method calls (obj.method?.()) and array-style access (obj?.[key]).

Nullish Coalescing (??)

The nullish coalescing operator returns its right-hand side only when the left-hand side is null or undefined — unlike ||, which also falls through for other falsy values like 0, "", or false. This makes ?? the correct tool for supplying a default value while still allowing legitimate falsy values to be used as-is.

Array and Object Destructuring (Recap in Context)

Destructuring, covered earlier alongside arrays and objects, is itself a modern ES feature that pairs naturally with the others here — for example, combining destructuring with default values and optional chaining lets you pull deeply nested, possibly missing data into clean local variables in a single expression.

Examples

const name = "Maria";
const orders = 3;

const oldStyle = "Hello, " + name + "! You have " + orders + " orders.";
const newStyle = `Hello, ${name}! You have ${orders} orders.`;

console.log(oldStyle);
console.log(newStyle);
console.log(`Multi-line:
Second line here.`);

Hello, Maria! You have 3 orders.
Hello, Maria! You have 3 orders.
Multi-line:
Second line here.

const user = {
  name: "Diego",
  address: {
    city: "Madrid",
  },
};

console.log(user.address?.city);
console.log(user.contact?.email); // no "contact" property, no crash
console.log(user.getFullProfile?.()); // no such method, no crash

const settings = { volume: 0, brightness: null };
console.log(settings.volume ?? 50);      // 0 is a valid value, not replaced
console.log(settings.brightness ?? 50);  // null is replaced by the default
console.log(settings.volume || 50);      // || incorrectly treats 0 as "missing"

Madrid
undefined
undefined
0
50
50

Exercise

Using modern syntax: read the city of a user whose address is missing, falling back to Unknown, without the code throwing; read a count that is legitimately 0, falling back to 10 only when it is null or undefined; and build a greeting with a template literal.

Expected output: Unknown, 0, Hello, Asha! (one per line)

const user = { name: "Asha" }; // no address property
const settings = { count: 0 };

// TODO: the user's city, or "Unknown" (optional chaining and ??)

// TODO: settings.count, or 10 only if it is null or undefined

// TODO: "Hello, Asha!" using a template literal

const user = { name: "Asha" }; // no address property
const settings = { count: 0 };

console.log(user.address?.city ?? "Unknown");

console.log(settings.count ?? 10);

console.log(`Hello, ${user.name}!`);

Quick quiz

Interview questions