Language: EN
LuisLlamas Logo
Search
⏲️ ~ 5 minutes Intermediate
javascript-metodos-funcionales-en-arrays

Functional Methods for Collections in JavaScript

In JavaScript, arrays have a series of functional methods that allow us to perform operations on arrays declaratively.

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:

MethodDescription
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 take a look at each one in detail 👇.

Functional Methods for Arrays

Method map()

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 numbers array, squares it, and returns a new array with the results.

const users = [
  { name: 'Juan', age: 25 },
  { name: 'Ana', age: 30 }
];
const names = users.map(user => user.name);
console.log(names); // ['Juan', 'Ana']

Here, map() extracts the names from the user objects and places them in a new array.

Method filter()

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 the numbers greater than three and returns a new array with the values that meet the condition.

const users = [
  { name: 'Juan', age: 25 },
  { name: 'Ana', age: 30 },
  { name: 'Luis', age: 19 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Juan', age: 25 }, { name: 'Ana', age: 30 }]

In this case, filter() selects the users who are adults.

Method reduce()

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 such as summation or concatenation of values.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, num) => accumulator + num, 0);
console.log(sum); // 10

Here, reduce() sums 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 quantity of sales.

The reduceRight() method acts exactly like reduce(), but starts from right to left.

Method some()

The some() method checks if 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: 'Juan', 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 is 18 or older.

Method every()

The every() method checks if 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: 'Juan', 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 are 18 or older.

On this page