In the ancient times, there was this messiah called for loop. Just like every other programming languages, JavaScript too had it’s own for loop function.
The Ancient One
The loop’s job was to iterate over data. As you know the internet is all about a series of data. You have a list of posts or comments that needed to be displayed in an order.
The chosen one looked like this:
for (var i = 0; i < 10; i++) {
// Do something..
}
During the primitive times it was enough to do all sort of data operations.
But as things got complicated, foolish people wanted to do more..
What if you want to take a list of items and output only a select number of values that meet your condition?
What if you wanted to produce an entire new list without touching the original list?
What if you want to store the results of the given data into a unified collection?
For all these things, the for loop had to make use of lots of if/else statements and special inner functions.
But as mankind got busier with their pleasure they started to stop believing the true potential of the chosen one.
The ancient one was quick to realize it and was in need of assistance to continue its legacy..
The gods listened and in the old 2009 AD, the divine gods of JavaScript made many new functions.
Among many, the ancient one hand picked 4 new methods to fulfill its prophecy. They are now the,
Four Horsemen of JavaScript Data Manipulation
The Ancient Four Horsemen
forEach()
forEach is an overpowered version of it’s master for loop.
You start with an array let fruits = [“Apple”, “Banana”, “Mango”]
Then forEach will execute a function for each item of the list.
fruits.forEach(fruit => console.log(“I am eating”, fruit));
->
I am eating Apple
I am eating Banana
I am eating Mango
map()
map is a super powerful function, and perhaps the most popular horsemen of them all.
It will take an array, manipulate the items and create a new array keeping the original array untouched.
fruits.map(fruit => fruit + " is good")
->
["Apple is good", "Banana is good", "Mango is good"]
filter()
filter has the skills of map with the power of an if statement.
It can filter out the items of your input array. After the operation, it will create a new filtered array.
Here I check to filter out only the “Apple”:
fruits.filter(fruit => fruit == "Apple")
->
["Apple"]
And here I filter only the fruits that has a length of less than 6 chars:
fruits.filter(fruit => fruit.length < 6)
->
["Apple", "Mango"]
reduce()
reduce is the most powerful horsemen of the ancient one. It can be used to filter out and or combine all the items into a final single output.
Here I am making a fruit salad with all the fruits:
fruits.reduce((bowl, fruit) => bowl + ", " + fruit);
->
"Apple, Banana, Mango"
Mortals be aware, bow down to your god, the ancient for loop and its loyal followers the Four Horsemen.
The Modern Four Horsemen
Master the use of forEach(), map(), filter(), and reduce() to make your programming lives easier.
If you enjoyed reading this post, be sure to CLAP and follow my blog for more JavaScript tips.