map(), filter() and reduce() in JavaScript

Their handy syntax and how to use them!

Demo of map(), filter() and reduce() methods in JavaScript

JavaScript has a lot of kinds of methods when it comes to the operations performed on Arrays. Over time, many redundant and repeated operations are made easy through the construction of built-in methods that are built into the language’s body. Well, ECMAScript (JavaScript standard) has it all done so well: from strings to arrays, and objects, it got a bunch!

The ECMAScript 6 (Release year: 2015) had really got a great pick of several new methods and styles, which include Arrow functions.

One of the very prominent sets of methods is the pack of these 3:

• map()
• filter()
• reduce()

> map()

Photo by Annie Spratt on Unsplash

map() is an Array prototype method that creates a new array that is filled with the return of a function on every element in the array on which it is called upon!

The map() makes it easy to map over the elements of the array and returns a new array after performing the code in the callback function for each element.
This is the difference from the similarly working forEach() method which returns undefined after iterating through the array elements (and running the code for each element).

The callback function in the map(callback) takes the following parameters:

• Current Value: which is the current value of the array in the current iteration.
• Current Index: (optional) which is the index value of the Current Value.
• Source Array: (optional) is the array on which the map() is called.

map() takes another parameter:

• thisArg: value to be used as this, when executing the callback.

*Syntax for map():

let newArray = arr.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after…