JavaScript: ForEach and For…In - The difference

JavaScript — The difference between ForEach, and For…In. Learn what ForEach and For…In do in JavaScript

This is going to be a quick introduction to foreach, and for...in in JavaScript. This article was written to introduce you to new methods that you can you can use instead of always using for loops.

The For Loop

Here’s a quick ‘n simple refresher on the for loop:

You’ve probably used a for loop before. It’s the most basic of loops in JavaScript and is quite versatile. Here’s the basic for loop syntax:

for (i = 0; i < 10; i++) { 
  // do something
}

Our for loop consists of three statements, one that is executed before our loop starts ( i = 0 ), one that defines how long our loop should run ( i < 10 ), and one that is executed after each loop ( i++ ).

In this example, we are setting i = 0 before our loop starts. We will continue to loop as long as i < 10, and each iteration of the loop will increase i by one. Finally, within our brackets is the code that will be run on each iteration of the loop.

ForEach

forEach is an Array method that we can use to execute a function on each element in an array. It can only be used on Arrays, Maps, and Sets.

A simple example would be to console.log each element of an array. Here’s what this might look like with a for loop:

const arr = ['cat', 'dog', 'fish'];

for (i = 0; i < arr.length; i++) { 
  console.log(arr[i])
}

// cat
// dog
// fish

Great. It works. Here’s how we accomplish the same thing with the forEach() method:

const arr = ['cat', 'dog', 'fish'];

arr.forEach(element => {
  console.log(element);
});

// cat
// dog
// fish

When using forEach, we simply have to specify a callback function. This callback will be executed on each element in the array.

For…In

Here’s what the for...in syntax looks like:

for (variable in object) {  
  // do something
}

for...in is used to iterate over the enumerable properties of objects. Every property in an object will have an Enumerable value — if that value is set to true, then the property is Enumerable.

Remember, when you create an Object it will inherit certain methods from its prototype. For example, the Object.keys() method. These are non-enumerable. Any properties you add to an object will for the most part be enumerable. Lets look at an example to help with the understanding. In the example below we’ll log out each enumerable value in the object:

const obj = {  
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

for (let elem in obj) {  
  console.log( obj[elem] )
}

// 1
// 2
// 3
// 4

Better yet, we can log out both the key and value pair:

for (let elem in obj) {
  console.log(`${elem} = ${obj[elem]}`);
}

// a = 1
// b = 2
// c = 3
// d = 4

Don’t forget, arrays are objects too — which means we can also use the for...in loop on Arrays:

const arr = ['cat', 'dog', 'fish'];

for (let i in arr) {  
  console.log(arr[i])
}

// cat
// dog
// fish

And since each character in a string has an index, we can even use for...in on strings. Check this out:

const string = 'hello';

for (let character in string) {  
    console.log(string[character])
}

// h
// e
// l
// l
// o

Note: The for...in loop executes in an arbitrary order and should not be relied upon if you need to loop in a specific order.

Notes:

Thanks for reading, and hopefully this was helpful!. If you like this tutorial please share it with others.

#JavaScript #Nodejs #Programming #Development