JavaScript Notes
HubYour First JavaScript Program — Hello World & Beyond Complete Guide 2026History of JavaScript — Complete Timeline from 1995 to 2026How JavaScript Runs — Complete Guide to Execution, Call Stack & Event LoopJavaScript Engine Explained — V8, JIT Compilation & How Code Gets FastJavaScript Use Cases — 15 Things You Can Build with JavaScript (2026)JavaScript vs Other Languages — Complete Comparison Guide 2026What is JavaScript? Complete BeginnerWhy Learn JavaScript in 2026? Career, Salary, Scope & Benefits GuideJavaScript Break Statement Tutorial – Complete Guide with ExamplesJavaScript Break and Continue Statements – Complete Guide with ExamplesJavaScript Continue Statement Tutorial – Skip Iterations with ExamplesJavaScript Do While Loop Tutorial – Execute at Least Once with ExamplesJavaScript Do-While Loop Tutorial – Complete Guide with ExamplesJavaScript For Loop Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Conditional Logic with ExamplesJavaScript If Else Statement Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Complete Guide with ExamplesJavaScript Nested If Statement Tutorial – Multi-Level Conditions with ExamplesNested Loops in JavaScriptJavaScript Control Flow Practice Programs – 20+ Exercises with SolutionsJavaScript Switch Statement Tutorial – Case Matching with ExamplesSwitch Statement in JavaScriptJavaScript While Loop Tutorial – Complete Guide with ExamplesJavaScript Arrow Functions Tutorial – Syntax, Use Cases & this BindingJavaScript Callback Functions Explained – Synchronous & AsynchronousJavaScript Closures Explained – Lexical Scope, Private State & MemoryJavaScript Function Declaration Tutorial – Hoisting, Syntax & ScopeJavaScript Function Expression Tutorial – Anonymous, Named & AssignedJavaScript Higher Order Functions Tutorial – map, filter, reduce & Custom HOFsJavaScript IIFE Explained – Immediately Invoked Function ExpressionJavaScript Functions Practice Programs – 20+ Exercises with SolutionsJavaScript Recursion Tutorial – Call Stack, Base Case & Recursive PatternsJavaScript Array Basics - Complete BeginnerJavaScript Array Methods - Complete Reference Guide with ExamplesJavaScript Array Programs - 20+ Practice Problems with SolutionsJavaScript Arrays Basics - Complete Guide with Examples & DiagramsJavaScript Array filter() Method - Complete Tutorial with ExamplesJavaScript filter() Method — Complete Guide with Examples 2026JavaScript Array find() Method - Complete Tutorial with ExamplesJavaScript find() & findIndex() — Complete Guide 2026JavaScript Array map() Method - Complete Tutorial with ExamplesJavaScript map() Method — Transform Arrays Complete Guide 2026JavaScript map() vs forEach() - Key Differences with ExamplesJavaScript Array push() and pop() - Complete Tutorial with ExamplesJavaScript Array reduce() Method - Complete Tutorial with ExamplesJavaScript reduce() Method — Complete Deep Dive with Examples 2026JavaScript Array shift() and unshift() - Complete Tutorial with ExamplesJavaScript Array sort() Method - Complete Tutorial with ExamplesJavaScript splice() vs slice() - Complete Tutorial with ExamplesJavaScript Object Destructuring - Complete Guide with ExamplesJavaScript Objects - Complete Guide to Object Basics with ExamplesJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideJavaScript Object Programs - Practice Problems with SolutionsJavaScript Object Properties - Keys, Values, Descriptors & Dynamic PropertiesJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideJavaScript Spread Operator (...) - Complete Guide with ExamplesJavaScript this Keyword - Complete Guide with Binding Rules & ExamplesJavaScript String Basics - Complete Guide to Strings with ExamplesJavaScript String Methods - Complete Reference with Examples & OutputJavaScript String Programs - Practice Problems with SolutionsJavaScript String Replacing - replace(), replaceAll() & Regex Patterns GuideJavaScript String Searching Methods - includes, indexOf, startsWith, match GuideJavaScript Template Literals (ES6) - Complete Guide with Tagged TemplatesJavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete GuideJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideJavaScript DOM Introduction - Complete Guide to Document Object ModelJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesJavaScript DOM Forms - Form Handling, Validation & FormData Complete GuideJavaScript localStorage - Complete Guide to Web Storage APIlocalStorage vs sessionStorage - JavaScript Web Storage Comparison GuideJavaScript DOM Removing Elements - remove(), removeChild() Complete GuideJavaScript DOM Selecting Elements - querySelector, getElementById Complete GuideJavaScript sessionStorage - Complete Guide to Session-Based Web StorageJavaScript Click Event - addEventListener, Event Handler Complete GuideEvent Bubbling in JavaScript – Complete Guide with Examples (2026)Event Capturing in JavaScript – Complete Guide to Capture Phase (2026)Event Delegation in JavaScript – Complete Guide with Examples (2026)JavaScript Event Object – Complete Guide with Examples (2026)JavaScript Form Events – Complete Guide with Examples (2026)JavaScript Keyboard Events – Complete Guide to keydown, keyup & Key Properties (2026)JavaScript Mouse Events – Complete Guide with Examples (2026)JavaScript Async Await - Complete Guide with Examples & Error HandlingJavaScript Call Stack - Complete Guide with Visual Diagrams & ExamplesJavaScript Callback Queue (Task Queue) - Complete Guide with DiagramsJavaScript Callbacks - Complete Guide with Callback Hell & PatternsJavaScript Event Loop - Complete Guide with Visual Diagrams & ExamplesJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/AwaitJSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error HandlingJavaScript Promise.all, Promise.race, Promise.any, Promise.allSettled — Complete Guide 2026JavaScript Promises - Complete Guide with Chaining, Error Handling & Event LoopSynchronous vs Asynchronous JavaScript — Complete Explanation 2026JavaScript Web APIs - Complete Guide: setTimeout, fetch, DOM Events & MoreClosures in JavaScript — Complete Guide with Examples 2026Hoisting in JavaScript — Complete Guide with Examples 2026Prototype in JavaScript — Complete Guide with Examples 2026Scope in JavaScript — Complete Guide with Examples 2026Browser Object Model (BOM) in JavaScript — Complete GuideCanvas API in JavaScript — Complete Drawing & Animation GuideDrag and Drop API in JavaScript — Complete TutorialGeolocation API in JavaScript — Get User Location TutorialHistory API in JavaScript — SPA Routing & pushState GuideNotification API in JavaScript — Push Notifications TutorialService Workers in JavaScript — Offline, Caching & PWA GuideWeb Storage API in JavaScript — localStorage & sessionStorage GuideWeb Workers in JavaScript — Multithreading & Background Tasks GuideJavaScript Interview — Behavioral Questions and Soft Skills Guide 2026Common JavaScript Interview Mistakes — What to Avoid 2026JavaScript Interview Tips — Strategy and Preparation Guide 2026JavaScript Mock Interview — Practice Questions with Solutions 2026JavaScript System Design — Frontend Architecture Interview Guide 2026JavaScript apply() Method - Complete Guide with ExamplesJavaScript bind() Method - Complete Guide with ExamplesJavaScript call() Method - Complete Guide with ExamplesJavaScript call() vs apply() vs bind() - Complete Comparison GuideJavaScript Currying - Complete Guide with ExamplesJavaScript Debounce - Complete Guide with Timeline DiagramsJavaScript Execution Context - Complete Guide with Stack DiagramsJavaScript Garbage Collection - Memory Lifecycle & Mark-and-Sweep GuideJavaScript Generators - Complete Guide with yield and IterationJavaScript Hoisting - Complete Guide with var, let, const & FunctionsJavaScript Iterators - Complete Guide with Iterator ProtocolJavaScript Lexical Scope - Complete Guide with Scope Chain DiagramsJavaScript Memory Management - Complete Guide with Lifecycle DiagramsJavaScript Modules - Complete Guide with import export ExamplesJavaScript Scope - Complete Guide with var, let, const & Scope ChainJavaScript Symbols - Complete Guide with Well-Known SymbolsJavaScript Throttle - Complete Guide with Timeline DiagramsJavaScript Comments Complete Guide – Single Line, Multi-line & JSDoc with ExamplesJavaScript Data Types Complete Guide – Primitives, Objects & typeof with ExamplesJavaScript Input and Output Complete Guide – console.log, prompt, alert & DOM with ExamplesJavaScript Keywords Complete Guide – Reserved Words List with Examples for BeginnersJavaScript null vs undefined – Complete Guide with Differences, Examples & Interview Q&AJavaScript Operators Complete Guide – Arithmetic, Comparison, Logical & More with ExamplesJavaScript Strict Mode Complete Guide – JavaScript Type Conversion Complete Guide – Explicit & Implicit Coercion with ExamplesJavaScript var vs let vs const – Complete Guide with Scope, Hoisting & Best PracticesJavaScript Variables Complete Guide – Declaration, Naming Rules & Memory Model for BeginnersDeque (Double-Ended Queue) in JavaScript — Complete GuideLinked List in JavaScript — Nodes, Pointers & Operations GuideJavaScript Map — Key-Value Data Structure Complete GuideJavaScript Numbers — IEEE 754, Precision, and Number Methods GuidePriority Queue in JavaScript — Min Heap Implementation GuideQueue Data Structure in JavaScript — FIFO, Enqueue & Dequeue ExplainedJavaScript Set — Unique Values Data Structure GuideSorting Algorithms in JavaScript — Bubble, Merge, Quick Sort GuideStack Data Structure in JavaScript — LIFO, Push, Pop ExplainedJavaScript Typed Arrays — ArrayBuffer, Int32Array, Float64Array GuideJavaScript WeakMap — Weak References, Memory Management GuideJavaScript WeakSet — Complete Guide with Examples 2026Applications of JavaScript — Where JS is Used in 2026 Complete GuideJavaScript Backend Frameworks — Node.js, Express, NestJS Complete Guide 2026JavaScript Frontend Libraries — React, Vue, Angular, Svelte Complete Overview 2026JavaScript Full-Stack Frameworks — Next.js, Remix, Astro Complete Guide 2026JavaScript Career Paths & Jobs — Salary, Roles & Roadmap 2026JavaScript Libraries vs Frameworks — Difference & Examples Complete Guide 2026JavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceofJavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack TracesJavaScript throw Statement – Throw Errors, Custom Messages & Error TypesJavaScript Try Catch Finally – Error Handling Complete GuideTop 30 JavaScript Closure Interview Questions & Answers 2026Top 30 JavaScript Coding Interview Questions 2026 (With Solutions)Top 25 JavaScript Event Loop Interview Questions & Answers 2026Top 50 JavaScript Interview Questions & Answers 2026Top 30 JavaScript Promise Interview Questions & Answers 202650 Tricky JavaScript Output Questions 2026 (With Answers)Build a JavaScript Calculator - Step by Step Project TutorialBuild a JavaScript Image Carousel - Step by Step Project TutorialBuild a JavaScript Counter Application - Step by Step Project TutorialBuild a JavaScript Digital Clock - Step by Step Project TutorialBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialBuild a JavaScript Email Validator - Step by Step Project TutorialBuild a JavaScript Employee Database Management App - Step by Step TutorialBuild a JavaScript Expense Tracker - Step by Step Project TutorialBuild a GitHub Profile Search App in JavaScript - Step by Step TutorialBuild a JavaScript Image Slider - Step by Step Project TutorialBuild a JavaScript Multi-Step Progress Bar - Step by Step TutorialBuild JavaScript Nested Chat Comments - Step by Step Project TutorialBuild a JavaScript Notes App - Step by Step Project TutorialBuild a JavaScript OTP Input Field - Step by Step Project TutorialBuild a JavaScript Palindrome Checker - Step by Step Project TutorialBuild a JavaScript Price Range Slider - Step by Step Project TutorialBuild a JavaScript Prime Number Checker - Step by Step Project TutorialBuild a JavaScript QR Code Generator - Step by Step Project TutorialBuild a JavaScript QR Code Scanner - Step by Step Project TutorialBuild a JavaScript Quiz App - Step by Step Project TutorialBuild a JavaScript Random Number Generator - Step by Step TutorialBuild a JavaScript Random Password Generator - Step by Step TutorialJavaScript Image Resize & Compress — Canvas API Project 2026JavaScript Responsive Admin Dashboard — DOM & CSS Project 2026JavaScript Show/Hide Password Toggle — Beginner DOM Project 2026JavaScript Sortable Filterable Table — DOM & Array Methods Project 2026JavaScript Stopwatch Project — setInterval & DOM Tutorial 2026JavaScript Student Grade Calculator — Arrays & Logic Project 2026JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026JavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026JavaScript Toast Notification Project — Custom Alerts Tutorial 2026Build a Todo App in JavaScript - Step by Step Project TutorialJavaScript Unicode Character Value Finder — charCodeAt & fromCharCode Project 2026JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026JavaScript Cheat Sheet 2026 — Complete Quick ReferenceImportant JavaScript Concepts Every Developer Must Know in 2026JavaScript One Shot Notes 2026 — Complete JS in One PageJavaScript Quick Revision Notes — Interview Prep in 30 Minutes 2026Abstraction in JavaScript OOP – Hide Complexity, Expose SimplicityJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionJavaScript Inheritance – extends, super, and Prototype-Based InheritanceObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPolymorphism in JavaScript – Method Overriding, Duck Typing & Many FormsJavaScript Prototype Chain – How Property Lookup Works in JavaScriptJavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype PropertyJavaScript Advanced Practice Problems — 15+ Interview-Level Challenges 2026JavaScript Assignments — 10 Project-Based Learning Tasks 2026JavaScript Beginner Practice Problems — 20+ Coding Exercises 2026JavaScript Coding Challenges — 25 Interview-Style Problems 2026JavaScript Intermediate Practice Problems — 20+ Coding Challenges 2026JavaScript MCQs — 50 Multiple Choice Questions with Answers 2026JavaScript Regex Character Classes – [abc], [^abc], Ranges & ShortcutsJavaScript Regex Email Validation – Pattern, Edge Cases & Best PracticesJavaScript Regex Flags – g, i, m, s, u, y Flags Explained with ExamplesJavaScript Regex Groups – Capturing, Non-Capturing & Named GroupsJavaScript Number Validation with Regex — Complete Patterns & Examples 2026JavaScript Password Validation with Regex — Strength Checker & Patterns 2026JavaScript Regex Quantifiers – *, +, ?, {n,m}, Greedy vs Lazy MatchingJavaScript Regex Basics – Regular Expressions Tutorial for BeginnersJavaScript Regex Projects — 10 Practical Mini-Projects with Code 2026JavaScript URL Validation with Regex — Complete Patterns & Examples 2026JavaScript Username Validation with Regex — Patterns & Form Examples 2026JavaScript TutorialJavaScript Lazy Loading — Images, Modules & Components Complete Guide 2026JavaScript Performance Optimization — Speed Up Your Code Complete Guide 2026JavaScript Unit Testing with Jest — Complete Guide for Beginners 2026
Master JavaScript iterators: iterator protocol, Symbol.iterator, custom iterables, for...of loop, generators as iterators, lazy evaluation, and interview Q&A.
What are Iterators?
An iterator is any object that knows how to access items in a collection one at a time. It follows the Iterator Protocol: it must have a .next() method that returns { value, done } objects.
An iterable is any object that knows how to create an iterator — it must implement the [Symbol.iterator]() method that returns an iterator.
One-liner: An iterator is an object with .next() that gives you one item at a time. An iterable is an object that can create an iterator.The Two Protocols
Iterator Protocol
An object is an iterator if it has:
js example
{
next() {
return { value: any, done: boolean };
}
}value: the current item (orundefinedwhen done)done:falsewhile items remain,truewhen exhausted
Iterable Protocol
An object is an iterable if it has:
Example
{
[Symbol.iterator]() {
return iterator; // Returns an iterator object
}
}
Built-in Iterables
JavaScript's built-in iterables:
Example
// Arrays
const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
Output
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }How for...of Uses the Iterator Protocol
Example
const fruits = ["apple", "mango", "banana"];
for (const fruit of fruits) {
console.log(fruit);
}
Output
apple mango banana
Internally, for...of does this:
Example
Step 1: Call fruits[Symbol.iterator]() → get iterator
Step 2: iter.next() → { value: "apple", done: false } → print "apple"
Step 3: iter.next() → { value: "mango", done: false } → print "mango"
Step 4: iter.next() → { value: "banana", done: false } → print "banana"
Step 5: iter.next() → { value: undefined, done: true } → stop loop
Iterator Protocol Visualization
Example
┌──────────────────────────────────────────────────────────┐
│ ITERATOR PROTOCOL FLOW │
├──────────────────────────────────────────────────────────┤
│ │
│ ITERABLE ITERATOR │
│ ┌─────────────┐ ┌────────────────────┐ │
│ │ [Symbol. │ returns │ .next() │ │
│ │ iterator]()│ ──────────► │ → { value, done } │ │
│ └─────────────┘ └────────────────────┘ │
│ │
│ Consumer (for...of, spread, destructuring): │
│ ① Get iterator via [Symbol.iterator]() │
│ ② Call .next() repeatedly │
│ ③ Use value, stop when done: true │
│ │
└──────────────────────────────────────────────────────────┘
Creating a Custom Iterator
Example
function createRangeIterator(start, end) {
let current = start;
return {
next() {
if (current <= end) {
return { value: current++, done: false };
}
return { value: undefined, done: true };
},
};
}
const range = createRangeIterator(1, 4);
console.log(range.next());
console.log(range.next());
console.log(range.next());
console.log(range.next());
console.log(range.next());
Output
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }Creating a Custom Iterable Object
To make an object work with for...of, add [Symbol.iterator]():
Example
const range = {
from: 1,
to: 5,
[Symbol.iterator]() {
let current = this.from;
const last = this.to;
return {
next() {
if (current <= last) {
return { value: current++, done: false };
}
return { value: undefined, done: true };
},
};
},
};
for (const num of range) {
console.log(num);
}
console.log([...range]);
Output
1 2 3 4 5 [1, 2, 3, 4, 5]
Self-Referential Iterable (Iterator + Iterable)
An object can be both the iterable AND the iterator by returning this from [Symbol.iterator]():
Example
function counter(start, end) {
let current = start;
return {
[Symbol.iterator]() { return this; }, // Returns itself
next() {
if (current <= end) return { value: current++, done: false };
return { value: undefined, done: true };
},
};
}
const cnt = counter(10, 13);
for (const n of cnt) {
console.log(n);
}
Output
10 11 12 13
Generators as Iterators
Generators automatically implement the iterator protocol:
Example
function* range(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
const gen = range(1, 5);
console.log(gen.next()); // { value: 1, done: false }
for (const n of range(1, 5)) {
console.log(n);
}
Output
{ value: 1, done: false }
1
2
3
4
5Iterating Over Different Built-ins
js example
// String iterator
for (const char of "WoHo") {
console.log(char);
}Output
W o H o
Example
// Map iterator
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, val] of map) {
console.log(`${key}: ${val}`);
}
Output
a: 1 b: 2
Example
// Set iterator
const set = new Set([10, 20, 30]);
for (const num of set) {
console.log(num);
}
Output
10 20 30
Infinite Lazy Iterator
Example
function infiniteIterator() {
let n = 0;
return {
[Symbol.iterator]() { return this; },
next() { return { value: n++, done: false }; },
};
}
const inf = infiniteIterator();
const firstFive = [];
for (const n of inf) {
firstFive.push(n);
if (firstFive.length === 5) break; // Must break — it's infinite
}
console.log(firstFive);
Output
[0, 1, 2, 3, 4]
Iterators vs Generators — Comparison
| Feature | Custom Iterator | Generator |
|---|---|---|
| Syntax | Manual object with .next() | function* with yield |
| Code complexity | More verbose | Very concise |
| State management | Manual variables | Engine handles it |
| Lazy evaluation | ✅ | ✅ |
| Best for | Simple/precise control | Complex sequences |
Common Mistakes
❌ Mistake 1 — Forgetting [Symbol.iterator] on Custom Object
Example
const obj = {
items: [1, 2, 3],
// Missing [Symbol.iterator]!
};
for (const item of obj) { // TypeError: obj is not iterable
console.log(item);
}
Output
TypeError: obj is not iterable
Example
// Fix: add [Symbol.iterator]
obj[Symbol.iterator] = function() {
let i = 0;
return {
next: () => i < this.items.length
? { value: this.items[i++], done: false }
: { value: undefined, done: true }
};
};
❌ Mistake 2 — Reusing Exhausted Iterator
Example
const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();
// Exhaust the iterator
for (const n of iter) console.log(n); // 1, 2, 3
// Try to reuse
for (const n of iter) console.log(n); // Nothing! Already done.
Output
1 2 3
(second loop produces nothing — iterator is exhausted)
❌ Mistake 3 — Spreading Infinite Iterator
Example
function* infinite() { let n = 0; while(true) yield n++; }
const arr = [...infinite()]; // Infinite loop — crashes!
Always use break or take-style limiting when consuming infinite iterators.
Interview Questions 🎯
Q1. What is the Iterator Protocol in JavaScript?
The Iterator Protocol defines that an object is an iterator if it has a .next() method that returns { value: any, done: boolean }. When done is true, the iterator is exhausted.
Q2. What is the difference between an iterable and an iterator?
- Iterable: An object with a
[Symbol.iterator]()method that returns an iterator. Examples: Array, String, Map, Set. - Iterator: An object with a
.next()method that returns{ value, done }. It maintains position state.
An iterable can produce multiple independent iterators. An iterator tracks one traversal position.
Q3. How does for...of use the iterator protocol?
for...of first calls [Symbol.iterator]() to get an iterator, then repeatedly calls .next() and uses the value from each result. It stops when done: true is returned.
Q4. How do you make a custom object iterable?
Add a [Symbol.iterator]() method that returns an object with a .next() method:
Example
const obj = {
data: [10, 20, 30],
[Symbol.iterator]() {
let i = 0;
return {
next: () => i < this.data.length
? { value: this.data[i++], done: false }
: { value: undefined, done: true }
};
}
};
for (const n of obj) console.log(n);
Output
10 20 30
Q5. What is the difference between an iterator and a generator?
A generator is a special function (function*) that automatically creates an iterator. Every generator is an iterator (it has .next() and [Symbol.iterator]()), but not every iterator is a generator (you can manually implement one).
Q6. What built-in JavaScript types are iterable?
Array, String, Map, Set, TypedArray, arguments object, NodeList, and any object implementing [Symbol.iterator]. Plain objects {} are NOT iterable by default.
Q7. What is lazy evaluation in the context of iterators?
Lazy evaluation means values are computed on demand — only when .next() is called. This allows infinite sequences to exist in memory efficiently, since values are produced one at a time rather than all at once.
Q8. How can you create an infinite iterator safely?
Use an infinite iterator with a break statement in for...of, or implement a take(n) utility:
js example
function take(iterable, n) {
const result = [];
for (const item of iterable) {
result.push(item);
if (result.length >= n) break;
}
return result;
}Key Takeaways 🔑
- Iterator: Object with
.next()returning{ value, done } - Iterable: Object with
[Symbol.iterator]()returning an iterator for...of, spread (...), and destructuring all use the iterator protocol- Built-in iterables: Array, String, Map, Set, TypedArray
- Plain objects are NOT iterable by default — add
[Symbol.iterator] - Generators automatically implement the iterator protocol
- Iterators enable lazy evaluation — infinite sequences are safe because values are produced on demand
- Once exhausted (
done: true), create a new iterator — don't reuse
Summary
The Iterator Protocol is the foundation of how JavaScript handles sequential data access. An iterable exposes a [Symbol.iterator]() factory method; an iterator tracks position and has a .next() method returning { value, done }. All built-in collection types (Array, String, Map, Set) implement this protocol, enabling for...of, spread, and destructuring. Custom iterables can be created by implementing [Symbol.iterator], and generators offer a concise shorthand for creating iterators. The protocol's power lies in lazy evaluation — values are produced only when requested, enabling infinite sequences and memory-efficient data pipelines.
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript Iterators - Complete Guide with Iterator Protocol.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, advanced, iterators, javascript iterators - complete guide with iterator protocol
Related JavaScript Master Course Topics
Continue learning this concept
Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.Advanced JavascriptJavaScript bind() Method - Complete Guide with ExamplesMaster JavaScript bind() with permanent this binding, partial application, event handlers, currying patterns, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript call() Method - Complete Guide with ExamplesMaster JavaScript call() method: this binding, syntax, constructor inheritance, function borrowing, strict mode differences, and top interview Q&A.Advanced JavascriptJavaScript call() vs apply() vs bind() - Complete Comparison GuideMaster JavaScript call vs apply vs bind with side-by-side comparisons, decision rules, real examples, this binding diagrams, and top interview Q&A.Advanced JavascriptJavaScript Currying - Complete Guide with ExamplesLearn JavaScript currying with step-by-step examples, closures, partial application, real-world use cases, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript Debounce - Complete Guide with Timeline DiagramsMaster JavaScript debounce with implementation, timeline diagrams, search input examples, debounce vs throttle comparison, and top interview Q&A.