Write JavaScript loops using map, filter, reduce and find

Write JavaScript loops using map, filter, reduce and find | How to use Map, reduce, and filter in Javascript?

by

In JavaScript, Map, reduce, and filter is considered array methods. Individually one will iterate over an array and make a transformation or computation. Also, each will return a new array on the basis of the result of the function. In this tutorial, our expert programming team discussed in-depth knowledge on how to write JavaScript Loops using map(), filter(), reduce(), and find():

JavaScript Loops

Loops are generally used, in any programming language, to perform operations on arrays: given an array, you can iterate over its elements and perform a calculation.

map, filter, reduce, find

Those are 3 really powerful array functions:

  • map returns an array with the same length.
  • filter as the name implies, it returns an array with fewer items than the original array.
  • reduce returns a single value (or object).
  • find returns the first items in an array that satisfies a condition.

map, filter and reduce were introduced in ES5, so you can safely use them as implemented in every browser for years.

find was introduced in ES6/ES2015.

Also Check:

Execute something on every element with a map

A loop would look like this:

const doSomething = (item) => {
  //...
  return item
}
const items = ['a', 'b', 'c']
items.forEach((item) => {
  doSomething(item)
})

With a declarative approach, you tell JavaScript to perform something on every element using:

const items = ['a', 'b', 'c']
const newItemsArray = items.map((item) => doSomething(item))

This generates a new array, without editing the original one (what we call immutability).

Finding a single element in the array

Sometimes you need to look for a specific item in the array and return it.

This is how you would do so with a loop:

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]
for (const item of items) {
  if (item.name === 'b') {
    return item
  }
}

Here is the non-loop version, using find() (ES6+):

const b = items.find((item) => item.name === 'b')

Here is the same functionality using filter() (ES5+):

const b = items.filter((item) => item.name === 'b').shift()

Note: shift() mutates the array, but the array it mutates is the one returned by filter(), not the original array. If this sounds unacceptable, you can check if the array is not empty and get the first item using b[0].

filter() and reduce() will iterate over all the array items, while find() will be faster.

Iterate over an array to count the property of each item

Use reduce() to get a single value out of an array. For example sum the items content.value property:

const items = [
  { name: 'A', content: { value: 5 }},
  { name: 'B', content: { value: 6 }},
  { name: 'C', content: { value: 7 }}
]

using a loop:

let count = 0
for (const item of items) {
  count += item.content.value
}

can be syntax as

const count = items.reduce((result, { content: { value } }) => result + value, 0)