JavaScript Array Methods

Array methods are built-in functions that work on lists. Instead of writing a loop to change every item, you call one method and describe what you want. The code is shorter, and it says what the step does, not how the loop moves. Once these click, you will reach for them constantly.

map transforms every item and returns a new array. filter keeps only the items that pass a test and returns a new array. forEach visits each item for a side effect, like printing it, and returns nothing. Each method takes a function that runs once per item, and that function decides what happens.

The modern way to write these functions is with arrow syntax. The arrow replaces the word function, and when the body is one expression it returns automatically. Read the arrow as "turns into": item => item * 2 means each item turns into its double. This pairing, array methods plus arrows, is the heart of modern JavaScript data work.

map turns every item into something new

map builds a new array with the same length, where each slot holds the result of the function for that item. The original array is untouched. Doubling prices, uppercasing names, and pulling one field out of a list of objects are the classic uses.

const prices = [10, 25, 40];
const doubled = prices.map((price) => price * 2);
console.log(doubled); // [20, 50, 80]

filter keeps only the items that pass

filter runs a test on every item and keeps the ones where the test returns true. The new array can be shorter or even empty. Returning a boolean from the arrow is the whole job: true keeps the item, false drops it.

const numbers = [3, 8, 12, 5];
const big = numbers.filter((n) => n > 6);
console.log(big); // [8, 12]

reduce collapses a list into one value

reduce walks the array and carries an accumulator forward. It is the general tool for totals, sums, and grouping. The arrow takes the running value and the current item, and returns the next running value. The second argument is where the run starts, almost always 0.

const cart = [1200, 450, 300];
const total = cart.reduce((sum, price) => sum + price, 0);
console.log(total); // 1950

Syntax

const items = [
  { name: "shirt", price: 1200, inStock: true },
  { name: "socks", price: 250, inStock: false },
  { name: "hat", price: 900, inStock: true }
];

const inStock = items.filter((item) => item.inStock);
const names = inStock.map((item) => item.name);
console.log(names); // ["shirt", "hat"]

Array.from({length:5}, (_,i)=>i)