Skip to main content

​
Essential Array Methods

JavaScript arrays have a very robust API offering a plethora of amazing tools. Here are the 4 must-know JavaScript array methods every developer should know.

​
Array.prototype.map()

Array.prototype.map() creates a new array by applying the provided transformation to each element of the original array. The result is an array with the same length as the original array and elements transformed based on the provided function. 
const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]

​
Use Cases

  • Transforming data structures
  • Converting between formats
  • Applying calculations to each element
map() always returns a new array of the same length. If you need to filter out elements, use filter() instead.

​
Array.prototype.filter()

Array.prototype.filter() creates a new array by using a filtering function to keep only elements that return true based on that function. The result is an array with equal or less than the original array’s length, containing a subset of the same elements as the original array. 
const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]

​
Use Cases

  • Removing unwanted elements
  • Finding all matches for a condition
  • Creating subsets of data

​
Array.prototype.reduce()

Array.prototype.reduce() creates an output value of any type depending on a reducer function and an initial value. The result can be of any type such as an integer, an object or an array, based on the reducer function provided.

​
Basic Reduction

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

​
Building Complex Structures

const arr = [1, 2, 3];

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

​
Use Cases

  • Summing or multiplying values
  • Building objects from arrays
  • Flattening nested structures
  • Implementing other array methods
reduce() is the most powerful array method. Many other array operations can be implemented using reduce().

​
Array.prototype.find()

Array.prototype.find() returns the first element for which a matcher function returns true. The result is a single element from the original array. 
const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1

​
Use Cases

  • Finding a specific item in a list
  • Looking up by property value
  • Getting the first match for a condition
If you need the index instead of the element, use findIndex(). If you need all matches, use filter().

​
Combining Methods

The real power of these methods comes from combining them together: 
const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 30, active: false },
  { id: 3, name: 'Charlie', age: 35, active: true },
  { id: 4, name: 'David', age: 28, active: true }
];

// Get names of active users over 26
const activeUserNames = users
  .filter(user => user.active)
  .filter(user => user.age > 26)
  .map(user => user.name);
// ['Charlie']

// Calculate total age of active users
const totalAge = users
  .filter(user => user.active)
  .reduce((sum, user) => sum + user.age, 0);
// 88

// Find first user over 30
const seniorUser = users.find(user => user.age > 30);
// { id: 3, name: 'Charlie', age: 35, active: true }

​
Method Comparison

map() returns a new array with transformed values, while forEach() returns undefined and is used for side effects. Use map() when you need the results, forEach() when you just need to iterate.
filter() returns all matching elements in a new array, while find() returns only the first match. Use filter() for multiple results, find() for a single result.
reduce() is the most flexible method and can implement most other array operations. However, use specific methods like map() or filter() when they’re more readable.

​
Performance Tips

  1. Avoid chaining too many methods - Each method creates a new array
  2. Use reduce() for multiple operations - Can be more efficient than chaining
  3. Consider using a for loop for performance-critical code
  4. Break early when possible - Use find() or some() instead of filter()[0]
// Less efficient - creates intermediate array
const result = arr
  .filter(x => x > 10)
  .map(x => x * 2)[0];

// More efficient - stops at first match
const result = arr
  .find(x => x > 10) * 2;

Build docs developers (and LLMs) love

Get started for freeTalk to us