Arrays

Whether you're showing a list of products, filtering search results, or calculating totals — you'll be working with arrays constantly.

Creating Arrays

const fruits = ["apple", "banana", "cherry"];
const numbers = [1, 2, 3, 4, 5];
const mixed = ["hello", 42, true, null];   // can mix types

// Access items by index (starts at 0)
console.log(fruits[0]);   // "apple"
console.log(fruits[2]);   // "cherry"

// Last item
console.log(fruits[fruits.length - 1]);   // "cherry"

Adding and Removing Items

const colors = ["red", "green"];

colors.push("blue");       // add to the end
console.log(colors);       // ["red", "green", "blue"]

colors.pop();              // remove from the end
console.log(colors);       // ["red", "green"]

colors.unshift("yellow");  // add to the beginning
console.log(colors);       // ["yellow", "red", "green"]

colors.shift();            // remove from the beginning
console.log(colors);       // ["red", "green"]

forEach — loop over items

forEach runs a function once for each item in the array:

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit) => {
  console.log("I like " + fruit);
});
// I like apple
// I like banana
// I like cherry

map — transform items

map creates a new array by transforming each item:

const numbers = [1, 2, 3, 4, 5];

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

const prices = [9.99, 14.99, 4.99];
const withTax = prices.map((price) => (price * 1.2).toFixed(2));
console.log(withTax);   // ["11.99", "17.99", "5.99"]

filter — keep matching items

filter creates a new array with only the items that pass a test:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

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

const scores = [45, 82, 67, 91, 38, 74];
const passing = scores.filter((score) => score >= 60);
console.log(passing);   // [82, 67, 91, 74]

reduce — combine into one value

reduce condenses an array into a single value:

const numbers = [1, 2, 3, 4, 5];

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

const cart = [
  { name: "Shirt", price: 29.99 },
  { name: "Jeans", price: 59.99 },
  { name: "Shoes", price: 89.99 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total.toFixed(2));   // "179.97"

find and findIndex

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

// find — returns the first matching item
const user = users.find((u) => u.id === 2);
console.log(user);   // { id: 2, name: "Bob" }

// findIndex — returns the position of the first match
const index = users.findIndex((u) => u.name === "Charlie");
console.log(index);   // 2

includes and indexOf

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.includes("banana"));   // true
console.log(fruits.includes("mango"));    // false

console.log(fruits.indexOf("cherry"));    // 2
console.log(fruits.indexOf("mango"));     // -1 (not found)

sort and reverse

const letters = ["c", "a", "b"];
letters.sort();
console.log(letters);   // ["a", "b", "c"]

const numbers = [10, 1, 5, 3];
// Numbers need a compare function
numbers.sort((a, b) => a - b);   // ascending
console.log(numbers);   // [1, 3, 5, 10]

numbers.reverse();
console.log(numbers);   // [10, 5, 3, 1]

Chaining Methods

You can chain array methods together for powerful one-liners:

const students = [
  { name: "Alice", grade: 88 },
  { name: "Bob", grade: 55 },
  { name: "Charlie", grade: 92 },
  { name: "Dana", grade: 45 },
];

// Get names of students who passed, sorted alphabetically
const passed = students
  .filter((s) => s.grade >= 60)
  .sort((a, b) => a.name.localeCompare(b.name))
  .map((s) => s.name);

console.log(passed);   // ["Alice", "Charlie"]

Try It Yourself