For…of loop vs for…in loop JavaScript

In JavaScript, the for...of loop and the for...in loop are both used to iterate over collections or iterable objects, but they have different purposes and behaviors.

for in loops over enumerable property names of an object.

for of (new in ES6) does use an object-specific iterator and loops over the values generated by that.

The for...of loop is used to iterate over values in an iterable object such as arrays, strings, maps, sets, etc. It provides an easy and concise way to loop through elements without worrying about accessing indices or keys.

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

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

The for...in loop, on the other hand, is used to iterate over the keys or indices of an object. It is not designed to work with iterable objects directly but is primarily used with plain objects and arrays (although not recommended for arrays).

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  console.log(key + ": " + object[key]);
}

It’s important to note that the for...in loop can also iterate over inherited properties from the prototype chain. To avoid this behavior, you can use hasOwnProperty() method to filter out only the object’s own properties:

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(key + ": " + object[key]);
  }
}

Here’s comparing the for...of loop and the for...in loop in JavaScript:

For…of loop vs for…in loop JavaScript example

Simple example code demonstrates the use of both the for...of loop and the for...in loop in JavaScript:

const iterable = [1, 2, 3, 4];
const object = { a: 1, b: 2, c: 3 };

// for...of loop
console.log("Iterating over iterable:");
for (const element of iterable) {
  console.log(element);
}

// for...in loop
console.log("Iterating over object:");
for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(key + ": " + object[key]);
  }
}

Output:

In this example, the for...of loop is used to iterate over the iterable array and log each element’s value. Then, the for...in loop is used to iterate over the keys of the object and log both the key and the corresponding value.

Comment if you have any doubts or suggestions on this Js loop topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version