JavaScript · Lesson 23 / 32 · English
ES6+ Features
Understand the idea. Change the code. Build confidence with one focused experiment.
Read this lesson in தமிழ் ↗.
Start with the idea
Modern syntax can make transformations easier to read. Destructuring extracts values, rest collects them, spread expands them, and template literals build text.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
Step-by-step lesson notes
Modern JavaScript (ES6 and Beyond)
ES6 (ECMAScript 2015) was a major update to JavaScript. Since then, new features are released every year. Here are the most important ones you'll use daily.
Destructuring & Spread / Rest
// Array destructuring
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b, rest); // 1, 2, [3, 4, 5]
// Object destructuring
const { name, age = 25, ...others } = { name: "Alice", city: "NYC" };
// Spread — expand iterable
const arr1 = [1, 2], arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]
const obj1 = { a: 1 }, obj2 = { b: 2 };
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2 }Optional Chaining & Nullish Coalescing
const user = { profile: { name: "Alice" } };
// Optional chaining (?.) — ES2020
console.log(user?.profile?.name); // "Alice"
console.log(user?.address?.city); // undefined (no error!)
console.log(user?.getInfo?.()); // undefined (method optional)
// Nullish coalescing (??) — ES2020
// Only triggers for null or undefined (NOT 0, false, "")
const port = null ?? 3000; // 3000
const count = 0 ?? 100; // 0 (0 is not null/undefined)
// Logical assignment — ES2021
let a = null;
a ??= "default"; // a is now "default"
a ||= "fallback"; // only assigns if a is falsy
a &&= "update"; // only assigns if a is truthyModules (import / export)
// math.js — Named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
// utils.js — Default export
export default function formatDate(date) {
return date.toLocaleDateString();
}
// main.js — Importing
import formatDate from "./utils.js"; // default import
import { PI, add } from "./math.js"; // named imports
import { add as sum } from "./math.js"; // rename
import * as MathUtils from "./math.js"; // namespace import
// Dynamic import (lazy loading)
const module = await import("./heavy-module.js");Symbol, Iterators & Generators
// Symbol — unique primitive
const id1 = Symbol("id");
const id2 = Symbol("id");
console.log(id1 === id2); // false — always unique
// Generator function
function* range(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
for (const n of range(1, 5)) {
console.log(n); // 1, 2, 3, 4, 5
}A complete example
Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.
const learner = { name: "Kavi", level: "beginner" };
const { name, level } = learner;
const topics = ["variables", "functions"];
const expanded = [...topics, "arrays"];
console.log(`${name}: ${level}`);
console.log(expanded.join(" → "));Predict first. Reveal the expected result.
Kavi: beginner variables → functions → arrays
Make one change. See what happens.
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Wait for the editor to load, then load this example and press Run.
Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.
Put the idea to work
Practice challenge
Add objects to expanded without mutating topics.
Reveal the answer and reasoning
const next = […expanded, "objects"]; creates a new array. topics still contains two items.
One mistake to avoid: Spread makes a shallow copy. It does not recursively clone nested objects.
Your learning checkpoint
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.