Stop using the traditional “for-loop” and start using forEach(). Although for-loop does have its perks, but forEach() is what’s in and since I’m a person who likes to follow the latest trends, I lean more towards forEach() rather the for loop. So, how does forEach() method work in JavaScript … let’s see some examples:
Let say you have a list of items which you want to loop through individually. Let’s see the traditional for loop method first:
let age = [34, 55, 24, 60, 13, 44]
for( let x = 0; x < age.length ; x++){
console.log( age[x] );
}
// OUTPUT = 34
// 55
// 24
// 60
// 13
// 44
Now let’s have a look at forEach() loop in javascript.
let age = [34, 55, 24, 60, 13, 44]
age.forEach( (item)=> {
console.log(item);
});
// OUTPUT = 34
// 55
// 24
// 60
// 13
// 44
In line 3, individual element of the list gets passed into the variable ‘item’ which is then printed on the console.
You could also loop though 2 different lists and have them interact, so as to have a nested loop like so:
let age = [34, 55, 24, 60, 13, 44]
let age2 = [33, 44, 55, 66, 77]
age.forEach( (i)=> {
age2.forEach( (j)=> {
if(i == j) { console.log(i); }
});
});
// OUTPUT = 55
// 44
In the above example, the values of the second array “age2” is matched with the values of the 1st array. And if they match, then that value is being printed on the console. Simple right!
Although we could use includes() method for the example above, but we’re focusing on forEach() method in this article, so I won’t go into that.
Alright so that’s the essence of what forEach() in javascript can do. There is 1 more thing that it does. It’s that it tracks the index of the element of the list too. Here let me show you:
let age = [34, 55, 24, 60, 13, 44]
age.forEach( (item, index)=> {
console.log( “At index: ” + index + “, the age is: ” + item );
});
// OUTPUT = "At index: 0, the age is: 34"
//"At index: 1, the age is: 55"
//"At index: 2, the age is: 24"
//"At index: 3, the age is: 60"
//"At index: 4, the age is: 13"
//"At index: 5, the age is: 44"
And that’s a wrap!
Hopefully I’ve managed to help you understand how exactly forEach() in JavaScript works, and of course, it also works exactly the same for TypeScript as well. Please like and share if this helped you. Have a great one.
