JavaScript Array Methods You Must Know

Arrays are everywhere in JavaScript. Whether you're processing API responses, filtering lists, or transforming data — you need these methods in your toolkit.

The Big Three: map, filter, reduce

These three methods handle 80% of array operations.

map — Transform Every Element

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]

const users = [
  { name: "Amit", age: 22 },
  { name: "Priya", age: 25 }
];
const names = users.map(user => user.name);
// ["Amit", "Priya"]

Use map when: You want to transform data while keeping the same number of items.

filter — Keep Only Matching Elements

Creates a new array with only elements that pass a test:

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

const users = [
  { name: "Amit", active: true },
  { name: "Priya", active: false },
  { name: "Rahul", active: true }
];
const activeUsers = users.filter(u => u.active);
// [{ name: "Amit", active: true }, { name: "Rahul", active: true }]

Use filter when: You want to remove items that don't match a condition.

reduce — Combine Into a Single Value

Reduces an array to a single value by accumulating:

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

// Count occurrences
const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];
const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// { apple: 3, banana: 2, cherry: 1 }

Use reduce when: You need to combine all elements into a single result (sum, object, etc.).

Finding Elements

find — First Match

Returns the first element that passes the test (or undefined):

const users = [
  { id: 1, name: "Amit" },
  { id: 2, name: "Priya" },
  { id: 3, name: "Rahul" }
];
const user = users.find(u => u.id === 2);
// { id: 2, name: "Priya" }

findIndex — Position of First Match

const index = users.findIndex(u => u.id === 2);
// 1

includes — Check if Value Exists

const colors = ["red", "green", "blue"];
colors.includes("green"); // true
colors.includes("purple"); // false

Testing Elements

some — At Least One Matches

const numbers = [1, 3, 5, 7, 8];
numbers.some(n => n % 2 === 0); // true (8 is even)

every — All Must Match

const ages = [18, 22, 25, 30];
ages.every(age => age >= 18); // true (all are 18+)

Adding and Removing

Spread Operator (Immutable)

const original = [1, 2, 3];

// Add to end
const withFour = [...original, 4]; // [1, 2, 3, 4]

// Add to start
const withZero = [0, ...original]; // [0, 1, 2, 3]

// Combine arrays
const combined = [...arr1, ...arr2];

slice — Extract a Portion (Non-Mutating)

const arr = [1, 2, 3, 4, 5];
arr.slice(1, 3);  // [2, 3] — from index 1 to 3 (exclusive)
arr.slice(-2);    // [4, 5] — last 2 elements

splice — Add/Remove In Place (Mutating!)

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);       // removes 1 element at index 2 → [1, 2, 4, 5]
arr.splice(1, 0, 99);   // inserts 99 at index 1 → [1, 99, 2, 4, 5]

Warning: splice mutates the original array. In React, prefer immutable approaches.

Sorting

sort — Sorts In Place

// Alphabetical (default)
["banana", "apple", "cherry"].sort();
// ["apple", "banana", "cherry"]

// Numbers need a compare function!
[10, 1, 21, 2].sort();           // [1, 10, 2, 21] — WRONG
[10, 1, 21, 2].sort((a, b) => a - b); // [1, 2, 10, 21] — correct

// Sort objects
users.sort((a, b) => a.age - b.age); // ascending by age

Gotcha: sort() converts elements to strings by default. Always provide a compare function for numbers.

Flattening

flat — Remove Nesting

const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat();    // [1, 2, 3, 4, [5, 6]] — one level
nested.flat(2);   // [1, 2, 3, 4, 5, 6] — two levels
nested.flat(Infinity); // flatten everything

flatMap — Map + Flat in One

const sentences = ["Hello world", "Goodbye moon"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "world", "Goodbye", "moon"]

Chaining Methods

The real power is combining methods:

const orders = [
  { product: "Laptop", price: 999, qty: 1 },
  { product: "Mouse", price: 25, qty: 3 },
  { product: "Keyboard", price: 75, qty: 2 },
  { product: "Monitor", price: 450, qty: 1 },
];

const expensiveTotal = orders
  .filter(order => order.price > 50)
  .map(order => order.price * order.qty)
  .reduce((total, subtotal) => total + subtotal, 0);
// 999 + 150 + 450 = 1599

Read it like a pipeline:

1. Filter: keep orders over $50
2. Map: calculate subtotal for each
3. Reduce: sum all subtotals

Quick Reference

Method	Returns	Mutates?	Use For
map	New array	No	Transform each element
filter	New array	No	Remove non-matching elements
reduce	Single value	No	Combine all elements
find	Element/undefined	No	Get first match
some	Boolean	No	Check if any match
every	Boolean	No	Check if all match
sort	Same array	Yes!	Order elements
slice	New array	No	Extract portion
splice	Removed items	Yes!	Add/remove in place
flat	New array	No	Remove nesting

Key Takeaways

1. map, filter, reduce handle most array operations — master these first
2. Always use a compare function with sort for numbers
3. Prefer immutable methods (spread, slice, map, filter) in React
4. Chain methods for powerful data transformations
5. find returns the first match, filter returns all matches