Map and Reduce Methods

In this lesson, we’ll look at two unique array methods, map and reduce, that can make arrays even more convenient.

Introduction

The map and reduce methods are used to get a modified version of the array or a reduced value using callback functions. Let’s look at the two methods individually.

map method

The map method applies a function to each element of the array and creates a new array of the returned values. Now, we can look at its uses.

Syntax of map method

The syntax of the map method looks like this:

arr.map(<function>);

The map method above will take, as an argument, a function invoked for each element in the array. The function that will be passed is given arguments by the map method in the following order.

function callbackfn(value: any, index: number, array: any[])

Again, for each element the callbackfn will be passed with the value of the element as the first argument, followed by the index of the element as the second argument, and lastly the array itself as the third argument. This callbackfn function takes from 0 to 3 arguments. Finally, a new array with all the returned values from the callbackfn function will be returned by the map method.

Check out the following example.