JavaScript Each vs In [With Examples]

Introduction

In JavaScript, the forEach and for...in loops are two different ways of iterating over a collection of elements or the properties of an object.

In this article, we will discuss about both loop types and how to use them.

The forEach loop in JavaScript

The forEach loop is a method of the Array prototype in JavaScript, and it allows you to iterate over the elements of an array and perform a specific action on each element. The forEach loop takes a callback function as an argument, and this callback function will be executed for each element in the array.

Here is an example of how to use the forEach loop to iterate over an array of numbers and log each number to the console:

let myArray = [1, 2, 3, 4, 5];
myArray.forEach(function(value) {
    console.log(value);
});

Output

1
2
3
4
5

In this example, the forEach loop is used to iterate over the myArray array, and the code inside the callback function will be executed for each element in the array. The “value” argument passed to the callback function represents the value of the current element being iterated over.

The for...in loop in JavaScript

On the other hand, the for...in loop is a standard JavaScript loop that allows you to iterate over the properties of an object and perform a specific action on each property. The for...in loop takes a variable as an argument, and this variable will be assigned the name of each property in the object as the loop iterates over the properties.

Here is an example of how to use the for...in loop to iterate over the properties of an object and log each property and its value to the console:

let myObject = {
    name: "John Doe",
    age: 30,
    occupation: "Developer",
};

for (var property in myObject) {
    console.log(property + ": " + myObject[property]);
}

Output

name: John Doe
age: 30
occupation: Developer

In this example, the for...in loop is used to iterate over the properties of the myObject object, and the code inside the loop will be executed for each property in the object. The “property” variable passed to the loop represents the name of the current property being iterated over.

Summary

forEach and for...in loops are two different ways of iterating over a collection of elements or the properties of an object in JavaScript. The forEach loop is a method of the Array prototype that allows you to iterate over the elements of an array, while the for...in loop is a standard JavaScript loop that allows you to iterate over the properties of an object.

References

Array.prototype.forEach() - JavaScript | MDN (mozilla.org)
for…in - JavaScript | MDN (mozilla.org)