In JavaScript, arrays have a series of functional methods that allow us to perform operations on arrays in a declarative way.
In general, these functional methods improve code readability (and with this, we have a lower chance of error and better code maintenance).
Unlike imperative methods, which modify Arrays in place, functional methods create and return new Arrays, preserving immutability.
These methods are:
| Method | Description |
|---|---|
map() | Creates a new array with the results of applying a function to each element. |
filter() | Creates a new array with the elements that meet a condition. |
reduce() | Applies an accumulator function over the elements of the array. |
reduceRight() | Applies an accumulator function from right to left. |
some() | Checks if at least one element meets a condition. |
every() | Checks if all elements meet a condition. |
Let’s look at each one in detail 👇.
Functional Methods for Arrays
map() Method
The map() method creates a new array with the results of applying a function to each element of the original array. This method does not modify the original array.
const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num ** 2);
console.log(squares); // [1, 4, 9, 16]
In this example, map() takes each number from the numeros array, squares it, and returns a new array with the results.
const users = [
{ name: 'Luis', age: 25 },
{ name: 'Ana', age: 30 }
];
const names = users.map(user => user.name);
console.log(names); // ['Luis', 'Ana']
Here, map() extracts the names from the user objects and places them in a new array.
filter() Method
The filter() method creates a new array with all elements that pass a test implemented by a provided function. Like map(), filter() does not modify the original array.
const numbers = [1, 2, 3, 4, 5];
const greaterThanThree = numbers.filter(num => num > 3);
console.log(greaterThanThree); // [4, 5]
This example filters numbers greater than three and returns a new array with the values that meet the condition.
const users = [
{ name: 'Luis', age: 25 },
{ name: 'Ana', age: 30 },
{ name: 'Luis', age: 19 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Luis', age: 25 }, { name: 'Ana', age: 30 }]
In this case, filter() selects users who are of legal age.
reduce() Method
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. It is especially useful for operations like summing or concatenating values.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, num) => accumulator + num, 0);
console.log(sum); // 10
Here, reduce() adds all the numbers in the array and returns the total result.
const sales = [
{ product: 'A', quantity: 10 },
{ product: 'B', quantity: 20 },
{ product: 'C', quantity: 15 }
];
const totalSales = sales.reduce((accumulator, sale) => accumulator + sale.quantity, 0);
console.log(totalSales); // 45
In this example, reduce() calculates the total sales quantity.
The reduceRight() method works exactly like reduce(), but starting from right to left.
some() Method
The some() method tests whether at least one element in the array meets the provided condition. It returns true if at least one element passes the test and false if none do.
const numbers = [1, 2, 3, 4];
const hasLessThanTwo = numbers.some(num => num < 2);
console.log(hasLessThanTwo); // true
In this example, some() returns true because at least one number in the array (the 1) is less than 2.
const users = [
{ name: 'Luis', age: 25 },
{ name: 'Ana', age: 30 },
{ name: 'Luis', age: 19 }
];
const hasAdults = users.some(user => user.age >= 18);
console.log(hasAdults); // true
Here, some() returns true because at least one user has an age greater than or equal to 18.
every() Method
The every() method tests whether all elements in the array meet the provided condition. It returns true if all elements pass the test and false if at least one does not.
const numbers = [1, 2, 3, 4];
const allGreaterThanZero = numbers.every(num => num > 0);
console.log(allGreaterThanZero); // true
In this example, every() returns true because all numbers in the array are greater than 0.
const users = [
{ name: 'Luis', age: 25 },
{ name: 'Ana', age: 30 },
{ name: 'Luis', age: 19 }
];
const allAdults = users.every(user => user.age >= 18);
console.log(allAdults); // true
In this case, every() returns true because all users have an age greater than or equal to 18.
