jsschools
JavaScript for..of

The Modern Way to Iterate

JavaScript for..of

`for..of` walks through the **values** of any iterable — arrays, strings, sets, maps, and more.

4 min read Level 1/5 #for-of#loops#iteration
What you'll learn
  • Iterate arrays, strings, sets, and maps with `for..of`
  • Use `entries()` for both index and value
  • Choose between `for..of` and `forEach`

for..of iterates the values of any iterable. The shape:

for (const item of iterable) {
  // ...
}
Iterate an array script.js 
const fruits = ["apple", "banana", "grape"];

for (const fruit of fruits) {
  console.log(fruit);
}
// "apple"
// "banana"
// "grape"
▶ Preview: console

Strings Are Iterable

Iterate a string script.js 
const word = "hi!";

for (const char of word) {
  console.log(char);
}
// "h"
// "i"
// "!"
▶ Preview: console

Sets and Maps

Both are iterable out of the box.

Iterate a Set script.js 
const uniqueColors = new Set(["red", "green", "blue"]);

for (const color of uniqueColors) {
  console.log(color);
}
▶ Preview: console
Iterate a Map script.js 
const ages = new Map([
  ["Ada", 36],
  ["Lin", 28],
]);

for (const [name, age] of ages) {
  console.log(`${name} is ${age}`);
}
// "Ada is 36"
// "Lin is 28"
▶ Preview: console

Notice the destructuring: each iteration of a Map yields a [key, value] pair.

Index AND Value: entries()

When you need the index too, use .entries() on the array:

Index + value with entries() script.js 
const fruits = ["apple", "banana", "grape"];

for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}
// "0: apple"
// "1: banana"
// "2: grape"
▶ Preview: console

for..of vs forEach

Both run code for each item. The difference: you CAN use break and continue inside a for..of loop. Inside forEach, you can’t.

break in for..of script.js 
const numbers = [1, 2, 3, 4, 5];

for (const n of numbers) {
  if (n > 3) break;
  console.log(n);
}
// 1, 2, 3
▶ Preview: console

If you might need to stop early, choose for..of.

What for..of DOES NOT Do

for..of doesn’t work on plain objects — they’re not iterable by default.

Plain objects need entries() script.js 
const user = { name: "Ada", age: 36 };

// for (const x of user) { … } // TypeError: user is not iterable

// Iterate keys/values/pairs with Object.* helpers:
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// "name: Ada"
// "age: 36"
▶ Preview: console

Try It Yourself

Exercise

Count the vowels

Difficulty 2/5~3 min
Given `const sentence = "JavaScript is great"`, use a `for..of` loop to count how many **vowels** (`a`, `e`, `i`, `o`, `u`, case-insensitive) the sentence contains. Store the result in `vowels` and log it. Expected: `6`.
solution.js
const sentence = "JavaScript is great";
let vowels = 0;
// your code here
2tests will run
💡 Show hint
Lowercase the sentence first. Then for each character, check whether `"aeiou".includes(char)`.
✅ Show solution
const sentence = "JavaScript is great";
let vowels = 0;
for (const char of sentence.toLowerCase()) {
  if ("aeiou".includes(char)) {
    vowels++;
  }
}
console.log(vowels);

Up Next

for..in looks similar but does something different — it iterates property NAMES.

JavaScript for..in →