Array iteration methods(map, filter, reduce)

The JavaScript language has a clear preference for arrays over other data structures. They have a lot of convenient specific tricks, for example, a whole set of iterating methods: map, filter, reduce.

map

The map () method creates a new с array with the result of calling the specified function⚙️ for each element of the array.

Syntax

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // Returns the item for new_array
}[, thisArg])

The map method calls the passed callback function once for each element, in the order of their occurrence, and constructs a new array from the results of its call. The callback function is called only for array indices that have assigned values, including undefined. It is not called for missing array elements (that is, for indices that were never specified, deleted, or never assigned a value).

The function⚙️ callback is called with three arguments:

• the value of the element,
• element index
• and the array through which the passage is carried out.

If the thisArg parameter was passed to the map method, it will be used as the this value when callback is called. Otherwise, the this value will be undefined. Ultimately, the value of this as seen from the callback function is determined according to the usual rules for defining this as seen from a function.

The map method does not modify the array for which it was called (although the function⚙️ can do that!).

The range of elements processed by the map method is set before the first call to the callback function. Items added to the array after the start of the map method will not be visited by the callback function. If the existing elements of the array are modified by the callback function, their values ​​passed to the function will be the values ​​at the time when the map method visits them. Deleted items will not be visited.

Examples:

simple example

You have an array with many objects, each representing a different person. There can be a lot of data here: name, age, hair color and favorite character from the cinema, but at the moment all this is not required - you only want to get an array of passport numbers of these people in order to give them all conference passes.

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let passports = friends.map(friend => friend.passport + ' ') return passports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let passports = friends.map(friend => friend.passport + ' ')
  return passports
}

Result

Loading...

In certain cases, you may need to display an array of objects with the selected keys as a string :

Live Editor

function learnJavaScript() { const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ] let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('') return result }

function learnJavaScript() {
  const users = [
    { id: 11, name: 'Adam', age: 23, group: 'editor' },
    { id: 47, name: 'John', age: 28, group: 'admin' },
    { id: 85, name: 'William', age: 34, group: 'editor' },
    { id: 97, name: 'Oliver', age: 28, group: 'admin' }
  ]

  let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('')

  return result
}

Result

Loading...

Creating an array of Fahrenheit values from an array of Celsius values:

An example with processing each element of an array with a given formula :

Live Editor

function learnJavaScript() { let celsius = [-15, -5, 0, 10, 16, 20, 24, 32] let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ') return fahrenheit }

function learnJavaScript() {
  let celsius = [-15, -5, 0, 10, 16, 20, 24, 32]

  let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ')

  return fahrenheit
}

Result

Loading...

Displaying an array of numbers using a function that takes an argument :

Live Editor

function learnJavaScript() { const numbers = [1, 4, 9] const doubles = numbers.map(num => num * 2 + ' ') return doubles }

function learnJavaScript() {
  const numbers = [1, 4, 9]

  const doubles = numbers.map(num => num * 2 + ' ')

  return doubles
}

Result

Loading...

filter

The filter () method creates a new array with all the elements that have passed the check specified in the passed function⚙️.

The result of a filter is always an array. If a function⚙️ for an element returns true (or any" true "value), this element is included in the result, otherwise it is not included.

Syntax

let newArray = arr.filter(function callback(element[, index, [array]])[, thisArg])

Description

The filter() method calls the passed callback function once for each element present in the array and constructs a new array with all values ​​for which the callback function returned true or a value that becomes true when cast to boolean. The callback function is called only for array indices that have assigned values; it is not called for indexes that have been dropped or have never been assigned values. Array elements that have not been checked by the callback function are simply skipped and not included in the new array.

The function⚙️ callback is called with three arguments:

• the value of the element;
• element index;
• the array through which the passage is carried out.

If the thisArg parameter was passed to the filter() method, it will be used as the this value when the function is called. Otherwise, the this value will be undefined. Ultimately, the value of this as seen from a function⚙️ is determined according to the usual rules for defining this as seen from a function⚙️.

The filter() method does not modify the array on which it was called.

The range of elements processed by the filter() method is set before the first call to the callback function. Items added to the array after the start of the filter() method will not be visited by the callback function. If the existing array elements change, the values ​​passed to the callback function will be the values ​​at the time when thefilter()method visits them. Deleted items will not be visited.

Example

Filtering out all small values

The following example uses filter() to create a filtered array with all elements greater than or equal to value, and all elements less than value removed.

Live Editor

function learnJavaScript() { const isBigEnough = value => value >= 10 let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' ' return filtered }

function learnJavaScript() {
  const isBigEnough = value => value >= 10

  let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' '

  return filtered
}

Result

Loading...

reduce

The reduce method also runs in the context of an array and calls a function⚙️ for each element, but it also accumulates the results of all calls into a single value. This behavior can be controlled.

reduce is not meant to modify the elements of a collection like map. Its task is to calculate the "sum" of all elements in one way or another, and return it.

The resulting value can be anything: a number, a string, an object, an array - it all depends on the problem that the JavaScript developer is solving.

The reduce method takes 2 parameters:

• a function, like map, which will be called sequentially for each element of the collection; is the initial value of the accumulator.

The function⚙️ also has 2 arguments:

• the first is the accumulated value (accumulator);
• directly an element of the array.

Syntax

array.reduce(function callback[, initialValue])

Description

The reduce () method executes the callback function once for each element in the array, excluding voids, taking four arguments: the initial value (or the value from a previous callback), the value of the current element, the current index, and the array to iterate over.

The first time the function is called⚙️, the accumulator and currentValue parameters can take one of two values. If the initialValue argument is passed in the call to reduce (), then the value of accumulator will be equal to the value of initialValue and the value of currentValue will be equal to the first value in the array. If no initialValue is specified, accumulator will be equal to the first value in the array, and currentValue will be equal to the second value in the array.

If the array is empty and no initialValue argument is specified, a TypeError exception will be thrown. If the array consists of only one element (regardless of its position in the array) and the initialValue argument is not specified, or if the initialValue argument is specified, but the array is empty, then this value will be returned, without calling the function⚙️ callback ...

Initial battery value

Let's figure out the initial value. In the example, it is equal to 0, since we are calculating the numerical value - the sum of the ages. In place of zero, there can be any other number / string (empty or not) / object / array - whatever value you start accumulating from. For example, let's combine the names of all friends in one line :

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ') return names }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]

  const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ')

  return names
}

Result

Loading...

Here, the initial value was the string " Friends: ", to which the names of all friends were gradually added.

If you do not specify the original value explicitly, the first 1️⃣ element of the array becomes implicitly. In this case, the function⚙️ for it is no longer called.

Example

Sum all values in an array:

Live Editor

function learnJavaScript() { const initialValue = 0 const sum = [1, 2, 3].reduce((accumulator, currentValue) => { return accumulator + currentValue }, initialValue) return sum }

function learnJavaScript() {
  const initialValue = 0

  const sum = [1, 2, 3].reduce((accumulator, currentValue) => {
    return accumulator + currentValue
  }, initialValue)

  return sum
}

Result

Loading...

And the same thing in one line of code:

Live Editor

function learnJavaScript() { const sum = [1, 2, 3].reduce((x, y) => x + y) return sum }

function learnJavaScript() {
  const sum = [1, 2, 3].reduce((x, y) => x + y)

  return sum
}

Result

Loading...

chaining

JavaScript programming supports the convenient chaining pattern - combining multiple functions⚙️ into one chain with sequential transmission of the result.

All three parsed methods are called in the context of an array, and two 2️⃣ of them also return an array. Thus, it is very easy to combine them.

For example, let's calculate the total age of all boys :

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let totalBoysYears = friends .filter(friend => friend.sex === 'm') .reduce((accumulator, friend) => accumulator + friend.age, 0) return totalBoysYears }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let totalBoysYears = friends
    .filter(friend => friend.sex === 'm')
    .reduce((accumulator, friend) => accumulator + friend.age, 0)
  return totalBoysYears
}

Result

Loading...

Or we can collect the girls' passport numbers to buy them plane tickets to Las Vegas :

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' ' return girlsPassports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' '
  return girlsPassports
}

Result

Loading...

Conclusion

With these great features⚙️ the code becomes easier to read. So, below is a list of articles that go into more detail on this topic.

Problems?

Write to Discord chat.

Questions:

A function to be called for each element of an array?

1. currentValue
2. array
3. callback

A method that creates a new array with the result of calling the specified function for each element of the array:

1. map
2. filter
3. reduce

The resulting value of the reduce method can be:

1. Number
2. Array
3. Anything

Summing all values ​​in an array is achieved by the method:

1. map
2. filter
3. reduce

Optional parameter or value used as this when calling the callback function:

1. array
2. index
3. thisArg

A method that creates a new array with all the elements that passed the validation specified in the passed function:

1. map
2. filter
3. reduce

Combining several functions into one chain with sequential transfer of the result:

1. unity
2. chaining
3. merger

In order to understand how much you learned this lesson, take the test in the mobile application of our school on this topic or in our telegram bot.

Links

1. Simplify your JavaScript - use map, reduce and filter
2. 15 useful javascript examples of map, reduce and filter
3. Array.prototype.map()
4. Array.prototype.filter()
5. Array.prototype.reduce()

Contributors ✨

Thanks goes to these wonderful people (emoji key):

AlisaNasibullina

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨