LuisLlamas Logo
bucles-for-in-for-of-en-javascript

for...in and for...of Loops in JavaScript

  • 3 min
  • Intermediate

The for…in and for…of loops are two loops specifically designed for iterating through objects and collections of data.

Although their syntax is quite similar, each has its own purpose and characteristics (in fact, they have quite a few differences).

  • for…in iterates over the keys.
  • for…of iterates over the values.

The for...in Loop

The for...in loop is used to iterate over the enumerable properties of an object. The syntax is as follows:

for (const key in object) {
    // Code block
}
Copied!
  • key: A variable representing the key of each property of the object in each iteration.
  • object: The object whose properties will be iterated over.

Let’s see an example:

const person = {
    name: 'Luis',
    age: 30
};

// `for...in` loops through the keys of the object
for (const key in person) {
    console.log(`Key: ${key}, Value: ${person[key]}`);
}

// Key: name, Value: Luis
// Key: age, Value: 30
Copied!
  • Iterates over enumerable properties: for...in iterates over the enumerable properties of the object (including properties inherited from the prototype chain).
  • Iteration order: The order in which properties are iterated is not guaranteed.

The for...of Loop

The for...of loop is used to iterate over the values of iterable objects (such as arrays, strings, maps, sets) and other types of collections. The syntax is as follows:

for (const value of iterable) {
    // Code block
}
Copied!
  • value: A variable representing the value of each element in the iterable object in each iteration.
  • iterable: The iterable object whose values will be iterated over.

For example, here’s how it works with an array:

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
    console.log(number);
}
// Output:
// 1
// 2
// 3
// 4
// 5
Copied!
  • Iteration over values: Iterates over the values of an iterable object.
  • Iteration order: Iterates in the natural order of the elements in the iterable.
  • Not iterable: It cannot be used directly with non-iterable objects (like normal literal objects).

Comparison between for…in and for…of

To understand the difference between for...in and for...of, let’s look at an example:

const colors = ['red', 'green', 'blue'];

// `for...in` will iterate over the keys
for (const index in colors) {
    console.log(index);  // 0, 1, 2
}

// `for...of` will iterate over the values
for (const color of colors) {
    console.log(color);  // red, green, blue
}
Copied!

In this example:

  • for...in iterates over the keys (in this case, the indices, giving 0, 1, and 2).
  • for...of iterates over the values directly (and returns red, green, blue).

This is because an Array in JavaScript is an object, where the key is the index of the Array.

  • Use for...in with objects: For literal objects and when you need to iterate over keys and their values.
  • Use for...of with arrays and other iterables: Preferred for iterating over arrays, strings, and other iterable objects.

On this page