JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Iterables


📘 JavaScript Iterables – Loopable Objects

In JavaScript, an iterable is a data structure that allows you to access its elements one at a time using a loop, especially the for...of loop.


🔹 What Makes an Object Iterable?

An object is iterable if it has a method with the key Symbol.iterator.

The most common built-in iterables in JavaScript are:

  • Arrays

  • Strings

  • Sets

  • Maps

  • NodeLists

  • And others...


🔹 Using for...of with Iterables

let arr = ["a", "b", "c"];

for (let value of arr) {
  console.log(value);
}
// Output: a b c

🔹 Strings are Iterable

let word = "Hello";

for (let char of word) {
  console.log(char);
}
// Output: H e l l o

🔹 Sets and Maps Are Iterable

let set = new Set([1, 2, 3]);

for (let num of set) {
  console.log(num);
}
let map = new Map([
  ["name", "John"],
  ["age", 25]
]);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

🔹 Iterables vs. Array-like Objects

Feature Iterable Array-like Object
Has Symbol.iterator ✅ Yes ❌ No
Can be looped with for...of ✅ Yes ❌ No
Has indexed elements ✅ Yes (usually) ✅ Yes
Has length property ❌ Not required ✅ Yes

🔹 Creating a Custom Iterable

You can make your own object iterable by defining a [Symbol.iterator]() method:

const customIterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (let val of customIterable) {
  console.log(val);
}
// Output: 1 2 3

* (function*) creates a generator function which returns an iterator.


Practice Questions

Q1. What is an iterable in JavaScript and how is it different from an array?

Q2. List some built-in JavaScript objects that are iterable.

Q3. How can you use the for...of loop to loop through a string?

Q4. What happens if you try to use for...of on a non-iterable object like {}?

Q5. How does JavaScript determine whether an object is iterable?

Q6. How can you manually iterate over an iterable using its iterator?

Q7. Write a code snippet to loop through a Set using for...of.

Q8. What is the purpose of Symbol.iterator in an iterable object?

Q9. How can you create a custom iterable using a generator function?

Q10. Explain the difference between iterable objects and array-like objects.


JS Iterables Quiz

Q1: Which of the following is iterable?

A. { name: "John" }
B. "Hello"
C. 123
D. null

Q2: Which method must an object have to be iterable?

A. toString()
B. length()
C. [Symbol.iterator]()
D. getItems()

Q3: What does the for...of loop iterate over?

A. Object properties
B. Iterable values
C. Array indexes
D. Function arguments

Q4: Which of the following is NOT iterable by default?

A. Array
B. Set
C. Object ({})
D. String

Q5: What keyword is used to define a generator function?

A. function!
B. func
C. function*
D. generator()

Q6: What does the spread operator (...) require the object to be?

A. Array
B. Object
C. Iterable
D. Function

Q7: How do you loop through a Map using for...of?

A. for (item of map.entries())
B. for (item in map)
C. for (let [k,v] in map)
D. for (key in map)

Q8: Which statement about array-like objects is TRUE?

A. They have a Symbol.iterator method
B. They can be looped with for...of
C. They always have a length property
D. They are always arrays

Q9: What is the result of spreading a Set like this: [...new Set([1, 2, 2, 3])]?

A. [1, 2, 2, 3]
B. [1, 2, 3]
C. Set(3)
D. Error

Go Back Top