JavaScript — The difference between ForEach, and For…In
Learn what ForEach and For…In do in JavaScript
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.
