Modern ES6+ features

What you'll learn

The modern syntax you will see in almost every JavaScript project: template strings, destructuring, spread and rest, default parameters, optional chaining and nullish coalescing.

Why it matters

These features, introduced from 2015 onwards (ES6 and later), make code shorter and safer. Tutorials, libraries and teammates all use them, so you need to read them fluently.

Explanation

• Template strings use backticks and ${} to insert values: `Hello ${name}`. They can span several lines.
• Destructuring pulls values out of arrays and objects into variables: const { name, age } = user; and const [first, second] = list;.
• Spread (...) expands an array or object: [...a, ...b] joins arrays; { ...obj, extra: 1 } copies an object with a change.
• Rest collects the remaining items: function sum(...nums) { ... }.
• Default parameters: function greet(name = "friend").
• Optional chaining user?.address?.city returns undefined instead of throwing when something in the chain is missing.
• Nullish coalescing value ?? "default" uses the default only when the value is null or undefined (unlike ||, which also replaces 0 and "").
• Arrow functions (a, b) => a + b are short function expressions.
• Modules: export and import split code across files.

Example

Step-by-step walkthrough

1. Destructuring pulls name and age out of the object. The template string prints Asha is 30.
2. Array destructuring with rest: first is "a", and others holds the remaining three items.
3. sum(...nums) collects any number of arguments into an array and adds them: 10.
4. The default parameter fills in "friend" when no argument is given.
5. The spread syntax copies user with a new age. The original is untouched: 31 30.
6. user.job?.title is undefined rather than an error, because job does not exist.
7. 0 || 10 is 10 (zero counts as false) but 0 ?? 10 is 0 (zero is a real value).

Try it yourself

Destructure city from user.address in one line, and give it a default of "Unknown".

Modern syntaxJavaScript

Editable codeconst user = { name: "Asha", age: 30, address: { city: "Pune" } }; const { name, age } = user; console.log(`${name} is ${age}`); const [first, ...others] = ["a", "b", "c", "d"]; console.log(first, others); const updated = { ...user, age: 31 }; console.log(updated.age, user.age); console.log(user.job?.title); console.log(0 || 10, 0 ?? 10);

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using || for defaults when 0 or an empty string are valid values. Use ??.
• Mixing up spread and rest. Spread expands in a call or literal; rest gathers in a parameter list.
• Using single quotes for template strings. They need backticks.
• Destructuring null or undefined, which throws an error.

Quick quiz

Summary

• Template strings, destructuring, spread/rest and default parameters shorten code.
• ?. avoids errors on missing data; ?? gives safe defaults.
• Arrow functions and modules are standard in modern projects.

Next: handling errors gracefully.

const user = { name: "Asha", age: 30, address: { city: "Pune" } };

const { name, age } = user;
console.log(`${name} is ${age}`);

const [first, ...others] = ["a", "b", "c", "d"];
console.log(first, others);

function sum(...nums) {
  return nums.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4));

function greet(who = "friend") {
  return `Hello, ${who}!`;
}
console.log(greet(), greet("Ravi"));

const updated = { ...user, age: 31 };
console.log(updated.age, user.age);

console.log(user.address?.city);
console.log(user.job?.title);
console.log(0 || 10, 0 ?? 10);