Intermediate⏱️ 10 min📘 Topic 10 of 13

✨ ES6+ Features — Destructuring, Spread, Template Literals & More

All modern JavaScript features that matter: destructuring, spread/rest, template literals, modules, classes, Set/Map, optional chaining and more — with examples and interview questions.

ES6 (2015) was JavaScript's biggest upgrade ever. Everything since (ES2016 → ES2024) keeps refining it. Here's the must-know subset.

🪄 Top features at a glance

let/const — block scoping
Arrow functions
Template literals — `Hello, ${name}`
Destructuring — { a, b } = obj
Default + rest parameters
Spread — [...arr], {...obj}
Classes — sugar over prototypes
Modules — import/export
Promises, async/await
Map, Set, WeakMap, WeakSet
Optional chaining ?., nullish coalescing ??

📦 Modules in 3 lines

// utils.js
export const PI = 3.14;
export default function area(r) { return PI * r * r; }

// app.js
import area, { PI } from './utils.js';

💡 Class syntax

class User {
  #password;            // private field
  constructor(name) { this.name = name; }
  greet() { return `Hi ${this.name}`; }
}

💻 Code Examples

Template literals

const name = 'Sam';
const msg = `Hello, ${name}!
Welcome back.`;
console.log(msg);

Output:

Hello, Sam!
Welcome back.

Map vs Object

const cache = new Map();
cache.set('user:1', { name: 'A' });
console.log(cache.get('user:1'));
console.log(cache.size); // 1

Output:

{ name: 'A' }
1

Set for uniqueness

const unique = [...new Set([1, 2, 2, 3, 3, 3])];
console.log(unique);

Output:

[1, 2, 3]

⚠️ Common Mistakes

Using class fields and expecting `this` to bind automatically in methods — it doesn't. Use arrow methods or bind in constructor.
Treating Map and Object as interchangeable — Map preserves insertion order, allows any key type, has .size, and is faster for frequent add/remove.
Forgetting that import paths must include the file extension in native ES modules in browsers.

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.What's the difference between Map and Object?Intermediate

Map allows any key type (objects, functions). Object keys are strings/symbols only. Map has .size, guaranteed insertion order, and better perf for frequent adds/removes. Object is simpler for static records.

Q2.What's a tagged template literal?Intermediate

A function called with a template literal: `tag`hello ${name}`` — the function receives the string parts and interpolated values separately. Used for safe HTML, i18n, SQL builders.

Q3.Are JavaScript classes 'real' classes?Intermediate

No — they're syntactic sugar over the prototype-based inheritance system. `class User {}` still uses prototypes under the hood.

Q4.What's the difference between Set and WeakSet?Intermediate

Set holds any values; iterable; prevents GC of its members. WeakSet only holds objects, isn't iterable, and allows GC of members if no other references exist. Same idea for Map vs WeakMap.

Q5.What does the spread operator do?Beginner

It expands an iterable. With arrays: `[...a, ...b]` merges them. With objects: `{...a, ...b}` shallow-merges. With functions: `fn(...args)` spreads as arguments.

🧠 Quick Summary

ES6 brought let/const, arrows, destructuring, modules, classes, Map, Set, Promises.
Each newer ES version (ES2016+) adds smaller refinements.
Template literals replace concatenation.
Classes are sugar over prototypes.
Map/Set are usually a better choice than Object/Array for dynamic collections.