• Hajipur, Bihar, 844101

☰
❮
❯

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 Loop For Of

← Previous Next →

📘 JavaScript for...of Loop – The Modern Way to Iterate

The for...of loop lets you iterate over iterable objects like:

  • Arrays

  • Strings

  • Sets

  • Maps

  • NodeLists (in browsers)

It gives direct access to the value in each iteration, rather than the index or key.

🔹 Syntax

for (let variable of iterable) {
  // code block to be executed
}

  • variable — A new variable representing the current value in the loop.

  • iterable — A data structure that you want to loop over (like an array or string).

🔹 Example 1 – Iterating Over an Array

let colors = ["red", "green", "blue"];

for (let color of colors) {
  console.log(color);
}
// Output: red green blue

🔹 Example 2 – Iterating Over a String

let word = "Hello";

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

🔹 Example 3 – Iterating Over a Set

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

for (let num of numbers) {
  console.log(num);
}

🔹 Example 4 – Iterating Over Map Values

let userMap = new Map([
  ["name", "Alice"],
  ["age", 30],
]);

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

🔹 Key Difference: for...of vs for...in

Feature for...in for...of
Loops over Object keys Iterable values
Use with Objects Arrays, strings, sets, maps
Returns Key/index Actual value
Suitable for Objects Arrays and other iterables

Practice Questions

Q1. How do you loop through all elements of an array using for...of?

Q2. What is the output of a for...of loop on the string "hello"?

Q3. How can you use for...of to iterate over a Set object in JavaScript?

Q4. How do you use destructuring with for...of when looping through a Map?

Q5. What happens when you use for...of on an object that is not iterable?

Q6. How is for...of different from for...in in terms of return value?

Q7. Can you use for...of to loop through the characters of a string?

Q8. How do you skip an iteration inside a for...of loop?

Q9. Write a for...of loop that prints the squares of numbers in an array.

Q10. How do you iterate through values of a NodeList using for...of in the browser?

JS Loop For Of Quiz

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

A. Object keys
B. Object values
C. Iterable values
D. Indexes

Q2: Which loop is best suited for looping through an array?

A. for...in
B. while
C. for...of
D. do...while

Q3: Which of the following is NOT iterable?

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

Q4: What is the result of looping over a Set using for...of?

A. Duplicates values
B. Only keys
C. Unique values
D. Errors

Q5: What error occurs if you use for...of on a non-iterable object?

A. SyntaxError
B. ReferenceError
C. TypeError
D. No error

Q6: Which one correctly loops through a Map's entries using for...of?

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

Q7: Can you use continue inside a for...of loop?

A. No
B. Only in strict mode
C. Yes
D. Only with arrays
← Previous Next →
Login
Go Back Top