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 === '[email protected]');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.As we navigate the modern web of 2026, JavaScript's array methods have become the primary tool for functional, declarative data manipulation. Whether you're building a high-performance React component, managing state in a complex application, or processing large datasets in a Node.js environment, the ability to efficiently use methods like map(), filter(), and reduce() is essential. Our guide provides a comprehensive, interactive reference for the most common array methods, helping you write cleaner, more maintainable code that follows the latest ECMAScript standards.
A major focus in 2026 is the distinction between "Mutating" and "Non-Mutating" methods. With the rise of immutable state management patterns, understanding which methods modify the original array (like splice() or push()) and which return a new array (like slice() or concat()) is critical for preventing bugs and ensuring predictable application behavior. Our guide clearly categorizes these methods, providing clear examples and performance tips for each. By prioritizing non-mutating methods where possible, you create more resilient and easier-to-debug applications.
Finally, consider the role of "Performance at Scale." While methods like forEach() are intuitive, modern engines are highly optimized for higher-order functions like map() and filter(). In our "Local-First" environment, we encourage you to experiment with different methods and see how they impact your data in real-time. By combining this reference with other AllOmnitools like the JS Minifier, you have a complete toolkit for building fast, professional, and high-performance JavaScript applications in 2026.
Zero server lag. All method references and code examples are available instantly for your workflow.
Your search queries and development preferences remain private. We never track or store your coding data.
map() creates a new array by applying a function to every element of the original array. forEach() simply executes a function on each element and returns undefined. Use map() when you need the transformed data.
Common mutating methods include push(), pop(), shift(), unshift(), splice(), sort(), and reverse(). Always be careful when using these with shared state.
reduce() executes a reducer function on each element of the array, resulting in a single output value (like a sum, a combined string, or a transformed object). It's one of the most powerful and flexible array methods.
Yes. AllOmnitools is "local-first." We provide the information and code snippets locally in your browser. You never need to submit your proprietary code to our servers.
Use find() to get the first matching element, findIndex() for its index, includes() for a boolean check, and filter() to get *all* matching elements.
Yes. All methods covered in our guide are part of the modern ECMAScript standards and are supported in all current browsers and Node.js versions.