forEach — Loop Through Every Item
forEach runs a function once for each item in the array. It does not return a new array — it is used purely for side effects like logging or updating the DOM.
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit, index) {
console.log(index + ': ' + fruit);
});
// 0: apple
// 1: banana
// 2: cherryUse forEach when: You want to do something with each item (log, update DOM, send a request) but do NOT need a transformed array back.
map — Transform Every Item
map creates a new array by running a function on every item. The original array is not modified. This is one of the most used methods in React and modern JavaScript.
const numbers = [1, 2, 3, 4, 5];
// Double every number
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Real-world: transform API data
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob']Use map when: You want a new array of the same length where each item has been transformed.
filter — Keep Only Matching Items
filter creates a new array containing only the items where your function returns true. Items that return false are removed. The original array is not modified.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
// Keep only even numbers
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8]
// Real-world: filter active users
const users = [
{ name: 'Alice', active: true },
{ name: 'Bob', active: false },
{ name: 'Carol', active: true }
];
const activeUsers = users.filter(user => user.active);
// [{name:'Alice',active:true},{name:'Carol',active:true}]Use filter when: You want a subset of the array — items that meet a certain condition.
reduce — Accumulate Into One Value
reduce collapses an array into a single value — a number, string, object, or even another array. It takes a callback with two arguments: accumulator (the running result) and currentValue (the current item).
const prices = [10, 25, 5, 40, 15];
// Sum all prices
const total = prices.reduce((acc, price) => acc + price, 0);
console.log(total); // 95
// Real-world: group by category
const items = [
{ name: 'Apple', type: 'fruit' },
{ name: 'Carrot', type: 'veggie' },
{ name: 'Banana', type: 'fruit' }
];
const grouped = items.reduce((acc, item) => {
if (!acc[item.type]) acc[item.type] = [];
acc[item.type].push(item.name);
return acc;
}, {});
// { fruit: ['Apple','Banana'], veggie: ['Carrot'] }Always pass the initial value (the second argument to reduce) to avoid unexpected errors with empty arrays or the first item being used as accumulator.
find & findIndex
find returns the first item that matches your condition (or undefined if none match). findIndex returns the index of that item (or -1 if not found).
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Carol' }
];
const bob = users.find(user => user.id === 2);
console.log(bob); // { id: 2, name: 'Bob' }
const bobIndex = users.findIndex(user => user.id === 2);
console.log(bobIndex); // 1some & every
some returns true if at least one item passes the test. every returns true only if all items pass the test. Both return a boolean.
const ages = [18, 22, 15, 30, 17];
const hasMinor = ages.some(age => age < 18); // true (15 and 17)
const allAdults = ages.every(age => age >= 18); // false (15, 17 fail)
const scores = [85, 90, 78, 92];
const allPassed = scores.every(score => score >= 70); // truesort — Reorder Items
sort sorts items in place (modifies the original array). By default it converts items to strings and sorts alphabetically, which breaks numeric sorting. Always provide a compare function for numbers.
// Strings: default sort works fine
const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']
// Numbers: ALWAYS use a compare function
const nums = [10, 1, 25, 5, 100];
nums.sort((a, b) => a - b); // ascending
console.log(nums); // [1, 5, 10, 25, 100]
nums.sort((a, b) => b - a); // descending
console.log(nums); // [100, 25, 10, 5, 1]includes & indexOf
includes returns true or false — the modern, readable way to check if an item exists. indexOf returns the index of the first match (or -1) — useful when you need the position.
const colors = ['red', 'green', 'blue'];
console.log(colors.includes('green')); // true
console.log(colors.includes('yellow')); // false
console.log(colors.indexOf('blue')); // 2
console.log(colors.indexOf('purple')); // -1Quick Reference Table
| Method | Returns | Mutates Original? | Best For |
|---|---|---|---|
| forEach | undefined | No | Side effects (log, DOM update) |
| map | New array (same length) | No | Transforming every item |
| filter | New array (shorter) | No | Getting items that match a condition |
| reduce | Single value (any type) | No | Summing, grouping, accumulating |
| find | First matching item | No | Getting one specific item |
| findIndex | Index of first match | No | Finding position of an item |
| some | Boolean | No | Checking if any item matches |
| every | Boolean | No | Checking if all items match |
| sort | Sorted array (in place) | Yes | Reordering items |
| includes | Boolean | No | Checking if item exists |
| indexOf | Number (index or -1) | No | Finding position of item |