JavaScript provides several built-in methods that make working with arrays much easier.
Rather than writing loops manually, methods such as
map(), filter(), find() and
reduce() can perform common tasks with much less code.
These methods are heavily used in modern JavaScript frameworks such as React and React Native and are therefore important concepts to understand.
What array methods are
Array methods are functions that operate on arrays. Some methods create a new array, some return a single item and others return a single value.
Consider the following array:
const numbers = [1, 2, 3, 4, 5];
Each of the methods in this article will use this array as a starting point.
map()
The map() method creates a new array by transforming every item in the
original array.
Suppose each number should be doubled:
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map( number => number * 2 );
The contents of doubled will be:
[2, 4, 6, 8, 10]
The original array remains unchanged. A new array is returned containing the transformed values.
filter()
The filter() method creates a new array containing only items that match
a condition.
The following example keeps only even numbers:
const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter( number => number % 2 === 0 );
The result will be:
[2, 4]
Every element is checked against the condition and only matching elements are included in the returned array.
find()
The find() method searches an array and returns the first matching item.
Unlike filter(), it does not return an array containing all matches.
const numbers = [1, 2, 3, 4, 5]; const result = numbers.find( number => number > 3 );
The value of result will be:
4
Once a match has been found, the search stops.
If no item matches the condition, undefined is returned.
reduce()
The reduce() method is often considered the most difficult array method
to learn, but the idea behind it is simple.
Whereas map() and filter() return arrays, reduce()
combines multiple values into a single result.
The following example calculates the total of all numbers:
const numbers = [1, 2, 3, 4, 5]; const total = numbers.reduce( (sum, number) => sum + number, 0 );
The value of total will be:
15
The first parameter, sum, is known as the accumulator. It stores the
running total.
Starting from 0, the calculation proceeds as follows:
0 + 1 = 1 1 + 2 = 3 3 + 3 = 6 6 + 4 = 10 10 + 5 = 15
Although summing values is a common use case, reduce() can be used whenever
multiple values need to be converted into a single result.
Chaining methods
These methods can be combined together.
The following example keeps only even numbers before doubling them:
const numbers = [1, 2, 3, 4, 5]; const result = numbers .filter(number => number % 2 === 0) .map(number => number * 2);
The result will be:
[4, 8]
When to use each method
A useful way to remember these methods is:
- map() transforms every item.
- filter() keeps matching items.
- find() returns the first matching item.
- reduce() combines items into a single result.
These methods are widely used throughout modern JavaScript and appear frequently in React, React Native and Node.js applications.
