All the JavaScript (ES6+) Array methods you need
By: George Roubie
Tags: JavaScript, Web Development, Arrays, Programming, ES6

I will explain to you with examples the methods: filter , map , reduce , find , findIndex , includes , some , every , flat and flatMap . Get ready because this article is huge, but it will be a reference for you in the future.

filter

One of the most common actions in an array is to filter it. With the filter , we can easily do it.

Example

Save all female users to a separate array.

Without filter :

const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const femaleUsers = [];

for (let i = 0; i < users.length; i++) {

if (users[i].gender === 'female') {

femaleUsers.push(users[i]);

}

}

With filter :

The filter gets as the first parameter a predicate function.

A predicate function is a function that returns a boolean.

This callback function has 3 parameters:

The current element of the array (required) The index of the current element in the array The entire array

The filter creates a new array with all elements that satisfy the provided function.

// Version 1 const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const findFemales = function(currentUser) {

return currentUser.gender === 'female';

};

const femaleUsers = users.filter(findFemales);

With destructuring, we can do it like this. If you don’t know what destructuring is, don’t worry read this.

// Version 2 const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const findFemales = function({ gender }) {

return gender === 'female';

};

const femaleUsers = users.filter(findFemales);

We can use the arrow function to simplify this.

// Version 3 const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const findFemales = ({ gender }) => gender === 'female';

const femaleUsers = users.filter(findFemales);

Now we can remove the function declaration and pass it directly into the filter .

// Version 4 const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const femaleUsers = users.filter(

({ gender }) => gender === 'female'

);

I prefer version 3 so in this article, I will use the version 3 style.

map

Many times we need to manipulate the data of the array. With the map , we can easily do it.

Example

Change the response data so that the male value of the gender to be M and the female value of the gender to be F . Also, change the property name to fullname .

Without map :

const response = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const users = [];

for (let i = 0; i < response.length; i++) {

users.push({

fullname: response[i].name,

gender: response[i].gender === 'male' ? 'M' : 'F'

});

}

With map :

The map gets as the first parameter a callback function that returns a new item for the array. This callback function has 3 parameters:

The current element of the array (required) The index of the current element in the array The entire array

The map creates a new array populated with the results of the provided function.

const response = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const transformResponse = ({ name, gender }) => {

return {

fullname: name,

gender: gender === 'male' ? 'M' : 'F'

}

};

const users = response.map(transformResponse);

reduce

When we need to create a new value based on an array, reduce is very helpful.

Example 1

Save the summary of the array items in a variable.

Without reduce :

const numbers = [1,2,3,4,5,6,7,8,9];

let summary = 0;

for (let i = 0; i < numbers.length; i++) {

summary += numbers[i];

}

With reduce :

The reduce gets as the first parameter a callback function that returns a new item for the array. This callback function has 4 parameters:

The accumulated value previously returned (required) The current element of the array (required) The index of the current element in the array The entire array

The second parameter of the reduce is the initial value. If there is no initial value the first element in the array will be used as the initial value for the accumulator and the loop will begin from the second item on the array.

const numbers = [1,2,3,4,5,6,7,8,9];

const addNumber = (acc, number) => {

return acc + number;

}

const summary = numbers.reduce(addNumber);

We didn’t pass an initial value because we wanted to use the first item of the array as the initial value.

Example 2

Save the number of users that are female to a variable.

Without reduce :

const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

let femaleUsersCount = 0;

for (let i = 0; i < users.length; i++) {

if (users[i].gender === 'female') {

femaleUsersCount++;

}

}

With reduce :

const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const reduceFemaleCount = (acc, user) => {

if (user.gender === 'female') {

return acc + 1;

}

return acc;

};

const femaleUsersCount = users.reduce(reduceFemaleCount, 0);

You must always return a value in the callback function, otherwise, you will lose the value of the accumulator. Rember that in every loop we return the new accumulated value.

Let’s make it a little better with destructuring.

const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const reduceFemaleCount = (acc, { gender }) => {

if (gender === 'female') {

return acc + 1;

}

return acc;

};

const femaleUsersCount = users.reduce(reduceFemaleCount, 0);

And one final optimization with the use of the ternary operator.

const users = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const reduceFemaleCount = (acc, { gender }) => {

return gender === 'female' ? acc + 1 : acc;

};

const femaleUsersCount = users.reduce(reduceFemaleCount, 0);

Example 3

Change the response data so that the male value of the gender to be M . Also, change the property name to fullname . And save only the male users to a new array called maleUsers .

Without reduce :

const response = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const transformResponse = ({ name, gender }) => {

return {

fullname: name,

gender: gender === 'male' ? 'M' : 'F'

}

};

const findMales = function({ gender }) {

return gender === 'M';

};

const users = response.map(transformResponse);

const maleUsers = users.filter(findMales);

As you see we first changed the structure and the data with the map method and then we used the filter method to get the male users. In these cases, the reduce is a necessity.

With reduce :

const response = [

{ name: 'George', gender: 'male' },

{ name: 'Georgia', gender: 'female' }

];

const reduceMaleUsers = (acc, { name, gender }) => {

if (gender === 'male') {

return [...acc, { fullname: name, gender: 'M' }];

}

return acc;

};

const maleUsers = response.reduce(reduceMaleUsers, []);

As you know with the reduce we create a new single value but this value can be anything. Here we are creating a new array with only the male users and the data in the correct format. Filter and map together, super cool!