Skip to content

For…of loop vs for…in loop JavaScript

  • by

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 loopfor...in loop
Used to iterate over values in iterable objects (arrays, strings, maps, sets, etc.)Used to iterate over keys or indices in objects
Provides a concise way to loop through elements without worrying about indices or keysPrimarily used with plain objects and arrays (although not recommended for arrays)
Does not iterate over inherited properties from the prototype chainCan iterate over inherited properties from the prototype chain
Syntax: for (const element of iterable) { ... }Syntax: for (const key in object) { ... }

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:

For…of loop vs for…in loop JavaScript

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

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading