Essential JavaScript Array Methods

JavaScript arrays come with a powerful set of built-in methods that make working with collections of data a breeze. Let's explore the most essential ones.

The Big Three: map, filter, reduce

These three methods are the workhorses of array manipulation in JavaScript.

map()

The map() method creates a new array by transforming each element:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

filter()

The filter() method creates a new array with elements that pass a test:

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

reduce()

The reduce() method reduces an array to a single value:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

Finding Elements

find() and findIndex()

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const bob = users.find(u => u.name === 'Bob');
// { id: 2, name: 'Bob' }

const bobIndex = users.findIndex(u => u.name === 'Bob');
// 1

includes()

Check if an array contains a value:

const fruits = ['apple', 'banana', 'orange'];
fruits.includes('banana'); // true
fruits.includes('grape');  // false

Testing Arrays

every() and some()

const numbers = [2, 4, 6, 8];

numbers.every(n => n % 2 === 0); // true - all are even
numbers.some(n => n > 5);        // true - some are > 5

Chaining Methods

One of the best features is the ability to chain methods:

const data = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 78 },
];

const topScorers = data
  .filter(p => p.score >= 80)
  .map(p => p.name)
  .join(', ');
// "Alice, Bob"

Conclusion

Mastering these array methods will make your JavaScript code more concise, readable, and functional. Practice using them in the Edodo Pen!