JavaScript for…of vs for…in Loops (A Complete Guide)

By /
for in vs for of syntax

In JavaScript, the difference between for…of loop and a for…in loop is that:

  • A for…of loop works for arrays (and similar iterables) and loops through the values.
  • A for…in loop works for objects and it loops through the object’s keys.

This guide teaches you what are the for…of and for…in loops in JavaScript. Besides, you will learn what’s the main difference via practical examples. Even though the above answer gives you a good hint about the distinction, there are useful and illustrative examples you should check to support your understanding.

Let’s jump into it.

What Is the for…of Loop in JavaScript?

In JavaScript, the for...of loop is used to iterate over the elements of an iterable object, such as an array. This variation of for loop gives you access to the iterable object’s values.

Here is an example of how to use the for...of loop to print the numbers of an array:

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

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

Let’s take a closer look at the parts of the above loop.

The loop begins with the for keyword, followed by the keyword of and the name of the iterable object (in this case, array).

  • Inside the parentheses, you a variable (in this case, value) that will be used to store the current value of the array being iterated over.
  • In each loop iteration, the value variable will be updated to the next value in the array.
  • Inside the loop, we have a block of code that will be executed for each element of the array. In this case, the code simply prints the current value of the value variable to the console using the console.log() method.

When the code is run, the for...of loop will iterate over the array elements and print each value to the console.

This results in an output like this:

1
2
3
4
5

This is how the for...of loop works in JavaScript. It is a convenient way to iterate over the elements of an array or other iterable object and perform an action for each element.

What Is the for…in Loop in JavaScript?

In JavaScript, the for...in loop is used to loop over the properties of an object. It offers a way to access the keys of a JavaScript object one by one.

Here is an example:

const person = {
  name: 'John Doe',
  age: 30,
  job: 'developer'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

In this example, the for...in loop will iterate over each property in the person object. On each iteration, the loop prints the property name and its corresponding value to the console.

In the above case, the output looks like this:

name: John Doe
age: 30
job: developer

It’s important to note that the for...in loop loops the properties in an arbitrary order, so the properties may not be printed in the same order that they were defined.

Also, the for...in loop will only loop over the enumerable properties of an object. It will not include properties that have been assigned a Symbol as the property key.

for…of vs for…in in JavaScript

In JavaScript, the for...in loop is used to iterate over the enumerable properties of an object, while the for...of loop is used to iterate over the values of an iterable object.

Let’s do a side-by-side comparison.

For example, let’s loop through the keys of a JavaScript object using for…in loop:

// Using the for...in loop to iterate over the properties of an object
const obj1 = { a: 1, b: 2, c: 3 };

for (const prop in obj1) {
  console.log(prop);
}

// Output:
// a
// b
// c

And let’s use a for…of loop to iterate over the array elements:

// Using the for...of loop to iterate over the values of an iterable object
const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value);
}
// Output:
// 1
// 2
// 3

Now, here’s what happens if you iterate array elements with a for…in loop:

// Trying to use for...in loop to iterate over the values of an iterable object
const arr = ["Alice", "Bob", "Charlie"];

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

// Output:
// 0
// 1
// 2

The output is 0,1,2 and there’s no sign of the names listed in the array.

This is because behind the scenes, a JavaScript array is just an object where each element is associated with a key (the index of the element).

Similar to the for…in loop on a JavaScript object, when called on an array, the for…in loop grabs these “invisible” keys (indexes) instead of the array values. This is why you should not use a for…in loop to iterate over arrays. It simply doesn’t work the way you’d expect.

Thanks for reading. Happy coding!

Scroll to Top