Home/JavaScript/Arrays & Array Methods

JS JavaScript5 / 7

Arrays & Array Methods

📌 WHAT

An array is an ordered, zero-indexed list of values. Array methods are built-in functions to transform, filter, search, and iterate over arrays without manual loops.

💡 WHY

API responses are almost always arrays. React renders lists from arrays. Array methods like .map(), .filter(), .reduce() are used in every React component you will ever write.

⏰ WHEN / WHERE

Any time you work with lists of things — users, products, posts, search results. Learn these methods before anything else, they appear in every interview and every codebase.

🔧 HOW

Access items by index: arr[0]. Use methods chained: arr.filter(x => x > 5).map(x => x * 2). Most methods return new arrays — they do NOT mutate the original.

Code Examples

#1The 8 methods you'll use every single day

The 8 methods you'll use every single day

javascript

const users = [
  { id: 1, name: "Ali",   age: 25, role: "admin" },
  { id: 2, name: "Ahmed", age: 30, role: "user"  },
  { id: 3, name: "Sara",  age: 22, role: "user"  },
  { id: 4, name: "Omar",  age: 28, role: "admin" },
];

// .map() — TRANSFORM each item, returns NEW array of same length
const names = users.map(user => user.name);
// ["Ali", "Ahmed", "Sara", "Omar"]

const cards = users.map(user => ({
  ...user,
  displayName: user.name.toUpperCase(),
}));

// .filter() — KEEP items that pass the test
const admins = users.filter(user => user.role === "admin");
// [{ id: 1, name: "Ali"... }, { id: 4, name: "Omar"... }]

// .find() — FIRST item that passes (or undefined)
const ali = users.find(user => user.name === "Ali");

// .findIndex() — INDEX of first match (or -1)
const idx = users.findIndex(user => user.id === 3); // 2

// .reduce() — reduce to a SINGLE value
const totalAge = users.reduce((sum, user) => sum + user.age, 0); // 105
const byId = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {}); // { 1: {...}, 2: {...} }

// .some() — true if AT LEAST ONE passes
users.some(user => user.role === "admin"); // true

// .every() — true if ALL pass
users.every(user => user.age > 18); // true

// .includes() — check if value exists (for primitives)
["a", "b", "c"].includes("b"); // true

Try in Playground

#2Spread, rest, destructuring with arrays

Spread, rest, destructuring with arrays

javascript

// Spread — copy or merge arrays
const original = [1, 2, 3];
const copy = [...original]; // independent copy

const merged = [...original, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...original]; // [0, 1, 2, 3]

// Array destructuring — extract values by position
const [first, second, ...rest] = [10, 20, 30, 40, 50];
// first = 10, second = 20, rest = [30, 40, 50]

// Skip items
const [, , third] = [10, 20, 30]; // third = 30

// Swap variables without temp variable!
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

// Chaining methods (very common in React)
const result = users
  .filter(user => user.age >= 25)    // keep 25+
  .map(user => user.name)            // extract names
  .sort()                            // alphabetical
  .join(", ");                       // "Ahmed, Ali, Omar"

Try in Playground

Practice This Concept

Open the playground, paste any example, and experiment. The best way to learn is by breaking things.

Open in Playground

Functions — All Forms

Objects & Destructuring