JavaScript: ForEach and For…In - The difference

JavaScript: ForEach and For…In - The difference

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.

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.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Nodejs Developer

Looking to **hire NodeJS Developer**[https://www.dataeximit.com/node-js-development/](https://www.dataeximit.com/node-js-development/ "https://www.dataeximit.com/node-js-development/") to build a perfect back-end to your website or...

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers. Learn Functional Programming and how it enables developers to move from imperative to declarative programming. Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes. Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.