forEach vs for-of vs for-in : Tug of for
Ladies & Gentlemen, Welcome to Tug of for. Introducing first, standing to my left, weighing in at 82 kgs, from Array family, forEach {loud claps….}. Next up, standing to my right, weighing in at 73 kgs, the latest superstar, for-of {fanboys melt into delirium…}. Last, but not the least, standing in front of me, weighing at 50kgs, from the Object family.. for-in {Object enthusiasts in cry mode}.
For this read, we have three competitors who continue to rule the world of Javascript. Yet some of us, are left confused by their intent and where are they used at! Phewwww.. it took me some time to muster the concepts and here I am, just presenting a little article, which I hope may clear out doubts on the aforementioned SUPERGIANTS.
Peeeeeeep…Peeeeeeep…Here We Go!
forEach exclusively belong to the royal family of Arrays. The forEach method was introduced with lineage to the prototypal inheritance of Array object! Needless to say, the forEach clause works only with those data structure which are Arrays. The method basically iterates over the elements of the array and executes a callback function [basically some executable function/ fun activity].
const arr = [1,2,3,4];arr.forEach(function(element){
console.log(element);
});
The above mentioned snippet just iterates through the simple array arr and logs out the individual values to the console.. So majestic!
Basically it takes each element individually and performs some action.. [yahoooo!]
const arr = ["Mr. Dog", "Miss. Elephant", "Mrs. Hen"]arr.forEach(function(item){
console.log(arr.concat("Wrestle"))
});
The next contender to grace the tug of for is the mighty for-in. The for-in loop actually is applicable over all those which have some enumerable properties [Enumerable properties are those properties whose internal [[Enumerable]] flag is set to true, which is the default for properties created via simple assignment or via a property initializer ]. In normal usage, the for-in loop is basically used to carve out the properties of an object. Let us understand with an example:
const me_obj= {
name:"Doomed1993",
activity:"Sleeping"
}var arr=[1,2,3,4]for(property in obj){
console.log(property);
}for(property in arr){
console.log(property);
}
As you guys can notice, the for-in loop is being applied on two objects, namely me_obj and the other is an Array object, arr. For, both, it prints the property relevant to that particular object. For, the array arr, it prints the relevant indexes, as internally the array is stored in the form of a key-value pair. [the keys start from 0]
Last to step into the ring, to a thunderous bang of claps, is the majestic for-of loop. The for-of loop is adequately new to the JS world and packs in super-powers! Voilaaaaaaa! The for-of loop creates a loop iterating over iterable member objects. The list is an extensive one such as
- Array
- Map
- Set
- String
- TypedArray
You need to know that this bad-ass boy emerged with the birth of ES6 in 2015. So, it offers plenty of flexibility in usage. Example is on your way!
let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);for (let entry of iterable) {
console.log(entry);
}for (let [key, value] of iterable) {
console.log(value);
console.log(key);
}
As expected, the bad boy did what it needed to do! It iterated over the elements and printed out the good stuff!
Quite Handy, Right!
Remember, the difference between for-in and for-of lies in the data structure they iterate over. for-in iterates over enumerable objects whereas for-of iterates over iterable objects”
These were the basic differences between the for’s which rule the JS ring all day around. Like the article, if it made a little sense and till later, keep rocking n rolling!
