Quick reference for map, filter, reduce, and more — with copy-paste examples
Creates a new array by calling a function on every element in the original array. Does not mutate the original.
const doubled = numbers.map(n => n * 2);const names = users.map(u => u.name);map() when you need to transform data. Avoid mutating the original array — it returns a new one.Creates a new array with all elements that pass the test implemented by the provided function.
const evens = numbers.filter(n => n % 2 === 0);const active = users.filter(u => u.active);filter() returns a subset. Original array is unchanged.Executes a reducer function on each element, resulting in a single output value. Extremely flexible.
const sum = numbers.reduce((acc, n) => acc + n, 0);const max = numbers.reduce((a, b) => Math.max(a, b));Works like reduce() but starts from the last element and moves backward.
const flattened = [].concat(...arrays.reduceRight((a, b) => [b, ...a]));Returns the first element that satisfies the provided testing function. Returns undefined if none found.
const user = users.find(u => u.id === 123);find() when you expect at most one match. Use filter() for multiple matches.Returns the index of the first element that satisfies the testing function. Returns -1 if not found.
const idx = users.findIndex(u => u.email === 'test@example.com');Determines whether an array includes a certain value among its entries. Simple and readable.
const hasAdmin = roles.includes('admin');=== for comparison. For objects, checks reference equality, not content.Returns the first index at which a given element can be found. Returns -1 if not present.
const idx = items.indexOf('apple');indexOf() uses === and does not work with NaN. Use findIndex() for complex checks.Returns the last index at which a given element can be found. Searches backwards from the end.
const last = data.lastIndexOf('error');Tests whether at least one element passes the test. Short-circuits on first match (efficient).
const hasAdult = users.some(u => u.age >= 18);filter().length > 0.Tests whether all elements pass the test. Short-circuits on first failure.
const allActive = users.every(u => u.active);every() returns true for empty arrays (vacuous truth).arr.push(x) ← returns new length
arr.pop() ← returns removed element
arr.unshift(x) ← returns new length
arr.shift() ← returns removed element
slice(), concat(), or spread for immutable patterns.Returns a shallow copy of a portion of an array. Does not modify the original.
const first3 = arr.slice(0, 3); // [0, 3)const tail = arr.slice(1); // from index 1 to endconst copy = arr.slice(); // clone entire arrayChanges array contents by removing/replacing existing elements and/or adding new ones. Mutates original. Returns removed elements.
// Remove 1 element at index 2
const removed = arr.splice(2, 1);// Insert without removing
arr.splice(2, 0, 'new');// Replace 1 element at index 1
arr.splice(1, 1, 'replacement');splice() alters the source array. Use slice() for non-destructive.Merges two or more arrays. Returns a new array. Does not mutate originals.
const merged = arr1.concat(arr2, arr3);const withExtra = arr.concat('a', 'b');[...arr1, ...arr2]. concat() also flattens one level automatically.Joins all elements into a string, separated by the specified separator. Default separator is comma.
const csv = arr.join(',');const sentence = words.join(' ');const path = parts.join('/');Splits a string into an array of substrings using the specified separator. String method, not Array method.
const parts = 'a,b,c'.split(',');const words = sentence.split(' ');split() is on String.prototype, not Array. Remember: arrays use join(), strings use split().Reverses the array in place. Mutates original and returns it.
const reversed = arr.slice().reverse(); // safe: copy firstreverse() mutates. To avoid side effects: [...arr].reverse() or arr.slice().reverse().Sorts array elements in place. Default sort is lexicographic (string) order. Always provide a compare function for numbers.
// Numeric ascending
arr.sort((a, b) => a - b);// Descending
arr.sort((a, b) => b - a);// By property
users.sort((a, b) => a.name.localeCompare(b.name));sort() mutates. For immutable: [...arr].sort(compare). Default sort breaks numbers: [10,2,1].sort() → [1,10,2].Executes a provided function once for each array element. No return value (undefined). Cannot be chained.
users.forEach(u => console.log(u.name));arr.forEach((val, idx, array) => { /* ... */ });forEach() for side effects only. For transformations, use map(). Cannot break early — use for...of or some() if you need to exit early.for (const [i, v] of arr.entries()) { }
for (const i of arr.keys()) { }
for (const v of arr.values()) { }
for...of or Array.from(). entries() gives [index, value] pairs.arr.length — number of elementslength truncates or extends array.
Determines whether the passed value is an array. Safer than instanceof Array (works across frames).
if (Array.isArray(value)) { /* safe */ }typeof [] === 'object' — always use Array.isArray() to reliably detect arrays.flat() creates a new array with all sub-array elements concatenated recursively. flatMap() maps then flattens one level.
const flat = nested.flat(); // depth=1 defaultconst deep = nested.flat(2); // depth 2const result = arr.flatMap(x => [x, x * 2]);flatMap(flatMap) is faster than map().flat(). Great for 1-to-many transformations.The JavaScript Array Methods cheat sheet provides quick, searchable reference for the most common array methods. Each method includes syntax, practical examples, copy-paste code, and usage tips. Whether you're deciding between map() vs forEach(), or need a quick reduce() example, this guide has you covered.
map() transforms each element. filter() selects a subset. Both return new arrays.
reduce() rolls up array into single value: sum, product, object, or anything custom.
find() returns first match. includes() checks existence. some()/every() for boolean tests.
slice() non-destructive. splice() mutates. concat() merges. sort()/reverse() mutate.
map() returns a new array with transformed values and is chainable. forEach() returns undefined and is meant for side effects only (logging, mutating external vars). Use map() for data transformation, forEach() for iteration with side effects.
Default sort() converts elements to strings and compares lexicographically, so [10, 2, 1].sort() gives [1, 10, 2]. Always provide a compare function: arr.sort((a,b) => a - b) for numeric ascending.
Use reduce() when you need to combine array elements into a single value — sum, max, min, product, frequency map, grouping, or flattening. It's the most powerful but also most complex array method. If a simpler method (map, filter, find) fits, use that instead for readability.
Yes, completely free with no sign-up required.