All the JavaScript (ES6+) Array methods you need

filter

Save all female users to a separate array.

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]);
}
}

A predicate function is a function that returns a boolean.

// Version 1const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const findFemales = function(currentUser) {
return currentUser.gender === 'female';
};
const femaleUsers = users.filter(findFemales);
// Version 2const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const findFemales = function({ gender }) {
return gender === 'female';
};
const femaleUsers = users.filter(findFemales);
// Version 3const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const findFemales = ({ gender }) => gender === 'female';
const femaleUsers = users.filter(findFemales);
// Version 4const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const femaleUsers = users.filter(
({ gender }) => gender === 'female'
);

map

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.

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'
});
}
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

Save the summary of the array items in a variable.

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];
}
const numbers = [1,2,3,4,5,6,7,8,9];
const addNumber = (acc, number) => {
return acc + number;
}
const summary = numbers.reduce(addNumber);

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

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++;
}
}
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);
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);
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);

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.

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);
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, []);

find

Find the user with id: 123, and save it to a variable.

const users = [
{ id: 123, name: 'George' },
{ id: 456, name: 'Georgia' }
];
let user;
for (let i = 0; i < users.length; i++) {
if (users[i].id === 123) {
user = users[i];
break;
}
}
const users = [
{ id: 123, name: 'George' },
{ id: 456, name: 'Georgia' }
];
const findUser = ({ id }) => id === 123;
const user = users.find(findUser);

findIndex

Find the index of the user with id: 123, and save it to a variable.

const users = [
{ id: 123, name: 'George' },
{ id: 456, name: 'Georgia' }
];
let userIndex = -1;
for (let i = 0; i < users.length; i++) {
if (users[i].id === 123) {
userIndex = i;
break;
}
}
const users = [
{ id: 123, name: 'George' },
{ id: 456, name: 'Georgia' }
];
const findUserIndex = ({ id }) => id === 123;
const userIndex = users.findIndex(findUserIndex);

includes

Find if the number 9 is in the array.

const numbers = [1,2,3,4,5,6,7,8,9];
const indexOf9 = numbers.indexOf(9);
if (indexOf9 !== -1) {
console.log('9 exist');
} else {
console.log('9 does not exist');
}
const numbers = [1,2,3,4,5,6,7,8,9];
if (numbers.includes(9)) {
console.log('9 exist');
} else {
console.log('9 does not exist');
}

Find if a NaN is in the array.

const numbers = [1,2,3,4,5,6,NaN,7,8,9];
const indexOfNaN = numbers.indexOf(NaN);
if (indexOfNaN !== -1) {
console.log('NaN exist');
} else {
console.log('NaN does not exist');
}
const numbers = [1,2,3,4,5,6,NaN,7,8,9];
if (numbers.includes(NaN)) {
console.log('NaN exist');
} else {
console.log('NaN does not exist');
}

some

Save to a boolean variable true if there is at least one male user.

const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
let hasMaleUsers = false;
for (let i = 0; i < users.length; i++) {
if (users[i].gender === 'male') {
hasMaleUsers = true;
break;
}
}
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const isMale = ({ gender }) => gender === 'male';
const hasMaleUsers = users.some(isMale);

every

Save to a boolean variable true if all the users are females.

const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
let allFemales = true;
for (let i = 0; i < users.length; i++) {
if (users[i].gender !== 'female') {
allFemales = false;
break;
}
}
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const isFemale = ({ gender }) => gender === 'female';
const allFemales = users.every(isFemale);

Note: Calling every on an empty array will return true for any condition!

flat

const numbers = [1,2,3,[4,5],[[6,7]]];
console.log(numbers.flat()); // [1,2,3,4,5,[6,7]]
console.log(numbers.flat(1)); // [1,2,3,4,5,[6,7]]
console.log(numbers.flat(2)); // [1,2,3,4,5,6,7]

Tip: The bigger the depth level the slower will be the process.

flatMap

Flatten the array and change the value of each element to its square value.

const numbers = [1,2,3,[4,5],[6,7]];
const flattedNumbers = numbers.flat();
const squareNumber = (n) => n * n;
const squaredNumbers = flattedNumbers.map(squareNumber);
const numbers = [1,2,3,[4,5],[6,7]];
const squareNumber = (item) => {
if (Array.isArray(item)) {
return item.map((i) => i * i);
}
return item * item;
};
const squaredNumbers = numbers.flatMap(squareNumber);

Flatten the array and change the value of each element to its square value. Calculate the square of numbers smaller than 6.

const numbers = [1,2,3,[4,5],[6,7]];
const smallerThanSix = (n) => n < 6;
const squareNumber = (n) => n * n;
const squaredNumbers = numbers
.flat()
.filter(smallerThanSix)
.map(squareNumber);
const numbers = [1,2,3,[4,5],[6,7]];
const transformNumbers = (item) => {
if (Array.isArray(item)) {
return item.reduce((acc, i) => {
if (i < 6) {
return [...acc, i * i];
}
return acc;
}, []);
} else if (item < 6) {
return item * item;
}
return [];
}
const squaredNumbers = numbers.flatMap(transformNumbers);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store