Learn how to use the for...of loop to iterate over arrays, strings, and other iterable values in JavaScript.

For...Of Loop

When you loop through an array with a for loop, you write something like this:

const fruits = ["apple", "mango", "banana"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

It works — but honestly, most of the time you don't care about the index i. You just want each item. The i < fruits.length and fruits[i] parts are just noise.

The for...of loop removes all of that. It gives you each value directly, one by one, without any index or counter.

const fruits = ["apple", "mango", "banana"];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// mango
// banana

Cleaner, shorter, and reads exactly like what it does — "for each fruit of fruits".

Syntax

for (const item of iterable) {
  // use item
}

item — a variable that holds the current value on each iteration
iterable — anything that can be looped over — arrays, strings, Maps, Sets

Use const for the loop variable when you are not reassigning it inside the loop — which is almost always.

How It Works

The loop goes through the iterable one value at a time. No index, no counter, no length check. Just values.

Looping Over Arrays

const scores = [88, 72, 95, 61, 84];
let total = 0;

for (const score of scores) {
  total += score;
}

console.log(`Total: ${total}`);   // Total: 400
console.log(`Average: ${total / scores.length}`); // Average: 80

Compare this to the same thing with a for loop:

// for loop version — more noise
for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}

// for...of version — just the values
for (const score of scores) {
  total += score;
}

When you don't need the index, for...of is always the cleaner choice.

Looping Over Strings

Strings are also iterable — for...of gives you each character one by one.

const name = "Ali";

for (const char of name) {
  console.log(char);
}
// A
// l
// i

A real use — counting vowels in a word:

const word = "javascript";
const vowels = ["a", "e", "i", "o", "u"];
let count = 0;

for (const char of word) {
  if (vowels.includes(char)) {
    count++;
  }
}

console.log(`Vowels in "${word}": ${count}`); // Vowels in "javascript": 3

Looping With Index — `entries()`

Sometimes you do need the index alongside the value. You can get both using .entries().

const fruits = ["apple", "mango", "banana"];

for (const [index, fruit] of fruits.entries()) {
  console.log(`${index + 1}. ${fruit}`);
}
// 1. apple
// 2. mango
// 3. banana

fruits.entries() gives you pairs of [index, value] — and you destructure them directly in the loop variable. Clean and readable.

Looping Over Objects — It Does Not Work Directly

This is an important gotcha. Regular objects { } are not iterable — for...of will throw an error.

const user = { name: "Ali", age: 22, city: "Lahore" };

// ❌ This throws: user is not iterable
for (const item of user) {
  console.log(item);
}

For objects, you have two options:

// Loop over keys
for (const key of Object.keys(user)) {
  console.log(key); // name, age, city
}

// Loop over values
for (const value of Object.values(user)) {
  console.log(value); // Ali, 22, Lahore
}

// Loop over both
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Ali
// age: 22
// city: Lahore

We will cover objects in full detail in the Objects section — but this pattern is worth knowing now.

There is also a for...in loop designed specifically for objects. We cover it in the next topic.

`for...of` vs `for` — When to Use Which

const names = ["Sara", "Ali", "Zara"];

// Use for...of — you only need values
for (const name of names) {
  console.log(name);
}

// Use for — you need the index for something
for (let i = 0; i < names.length; i++) {
  console.log(`${i + 1}. ${names[i]}`);
}

Situation	Use
You just need each value	`for...of`
You need the index	`for` or `for...of` with `.entries()`
You need to modify the array while looping	`for`
Looping over a string character by character	`for...of`
Looping over a Map or Set	`for...of`

A Real Example — Finding a Student

const students = [
  { name: "Ali", grade: "A" },
  { name: "Sara", grade: "B" },
  { name: "Zara", grade: "A" },
  { name: "Omar", grade: "C" },
];

for (const student of students) {
  if (student.grade === "A") {
    console.log(`${student.name} made the honor roll!`);
  }
}

// Ali made the honor roll!
// Zara made the honor roll!

for...of shines with arrays of objects — you get each object directly, access its properties naturally, and the code reads almost like plain English.

Summary

for...of gives you each value from an iterable directly — no index needed
Works on arrays, strings, Maps, Sets, and anything iterable
Use const for the loop variable unless you are reassigning it
Use .entries() when you need both the index and the value
Does not work directly on plain objects — use Object.keys(), Object.values(), or Object.entries() instead
When you only care about values, for...of is always cleaner than a regular for loop

For...Of Loop

On this page