Docs
Module-13-Modern-JavaScript
Module 13: Modern JavaScript (ES6+)
Master the powerful features introduced in ES6 (2015) and beyond that have transformed JavaScript into a modern, expressive language.
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā MODERN JAVASCRIPT ā ā
ā ā ā ā
ā ā "ES6 changed everything - embrace the future" ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā ES5 (2009) ES6 (2015) ES2020+ ā
ā āāāāāāāāāāāāāā āāāāāāāāāāāāāā āāāāāāāāāāāāāā ā
ā var ā let/const ā Private fields ā
ā function() ā () => {} ā Top-level await ā
ā callbacks ā Promises ā Optional chaining ā
ā obj.prop ā destructuring ā Nullish coalescing ā
ā "string" + var ā `template ${var}` ā Logical assignment ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š Module Overview
This module covers the transformative features introduced in ES6 and subsequent versions. These features make JavaScript more powerful, expressive, readable, and easier to write.
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā THE ES6+ TRANSFORMATION ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā BEFORE (ES5): AFTER (ES6+): ā
ā āāāāāāāāāāāāā āāāāāāāāāāāāā ā
ā ā
ā var self = this; // Arrow functions preserve this ā
ā button.addEventListener('click', button.addEventListener('click', ā
ā function() { () => { ā
ā self.handleClick(); this.handleClick(); ā
ā } } ā
ā ); ); ā
ā ā
ā var name = user.name; // Destructuring ā
ā var age = user.age; const { name, age } = user; ā
ā var city = user.address.city; const { address: { city } } = user; ā
ā ā
ā "Hello " + name + "!" // Template literals ā
ā `Hello ${name}!` ā
ā ā
ā function greet(name) { // Default parameters ā
ā name = name || "Guest"; function greet(name = "Guest") { ā
ā } } ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
šÆ Learning Objectives
By the end of this module, you will be able to:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā SKILL PROGRESSION ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā Level 1: Syntax Mastery ā
ā āāā Use destructuring for arrays and objects fluently ā
ā āāā Create dynamic strings with template literals ā
ā āāā Apply spread and rest operators in all contexts ā
ā ā
ā Level 2: Advanced Features ā
ā āāā Understand and use Symbols for unique identifiers ā
ā āāā Implement custom iterators and iterables ā
ā āāā Create generators for lazy evaluation ā
ā ā
ā Level 3: Pattern Recognition ā
ā āāā Know when to use each ES6+ feature ā
ā āāā Combine features for elegant solutions ā
ā āāā Write modern, idiomatic JavaScript ā
ā ā
ā Level 4: Deep Understanding ā
ā āāā Understand well-known Symbols and their uses ā
ā āāā Build async generators for streaming data ā
ā āāā Create powerful tagged template utilities ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š Sections
13.1 Destructuring
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā DESTRUCTURING ā
ā ā
ā Array Destructuring: Object Destructuring: ā
ā āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā const [a, b, c] = [1, 2, 3]; const { name, age } = person; ā
ā ā ā ā ā ā ā ā ā ā ā
ā ā¼ ā¼ ā¼ ā¼ ā¼ ā¼ ā¼ ā¼ ā¼ ā
ā 1 2 3 position "John" 30 property name ā
ā matters! matters! ā
ā ā
ā Features: ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā Default Values ā const { name = "Guest" } = obj; ā ā
ā ā Renaming ā const { name: userName } = obj; ā ā
ā ā Nested ā const { addr: { city } } = obj; ā ā
ā ā Rest ā const { name, ...rest } = obj; ā ā
ā ā Function Params ā function greet({ name }) { } ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
- ā¢Array destructuring - Extract values by position
- ā¢Object destructuring - Extract values by key name
- ā¢Nested destructuring - Deep value extraction
- ā¢Default values - Fallbacks for undefined
- ā¢Function parameter destructuring - Clean function signatures
13.2 Template Literals
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā TEMPLATE LITERALS ā
ā ā
ā Basic Interpolation: ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā const greeting = `Hello, ${name}! You are ${age} years old.`; ā ā
ā ā ā ā ā ā ā
ā ā ā ā āāā Any JS expression ā ā
ā ā ā āāā Variable ā ā
ā ā āāā Backticks, not quotes ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā Multi-line Strings: Tagged Templates: ā
ā āāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāāā ā
ā const html = ` function tag(strings, ...vals) { ā
ā <div> return strings.reduce((r, s, i) => ā
ā <h1>Title</h1> r + s + (vals[i] || ''), ''); ā
ā <p>Content</p> } ā
ā </div> tag`Hello ${name}!`; ā
ā `; ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
- ā¢String interpolation - Embed expressions in strings
- ā¢Multi-line strings - Natural line breaks
- ā¢Tagged templates - Custom string processing
- ā¢Raw strings - String.raw for escape sequences
13.3 Symbols
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā SYMBOLS ā
ā ā
ā What is a Symbol? ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā ā
ā ā const sym1 = Symbol('id'); ā ā
ā ā const sym2 = Symbol('id'); ā ā
ā ā ā ā
ā ā sym1 === sym2 // false - ALWAYS UNIQUE! ā ā
ā ā ā ā
ā ā typeof sym1 // "symbol" ā ā
ā ā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā Well-Known Symbols: ā
ā āāāāāāāāāāāāāāāāāāā¬āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā Symbol.iterator ā Makes an object iterable (for...of) ā ā
ā ā Symbol.toStringTag ā Customize Object.prototype.toString ā ā
ā ā Symbol.species ā Constructor for derived objects ā ā
ā ā Symbol.hasInstance ā Customize instanceof behavior ā ā
ā ā Symbol.toPrimitive ā Customize type coercion ā ā
ā āāāāāāāāāāāāāāāāāāā“āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
- ā¢Creating symbols - Unique identifiers
- ā¢Symbol registry - Global symbol sharing
- ā¢Well-known symbols - Customize object behavior
- ā¢Symbol use cases - Private-ish properties, meta-programming
13.4 Iterators and Iterables
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ITERATORS & ITERABLES ā
ā ā
ā The Iterator Protocol: ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā ā
ā ā iterator.next() āāāŗ { value: any, done: boolean } ā ā
ā ā ā ā ā ā ā
ā ā ā ā āāā true when exhausted ā ā
ā ā ā āāā current value ā ā
ā ā āāā call repeatedly ā ā
ā ā ā ā
ā ā First call: { value: 1, done: false } ā ā
ā ā Second call: { value: 2, done: false } ā ā
ā ā Third call: { value: 3, done: false } ā ā
ā ā Fourth call: { value: undefined, done: true } ā ā
ā ā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā The Iterable Protocol: ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā ā
ā ā const iterable = { ā ā
ā ā [Symbol.iterator]() { āāā Implement this method ā ā
ā ā return iterator; āāā Return an iterator ā ā
ā ā } ā ā
ā ā }; ā ā
ā ā ā ā
ā ā // Now works with: ā ā
ā ā for (const item of iterable) { } ā ā
ā ā [...iterable] ā ā
ā ā Array.from(iterable) ā ā
ā ā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
- ā¢Iterator protocol - The
next()method pattern - ā¢Iterable protocol -
[Symbol.iterator]method - ā¢Custom iterators - Make any object iterable
- ā¢Built-in iterables - Arrays, strings, Maps, Sets
13.5 Generators
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā GENERATORS ā
ā ā
ā Generator Function: ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā ā
ā ā function* countTo(n) { āāā The * marks a generator ā ā
ā ā for (let i = 1; i <= n; i++) { ā ā
ā ā yield i; āāā Pause and return value ā ā
ā ā } ā ā
ā ā } ā ā
ā ā ā ā
ā ā const gen = countTo(3); // Returns a generator object ā ā
ā ā gen.next(); // { value: 1, done: false } ā ā
ā ā gen.next(); // { value: 2, done: false } ā ā
ā ā gen.next(); // { value: 3, done: false } ā ā
ā ā gen.next(); // { value: undefined, done: true } ā ā
ā ā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā Execution Flow: ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā ā
ā ā function* example() { ā ā
ā ā console.log('Start'); āāāŗ Runs on first .next() ā ā
ā ā yield 1; āāāŗ Pauses, returns { value: 1 } ā ā
ā ā console.log('Middle'); āāāŗ Runs on second .next() ā ā
ā ā yield 2; āāāŗ Pauses, returns { value: 2 } ā ā
ā ā console.log('End'); āāāŗ Runs on third .next() ā ā
ā ā return 'done'; āāāŗ Returns { value: 'done', done: true } ā ā
ā ā } ā ā
ā ā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā Infinite Sequences (Lazy Evaluation): ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā function* infiniteNumbers() { ā ā
ā ā let n = 0; ā ā
ā ā while (true) { ā ā
ā ā yield n++; // Memory efficient - generates on demand! ā ā
ā ā } ā ā
ā ā } ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
- ā¢Generator functions - Functions that can pause and resume
- ā¢yield keyword - Return intermediate values
- ā¢Generator delegation - yield* for nested generators
- ā¢Async generators - Combine generators with Promises
š ES6+ Features Timeline
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā JAVASCRIPT EVOLUTION TIMELINE ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā ES6/ES2015 - The Big Update ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā¢ let/const ā¢ Classes ā¢ Modules ā ā
ā ā ā¢ Arrow functions ā¢ Destructuring ā¢ Default params ā ā
ā ā ā¢ Template literals ā¢ Spread/rest ā¢ for...of ā ā
ā ā ā¢ Promises ā¢ Symbols ā¢ Iterators ā ā
ā ā ā¢ Generators ā¢ Map/Set ā¢ WeakMap/WeakSet ā ā
ā ā ā¢ Proxy ā¢ Reflect ā¢ Binary literals ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā ES2016 (ES7) ā
ā āāā Array.prototype.includes() ā
ā āāā Exponentiation operator (**) ā
ā ā
ā ES2017 (ES8) ā
ā āāā async/await ā
ā āāā Object.entries() / Object.values() ā
ā āāā String padding (padStart, padEnd) ā
ā āāā Trailing commas in function parameters ā
ā ā
ā ES2018 (ES9) ā
ā āāā Rest/spread for objects ({ ...obj }) ā
ā āāā Async iteration (for await...of) ā
ā āāā Promise.finally() ā
ā āāā RegExp improvements ā
ā ā
ā ES2019 (ES10) ā
ā āāā Array.prototype.flat() / flatMap() ā
ā āāā Object.fromEntries() ā
ā āāā String.prototype.trimStart() / trimEnd() ā
ā āāā Optional catch binding ā
ā ā
ā ES2020 (ES11) ā
ā āāā Optional chaining (?.) ā
ā āāā Nullish coalescing (??) ā
ā āāā BigInt ā
ā āāā Promise.allSettled() ā
ā āāā globalThis ā
ā āāā Dynamic import() ā
ā ā
ā ES2021 (ES12) ā
ā āāā Logical assignment (&&=, ||=, ??=) ā
ā āāā String.prototype.replaceAll() ā
ā āāā Promise.any() ā
ā āāā Numeric separators (1_000_000) ā
ā āāā WeakRefs ā
ā ā
ā ES2022 (ES13) ā
ā āāā Top-level await ā
ā āāā Class fields (public and private #) ā
ā āāā Static class blocks ā
ā āāā .at() for indexables ā
ā āāā Error cause ā
ā āāā Object.hasOwn() ā
ā ā
ā ES2023 (ES14) ā
ā āāā Array find from last (findLast, findLastIndex) ā
ā āāā Hashbang grammar ā
ā āāā Symbols as WeakMap keys ā
ā ā
ā ES2024 (ES15) ā
ā āāā Object.groupBy() / Map.groupBy() ā
ā āāā Promise.withResolvers() ā
ā āāā ArrayBuffer transfer ā
ā āāā Well-formed Unicode strings ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š Key Concepts Summary
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā FEATURE QUICK REFERENCE ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā Feature ā Purpose ā Example ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā Destructuring ā Extract values ā const {name} = obj ā
ā Template Literals ā String interpolation ā `Hello ${name}` ā
ā Symbols ā Unique identifiers ā Symbol('id') ā
ā Iterators ā Sequential access ā obj[Symbol.iterator]() ā
ā Generators ā Lazy sequences ā function* gen() { yield x } ā
ā Spread (...) ā Expand iterables ā [...arr], {...obj} ā
ā Rest (...) ā Collect remaining ā function(a, ...rest) ā
ā Optional (?.) ā Safe property access ā obj?.prop?.nested ā
ā Nullish (??) ā Null/undefined check ā value ?? defaultValue ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š” Common Patterns
Destructuring with Defaults
// Object destructuring with defaults and renaming
const {
name = 'Guest',
age: userAge = 0,
address: { city = 'Unknown' } = {},
} = user;
// Array destructuring with rest
const [first, second, ...remaining] = items;
// Swap variables
[a, b] = [b, a];
Template Literal Patterns
// Multi-line SQL
const query = `
SELECT *
FROM users
WHERE age > ${minAge}
ORDER BY name
`;
// Tagged template for escaping
function html(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i] ? escapeHtml(values[i]) : '';
return result + str + value;
}, '');
}
Generator Patterns
// Range generator
function* range(start, end, step = 1) {
for (let i = start; i <= end; i += step) {
yield i;
}
}
// Combine with for...of
for (const n of range(1, 10, 2)) {
console.log(n); // 1, 3, 5, 7, 9
}
š Section Files
| Section | Topic | Key Files |
|---|---|---|
| 13.1 | Destructuring | 01-array-destructuring.js, 02-object-destructuring.js |
| 13.2 | Template Literals | 01-interpolation.js, 02-tagged-templates.js |
| 13.3 | Symbols | 01-creating-symbols.js, 02-well-known-symbols.js |
| 13.4 | Iterators & Iterables | 01-iterator-protocol.js, 02-custom-iterables.js |
| 13.5 | Generators | 01-generator-basics.js, 02-async-generators.js |
ā ļø Common Pitfalls
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ES6+ PITFALLS TO AVOID ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā ā Forgetting default object in destructuring ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā function fn({ x }) {} // Throws if called with undefined! ā
ā function fn({ x } = {}) {} // ā
Safe ā
ā ā
ā ā Arrow functions for methods ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā const obj = { ā
ā name: 'Test', ā
ā greet: () => this.name // ā `this` is not the object ā
ā greet() { return this.name } // ā
Use shorthand method ā
ā }; ā
ā ā
ā ā Modifying during iteration ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā for (const item of array) { ā
ā array.push(newItem); // ā Infinite loop possibility ā
ā } ā
ā ā
ā ā Symbol comparison ā
ā āāāāāāāāāāāāāāāāāāāā ā
ā Symbol('a') === Symbol('a') // false! Symbols are always unique ā
ā ā
ā ā Consuming generators multiple times ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā const gen = generator(); ā
ā [...gen]; // [1, 2, 3] ā
ā [...gen]; // [] - already exhausted! ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š Related Modules
- ā¢Previous: Module 12 - Execution Context
- ā¢Next: Module 14 - ES Modules
- ā¢Related: Module 15 - Asynchronous JavaScript (async/await)
šÆ Learning Path
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā RECOMMENDED ORDER ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā Day 1-2: Destructuring ā
ā āāā Start with array destructuring (simpler) ā
ā āāā Move to object destructuring ā
ā āāā Practice with function parameters ā
ā ā
ā Day 3: Template Literals ā
ā āāā Basic interpolation ā
ā āāā Multi-line strings ā
ā āāā Build a simple tagged template ā
ā ā
ā Day 4-5: Symbols & Iterators ā
ā āāā Understand symbol uniqueness ā
ā āāā Learn the iterator protocol ā
ā āāā Make a custom iterable ā
ā ā
ā Day 6-7: Generators ā
ā āāā Basic generator syntax ā
ā āāā yield and next() ā
ā āāā Practical generator use cases ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā