Skip to content

JavaScript Arrays

Creating, indexing, and iterating arrays, plus the essential map, filter, and reduce methods.

What you'll learn

  • Creating arrays and accessing elements by index
  • The length property and common mutator methods (push, pop, shift, unshift)
  • Functional iteration: map, filter, reduce, forEach
  • Searching with find, some, every, includes
  • Spread syntax (...) and array destructuring

Concept

What Is an Array?

An array is an ordered, indexed list of values. In JavaScript, arrays are a special kind of object whose keys are numeric indices.

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);      // "apple"  ← zero-indexed
console.log(fruits.length);  // 3

Adding and Removing Elements

const stack = [];
stack.push("a");      // add to end → ["a"]
stack.push("b");      // ["a", "b"]
stack.pop();          // remove from end → ["a"]

const queue = [1, 2, 3];
queue.shift();        // remove from front → [2, 3]
queue.unshift(0);     // add to front → [0, 2, 3]

The Big Three: map, filter, reduce

These functional methods are the heart of modern JavaScript data processing. They do not mutate the original array.

  • map — transform every element into a new array of the same length.
  • filter — keep only elements that pass a test.
  • reduce — accumulate all elements into a single value.
const numbers = [1, 2, 3, 4, 5];

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

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

const total = numbers.reduce((sum, n) => sum + n, 0);
// 15

Searching and Testing

const users = [
  { name: "Ada", age: 36 },
  { name: "Alan", age: 41 },
];

users.find((u) => u.name === "Ada");     // { name: "Ada", age: 36 }
users.some((u) => u.age > 40);           // true — at least one
users.every((u) => u.age > 30);          // true — all of them
[1, 2, 3].includes(2);                   // true

Spread and Destructuring

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b]; // [1, 2, 3, 4]

const [first, second] = [10, 20]; // first=10, second=20

The spread operator ... is also the standard way to copy an array without mutating the original: const copy = [...original];.

Example

              const products = [
  { name: "Laptop", price: 999, inStock: true },
  { name: "Phone", price: 699, inStock: true },
  { name: "Tablet", price: 399, inStock: false },
  { name: "Monitor", price: 249, inStock: true },
];

// filter: only items in stock
const available = products.filter((p) => p.inStock);

// map: extract just the names
const names = available.map((p) => p.name);
console.log("Available:", names);

// reduce: total price of in-stock items
const totalValue = available.reduce((sum, p) => sum + p.price, 0);
console.log("Total inventory value:", totalValue);

// find: first item over $500
const premium = products.find((p) => p.price > 500);
console.log("First premium item:", premium.name);

// spread to add a new product without mutating the original
const withNew = [...products, { name: "Keyboard", price: 79, inStock: true }];
console.log("Count after adding:", withNew.length);

This real example filters in-stock products, maps to names, reduces to a total price, finds the first premium item, and uses spread to add a new product immutably.

Try it

  • JSON Formatter

    Arrays of objects are common API responses — format and inspect them.

  • CSV to JSON

    Convert CSV data into JavaScript arrays of objects.

Common mistakes

The mistake

Off-by-one errors when looping with a classic for loop

The fix

Arrays are zero-indexed, so the last element is at index length - 1. Prefer for...of or functional methods (map, filter) which avoid manual indexing entirely.

The mistake

Mutating an array when you meant to copy it

The fix

Methods like push, sort, and splice mutate in place. Use spread ([...arr]) or non-mutating alternatives like toSorted() (ES2023) when you need to preserve the original.

Related Resources

Related Tools

  • JSON to CSV

    Convert JavaScript-style arrays of objects to CSV.

Related Snippets

Practice JavaScript Arrays

2 exercises

Practice JavaScript Arrays

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors