Understanding the .map(), .filter() and .reduce() array methods in Javascript.

Samuel Jarvis — Tue, 02 Aug 2022 13:53:00 +0000

Arrays are one of the most used data structures in Javascript, from storing basic data in our code to getting results from API calls. As Javascript developers were always working with arrays and carrying out some form of operation on them.

The .map(), .reduce() and .filter() are some of the lesser-known array methods released in ES6, that uses a more functional and cleaner approach to carry out array operations.

In this article, we’ll be taking a detailed look at how these array methods work and how we can use them to carry out some basic operations.

Overview

First a brief look at what these array methods do.

The .map() method returns a new array where each element have gone through an operation of some kind.

The .filter() method returns a new array containing only array elements that passed a specific condition.

The .reduce() method reduces all the elements in the original to a single value.

These array methods are Higher Order Functions, meaning they take callback functions as parameters.

The .map() method

The .map() method returns a new array that contains the result of applying an operation on each of the original array elements.

The .map method accepts a callback function as a parameter and an important parameter for the callback function is the element parameter, the element parameter is processed by the callback function and returned an element to the new array.

Syntax for the .map() method

Array.map(function (element) {
    //operation on element
})

//using arrow function
Array.map(element => {
    //operation on element
})

Using the .map() method

let numbers = [24, 11, 8, 13]

const double = numbers.map(number=> score * 2)
console.log(double) 
// outputs [ 48, 22, 16, 26 ]

When we run the code above. The .map() function loops through the numbers array, assigns the current element in iteration as number, carries out the operation number * 2, and then finally inserts this new value to the new array.

Note that the .map() method will always return an array of the same length as the original array.

For the rest of this tutorial, we'll be working with an array of objects, that contains the name, occupation and score of a group of employees.

const employees = [
  {
    name: "Peter",
    score: 25,
    occupation: "Engineer"
  },
  {
    name: "Judy",
    score: 30,
    occupation: "Banker"
  },
  {
    name: "Jarvis",
    score: 40,
    occupation: "Doctor"
  },
  {
    name: "Paul",
    score: 65,
    occupation: "Engineer"
  }
]

The .map() method can also be used to extract specific data from an array
With the .map() method, we can get the names of all the employees to a new array.

const names = employees.map(person => person.name)
console.log(names) 
//returns ["Peter","Judy","Jarvis","Paul"]

More callback parameters

The .map() callback function can take more parameters that you might find useful when carrying out array operations.

Array.map((element, index, array) {operation})

The element parameter is used to access the current element in iteration.

The index returns the index of the current element in iteration

the array returns the complete original array.

I personally haven't seen any use case for the array parameter. If you have seen please comment below.

The .filter() Method

The .filter() returns a new array containing only elements that passed the condition passed in the callback function.

Syntax for the .filter() method

Array.filter(element => {
    //condition
})

let numbers = [24, 11, 8, 13]

const filter =  numbers.filter(number => number > 10)
console.log(filter)  
// output [24,11,13]

When we run the code above the .filter() method loops through the numbers array, and checks if the current number is greater than 10, if true the number is added to the new array.

Using the .filter() method

We can use the .filter() method to get the array of employees who are engineers from our data above.

const allEngineers = people.filter(person => person.occupation === "Engineer")
console.log(allEngineers)
//Outputs 

[
  {
    name: "Peter",
    score: 25,
    occupation: "Engineer"
  },
{
    name: "Paul",
    score: 65,
    occupation: "Engineer"
  }
]

Optional callback parameters

The .filter() callback function just like the .map() can also take more than just the element parameter as an argument and they also serve the same purpose.

Array.filter((element, index, array) {condition})

The .reduce() method.

The .reduce() method is used to combine all the elements in an array to get a value. It evaluates all of the elements in the array to return a single value.

The .reduce() method is a little more complicated than the other two mentioned above because its callback function requires a specific parameter known as the “accumulator” which holds the total value during the operation and returns it after the operation is completed. This "accumulator" parameter is used in the reducer function.

Syntax for .reduce() method

Array.reduce((accumulator, element) {
    //reducer
}, initial value)

Using the .reduce method to get the sum of numbers.

let numbers= [24, 11, 8, 13]

const sum =  numbers.reduce((sum, number) => {
  return sum + number
}, 0)

console.log(sum)  
// outputs 56

When the code above runs the .reduce() method first set the value of sum to 0 which was provided as the initial value and then loops through the array, on every iteration, it adds number to the value of sum, and after the last element returns sum which in our case is 56.

While the initial value might be optional it's always advisable to specify it, to avoid getting a TypeError in the case of an empty array. We get the error message below.

Uncaught TypeError: Reduce of empty array with no initial value

Chaining Methods

One of the pros of using these array methods is the ability to chain them. Since unlike the .forEach() method these array methods return a new array, we can chain them to get a combo method.

Chaining is combining array methods to perform operations on them and get a final return value.

Using chaining we can get the names of employees who scored above 35.

const passed= people.filter(person => person.score > 35)
  .map(person => person.name)

console.log(passed)
 // outputs ["Judy","Jarvis","Paul"]

In the code above the .filter() operation is carried out first on the array which returns an array of employees whose score is above 35 then the .map() method returns their name as the final value of the operation.

We can also get the sum of the scores of engineers only.

const engineersScore= people.filter(person => person.occupation === "Engineer") //return an array of engineers only
    .map(person => person.score) //returns the array of engineers score
    .reduce((sum, element) => sum + element) //sums up the score.

console.log(engineersScore)
//outputs 90

Conclusion

The best way to master new concepts is by using them. Try using these methods in place of the .forEach() when possible.

Feel free to comment below if you have any feedback and please share with other Javascript developers.

Let's Connect on Twitter

Resource I used

MDN

New Guy Here

Samuel Jarvis — Fri, 03 Jan 2020 10:23:17 +0000

Hi I am Samuel Jarvis, a beginner in python Programming and also web development, I have read a lot of articles on DEV. I hope to learn a lot here.

Forem: Samuel Jarvis