Suggest an edit

Improve this article

Refine the answer for “The for in 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)

## `for...in`: iterates over the **keys (property names)** of an object or an array's indexes

This loop goes **over the enumerable properties** of an object (or an array's indexes, if it is an array).

### Example with an object:

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

for (const key in user) {
  console.log(key, user[key]);
}
```

**Result:**

```javascript
name Oleh
age 25
city Kyiv
```

Here `key` is a string (`"name"`, `"age"`, `"city"`): the **property name**.

---

### With arrays, `for...in` gives you **indexes**, not values:

```javascript
const arr = ['a', 'b', 'c'];

for (const i in arr) {
  console.log(i); // 0, 1, 2
  console.log(arr[i]); // 'a', 'b', 'c'
}
```

But `for...in` **is not recommended** for arrays,
because it can pick up **extra properties** of the array, if any were added manually.

---

## `for...of`: iterates over the **values** of iterable structures

It works with **iterable objects**:
`Array`, `String`, `Map`, `Set`, `NodeList`, `arguments`, and so on.

### Example:

```javascript
const arr = ['a', 'b', 'c'];

for (const value of arr) {
  console.log(value);
}
```

**Result:**

```javascript
a
b
c
```

Here `value` is **the value**, not the index.

---

## Comparing `for...in` and `for...of`

| Feature | `for...in` | `for...of` |
|---|---|---|
| **What it iterates over** | Keys (property names or indexes) | Values |
| **Works with objects (**`{}`**)** | Yes | No (an error) |
| **Works with arrays (**`[]`**)** | Yes, but not recommended | Yes |
| **Works with strings (**`"abc"`**)** | Yes (indexes) | Yes (characters) |
| **Works with Map, Set** | No | Yes |
| **Returned value** | The key (a string) | The element itself |
| **Type of data used** | Enumerable properties | Iterable values |

---

### Examples of the difference

#### An object:

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

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

// for (const value of user) Error
```

#### An array:

```javascript
const arr = ['a', 'b', 'c'];

// for...in -> indexes
for (const i in arr) {
  console.log(i); // 0, 1, 2
}

// for...of -> values
for (const val of arr) {
  console.log(val); // a, b, c
}
```

#### A string:

```javascript
for (const i in "Hi") {
  console.log(i); // 0, 1
}

for (const ch of "Hi") {
  console.log(ch); // H, i
}
```

---

## The short way to remember it:

> `for...in`: iterates over **keys**
> `for...of`: iterates over **values**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.