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
- map, filter, reduce, find
- Execute something on every element with a map
- Finding a single element in the array
- Iterate over an array to count the property of each item
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)