The 2015 "ES6" update reshaped JavaScript, and the language has improved every year since. These features appear in virtually all modern code.
Destructuring — unpack with style
Pull values out of arrays and objects directly into variables:
Destructuring shines in function parameters — callers see named options instead of remembering argument order:
function deploy({ env = "staging", replicas = 2, timeout = 30 }) {
console.log(`${env}: ${replicas} replicas, ${timeout}s timeout`);
}
deploy({ env: "production", timeout: 60 });Classes
Object-oriented syntax with real privacy via # fields:
Inheritance with extends and super(...) lets Admin accounts reuse User
logic — reach for it sparingly; composition is usually simpler.
Modules — organizing real projects
Real code splits across files using import/export:
// utils.js
export function formatRs(n) { return `Rs. ${n.toLocaleString()}`; }
export const TAX_RATE = 0.13;
export default class Cart { /* ... */ }
// app.js
import Cart, { formatRs, TAX_RATE } from "./utils.js";In the browser, modules load with <script type="module" src="app.js">.
Each file gets its own scope — no more global variable collisions.
Generators — pausable functions
function* fibonacci() {
let [a, b] = [0, 1];
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2 — state pauses between callsRecent additions you'll actually use
x ??= defaultValue; // assign only if null/undefined
Object.groupBy(people, p => p.city); // group arrays into an object
const { promise, resolve } = Promise.withResolvers();
structuredClone(complexObject); // deep copy, handles Dates/Maps/SetsKnowledge Check
4 questions — test your understanding
Difference between || and ?? as defaults?
#password inside a class body declares...
Calling a generator function returns...
Which line performs a default export?
Next: Error Handling