Advanced

ES6+ Features

Modern JS: let/const, arrow fns, template literals, destructuring, spread, modules.

1. Explanation

ES6 (2015) and later versions added the features that define modern JS: let/const, arrow functions, template literals, default/rest/spread, destructuring, classes, modules (import/export), Map/Set, Promises, optional chaining (?.), nullish coalescing (??), and more.

2. Example

Try it yourself

// Destructuring + default + rest
const { name = "guest", ...rest } = { name: "Aman", age: 22, city: "Pune" };
console.log(name, rest);   // "Aman" { age: 22, city: "Pune" }

// Spread to clone & merge
const a = [1, 2], b = [3, 4];
console.log([...a, ...b]);

// Optional chaining + nullish
const user = { profile: null };
console.log(user.profile?.email ?? "no email");

Console

Click Run to see output.

3. Expected output

output

Aman {"age":22,"city":"Pune"}
[1,2,3,4]
no email

4. Common mistakes

✗Forgetting that spread is a shallow copy
✗Optional chaining hides bugs by swallowing undefined silently
✗Using class fields without checking browser support

5. Practice questions

Destructure first two elements of an array
Use rest params to write a sum(...nums) function
Use optional chaining to safely read deeply nested data

→ Try more practice problems