01 · Definition

ArrayMethods
in JS

Array methods are built-in functions on the Array.prototype that let you transform, search, and iterate over arrays in a clean, declarative style — without manual loops. 

const nums = [1, 2, 3, 4, 5];
const evens  = nums.filter(n => n % 2 === 0);  // [2, 4]
const doubled = evens.map(n => n * 2);         // [4, 8]
const sum     = doubled.reduce((a, b) => a + b, 0); // 12
Original
[1,2,3,4,5]
→
filter / map
[4, 8]
→
reduce
12
Chaining filter → map → reduce transforms data without mutating the original array.
02 · Mechanics

How They Work

Most array methods accept a callback function and iterate over each element, passing (element, index, array). Non-mutating methods return a new array, keeping the original intact. 

const words = ["hello", "world", "js"];
const upper = words.map((w, i) => `${i}:${w.toUpperCase()}`);
// ["0:HELLO", "1:WORLD", "2:JS"]
03 · Common Methods

Practical Uses

map() — Transform Elements
Returns a new array with each element transformed by the callback. Great for converting data shapes — e.g. extracting a property from an array of objects.
filter() — Select Elements
Returns a new array containing only elements for which the callback returns true. Use it to remove unwanted items without touching the original array.
reduce() — Accumulate a Value
Folds an array into a single value (sum, object, nested structure) by running a reducer function with an accumulator across every element.
find() / findIndex() — Search
find() returns the first matching element; findIndex() returns its index. Both short-circuit on the first match, making them efficient for large arrays.
forEach() — Side Effects
Iterates over every element for side effects (logging, DOM updates). Unlike map(), it returns undefined — don't use it when you need a new array.