• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

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

← Previous Next →

📘 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.

← Previous Next →

JavaScript

online coding class codepractice

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

codepractice logo
Login
Go Back Top