Suggest an edit

Improve this article

Refine the answer for “The for of loop”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What `for...of` does

The `for...of` loop is used to **iterate over the elements of collections**, such as:

- arrays (`Array`)
- strings (`String`)
- `Map` and `Set` objects
- other **iterable objects**

It **iterates over the values** of the collection (not the indexes, like `for` does).

---

### Example with an array

```javascript
const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
```

**Result:**

```javascript
apple
banana
cherry
```

Here, on each iteration `fruit` is **the array element itself**, not its index.

---

### Example with a string

```javascript
for (const char of "Hi!") {
  console.log(char);
}
```

**Result:**

```javascript
H
i
!
```

---

## How it differs from a regular `for`

| Comparison | `for` | `for...of` |
|---|---|---|
| **What it iterates over** | Indexes (numbers) | Element values |
| **Good for** | arrays with indexes, when you need a counter | arrays, strings, Set, Map, any iterable structures |
| **Access to the index** | Available via the counter (`i`) | Not directly (but can be counted separately if needed) |
| **How concise it is** | More "noisy" | More readable and shorter |
| **Works with objects** | No (only with array-like structures) | No (you need `for...in` or `Object.keys`) |

---

### Comparison example

#### A regular `for`:

```javascript
const numbers = [10, 20, 30];

for (let i = 0; i < numbers.length; i++) {
  console.log(i, numbers[i]); // i is the index, numbers[i] is the value
}
```

#### `for...of`:

```javascript
for (const num of numbers) {
  console.log(num); // only the values
}
```

---

### Important not to confuse:

- `for...of` iterates over **values**
- `for...in` iterates over an object's **keys (property names)**

An example of the difference:

```javascript
const user = { name: 'Oleh', age: 25 };

for (const key in user) {
  console.log(key); // name, age
}

// for (const value of user) { } Error: the object is not iterable!
```

---

### When to use each

- Use `for...of` when you just need to walk through the values of an array, string, Set, or Map.
- Use a regular `for` when you need **indexes**, **control over the step**, or an **exit condition**.
- Use `for...in` when you are iterating over an **object's keys**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts382 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.