Shoeb Malik's Blog

Map(),Filter() and Reduce() in javascript

Shoeb Malik's photo
Shoeb Malik
·

4 min read

Hello everyone,

Are you someone who is struggling to understand about map(), filter() and reduce()? If yes, then you are at right place. In this article I am going to talk about map(),filter() and reduce().

let's begin,

map(), filter() and reduce() are parts of modern javascript. They were introduced with the release of ES6 in javascript. Traditionally we had for loop, for of and forEach to modify and array. The traditional methods to modify an array were a bit complicated but with the release of map filter and reduce the modification became simple and starightforward.

Let's explore map, filter and reduce in depth,

Map

map method is used to create a new array from the existing array with some functionality. It takes an callback function. I'll show you with example , but first let's get familiar with the syntax.

Syntax

    const newArr = arr.map((element,index,array)=>{
          //operation to be performed
})

map takes a callback function and it takes three parameters as you can see in the above syntax. Out of which element is required, while index and array are optional. If you want to explore more about callback function click here.

now let's see the working of map with an example,

Example

    const arr = [1,2,3,4,5]
    const newArr = arr.map(element=>element*2) // here we are doubling the every element of arr
console.log(newArr) //output : [2,4,6,8,10]

As you can see from the example that we used map to double an array, basically what happens is that the map method iterates on every element of array and returns a new array.

Filter

As the name suggests the filter method is used to filter elements from an array with conditional statements, If the condition is satisfied, the elements get pushed into new array and if the condition is not satisfied the elements does not get pushed into new array. we will understand it with an example but let's see the syntax of filter method which is similar to map method

Syntax

const newArr = arr.filter((element,index,array)=>{
      //condition statements
})

As u can see from the above code that the syntax is similar to map. filter takes a callback function and it takes three parameters as you can see in the above syntax. Out of which element is required, while index and array are optional.

Example

const arr = [1,2,3,4,5]
const newArr = arr.filter(element=>element<3) // here we want to filter all the elements which are below 3
console.log(newArr) // output : [1,2]

From the above code we can see that we filtered the elements which are less then 3 and we are getting the output in array. From this we can conclude that filter method returns only those elements of array which satisfies the given condition statement.

Reduce

reduce is a bit complicated then map and filter, Basically what it does is it reduces the elements of array to on single element. It takes two arguments callback function and initial value. Let's take a look at the syntax,

Syntax

const newArr = arr.reduce(callback, initialValue)

The callback function will iterate on every element in an array. the callback function itself takes four arguments but often only first two arguments are used.

  • accumulator - the returned value from the previous iteration.

  • currentValue - the current element of an array.

  • index - the index of current element.

  • array - the original array on which the reduce was called.

The initialValue is optional, if provided it becomes the accumulator during first iteration and if not provided than the accumulator takes the first element of array as the intiialValue during the first iteration.

Example

const arr = [1,2,3,4,5]
const newArr = arr.reduce((accumulator, currentValue)=> accumulator + currentValue,0) // here we are adding all elements in array to get a single element.
console.log(newArr) // output : 15

The above code uses reduce method to add all the elements in array to return a single element.

That's a wrap, I hope I explained the above methods very well, But if you think I missed anything feel free to comment below.

JavaScriptES6