JavaScript — The difference between ForEach, and For…In

Learn what ForEach and For…In do in JavaScript

Brandon Morelli
codeburst
Published in
3 min readNov 26, 2017

Udemy Black Friday Sale — Thousands of Web Development & Software Development courses are on sale for only $10 for a limited time! Full details and course recommendations can be found here.

Hey everyone! 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.

English please.

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.

Closing Notes:

Thanks for reading, and hopefully this was helpful!

If you’re ready to finally learn Web Development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Brandon Morelli

Creator of @codeburstio — Frequently posting web development tutorials & articles. Follow me on Twitter too: @BrandonMorelli

Responses (16)

Write a response