Array Methods
JavaScript's array methods are becoming increasingly utilized in production, with many developers preferring them over the standard for
loop.
The most common array methods include: forEach
, map
, filter
, reduce
, find
, some
, every
, includes
.
You can find a full list on MDN.
You likely won't be forced to use them in an interview, and often it may even be easier to display logic using a standard for
loop (as I do in this course).
However, being able to integrate them into a solution can show you have command over the language and understand effective patterns.
Benefits of array methods include:
- Succinct syntax
- Declarative behavior
- Enforce immutability
- Minimize risk of side-effect behavior
- Explicit intent (array methods have a specific purpose which provides someone reading your code more context)
Below you will be given different for
loop code blocks, and it is your job to refactor them to use an array method.
Two methods will not be used:
forEach
: it is more of a catch-all method that has many usesreduce
: this is more complex and also can be used for different intents
Question 1
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
array[i] = array[i] * 2;
}
console.log(array); // [2, 4, 6, 8, 10];
Solution 1
const array = [1, 2, 3, 4, 5];
const solution = array.map(item => item * 2);
console.log(solution); // [2, 4, 6, 8, 10];
This is a perfect opportunity to use the map
function.
map
is used when we want to perform the same transformation on every item in an array.
In this case, we multiply everything by 2.
You can recognize needing a map function if you see a for
loop that makes a change to every i
item.
The map
method returns a new array with the updated items.
Question 2
const array = [1, 2, 3, 4, 5];
const solution = [];
for (let i = 0; i < array.length; i++) {
// Check if it is an even number
if (array[i] % 2 === 0) {
solution.push(array[i]);
}
}
console.log(solution); // [2, 4];
Solution 2
const array = [1, 2, 3, 4, 5];
const solution = array.filter(item => item % 2 === 0);
console.log(solution); // [2, 4];
The filter
method is used to remove items that don't match a condition specified by the callback function.
If the callback returns true
, the item is added to the output array.
If the callback returns false
, an item is not included.
A good candidate for filter
is when you use an if
inside of a for
loop to conditionally include items in your results.
Question 3
const array = ['Jeni', 'Bob', 'Carol'];
const isFriend = (friends, name) => {
for (let i = 0; i < friends.length; i++) {
const friend = friends[i];
if (friend === name) {
return true;
}
}
return false;
}
console.log(isFriend(array, 'Carol')); // true
Solution 3
const array = ['Jeni', 'Bob', 'Carol'];
const isFriend = (friends, name) => friends.includes(name);
console.log(isFriend(array, 'Carol')); // true
The includes
method will return true
or false
if an item exists in an array.
Question 4
const array = [
{ id: 1, name: 'Jeni' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Carol' },
];
const getFriend = (friends, id) => {
for (let i = 0; i < friends.length; i++) {
const friend = friends[i];
if (friend.id === id) {
return friend;
}
}
}
console.log(getFriend(array, 3).name); // Carol
Solution 4
const array = [
{ id: 1, name: 'Jeni' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Carol' },
];
const getFriend = (friends, id) => friends.find((friend) => friend.id === id);
console.log(getFriend(array, 3).name); // Carol
The find
method will return the first item that matches a condition in the callback.
If no items match, it will return undefined
.
Question 5
const array = [2, 4, 6];
const areAllEven = (numbers) => {
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 !== 0) {
return false;
}
}
return true;
}
console.log(areAllEven(array)); // true
Solution 5
const array = [2, 4, 6];
const areAllEven = (numbers) => numbers.every((num) => num % 2 === 0);
console.log(areAllEven(array)); // true
The every
method will return true
if all items match a condition.
If at least one doesn't match, it will return false
.
Question 6
const array = [3, 6, 9];
const atLeastOneEven = (numbers) => {
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
return true;
}
}
return false;
}
console.log(atLeastOneEven(array)); // true
Solution 6
const array = [3, 6, 9];
const atLeastOneEven = (numbers) => numbers.some((num) => num % 2 === 0);
console.log(atLeastOneEven(array)); // true
The some
method will return true
if at least one item matches a condition.
If none match, it will return false
.
Table of Contents