JavaScript Array Methods Cheat Sheet: Every Method with Examples

Originally published on DevToolsHub — free, privacy-first online tools for developers. JavaScript arrays are everywhere. Whether you're transforming API responses, filtering user input, or building complex data pipelines, array methods are the tools you reach for daily. But with over 30 methods on Array.prototype, it's easy to lose track of which method does what, what it returns, and whether it mutates the original array. This cheat sheet covers every major array method — from the classics like `push()` and `map()` to the newest ES2023 additions like `toSorted()`, `toReversed()`, and `with()`. Methods are grouped by category so you can quickly find what you need. ⚡ Quick Tip Use our JSON Formatter to inspect API responses that contain arrays, and our Base64 Encoder/Decoder for decoding token payloads that use array-like structures. Quick Legend Throughout this guide, each method table includes the following columns: - **Method** — The method name and its parameters - **Description** — What the method does - **Returns** — The return value type - **Mutates?** — Whether it modifies the original array - **Example** — A concise code snippet 1. Mutator Methods Mutator methods **change the original array**. Use them when you want to modify data in place. Be careful — these can lead to unintended side effects if referenced elsewhere in your code. Adding & Removing Elements Method Returns Example push(el1, ..., elN) New length of array arr.push(4) // arr → [1,2,3,4] pop() Removed element (or undefined) arr.pop() // returns 3 unshift(el1, ..., elN) New length of array arr.unshift(0) // arr → [0,1,2,3] shift() Removed element (or undefined) arr.shift() // returns 1 splice(start, deleteCount, ...items) Array of removed elements arr.splice(1, 0, 'a') fill(value, start?, end?) Modified array (this) arr.fill(0, 1, 3) copyWithin(target, start, end?) Modified array (this) arr.copyWithin(0, 2) Sorting & Reversing Method Returns Example sort(compareFn?) Modified array (this) arr.sort((a,b) => a - b) reverse() Modified array (this) arr.reverse() ⚠️ sort() Gotcha Without a compare function, sort() converts elements to strings and sorts lexicographically. [10, 2, 1].sort() gives [1, 10, 2] . Always provide a compare function for numeric sorting. 2. Accessor Methods Accessor methods **do not mutate** the original array. They return a new array or value. These are generally safer and more predictable — prefer them over mutators when you don't need in-place modification. Creating New Arrays Method Returns Example concat(arr2, ..., arrN) New concatenated array [1].concat([2, 3]) // [1,2,3] slice(start?, end?) New shallow-copied array arr.slice(1, 3) flat(depth?) New flattened array [[1],[2,[3]]].flat(2) flatMap(fn) New flattened array (depth 1) arr.flatMap(x => [x, x*2]) join(separator?) String arr.join(', ') toString() Comma-separated string arr.toString() toLocaleString() Localized string arr.toLocaleString() Searching & Checking Method Returns Example indexOf(el, fromIndex?) First index, or -1 [1,2,3].indexOf(2) // 1 lastIndexOf(el, fromIndex?) Last index, or -1 [1,2,1].lastIndexOf(1) // 2 includes(el, fromIndex?) Boolean [1,2,3].includes(2) // true find(fn) First matching element, or undefined arr.find(x => x > 2) findIndex(fn) Index of first match, or -1 arr.findIndex(x => x > 2) findLast(fn) Last matching element, or undefined arr.findLast(x => x > 2) findLastIndex(fn) Index of last match, or -1 arr.findLastIndex(x => x > 2) some(fn) Boolean arr.some(x => x > 2) every(fn) Boolean arr.every(x => x > 0) 3. Iterator Methods Iterator methods loop over the array and execute a callback. They are the workhorses of functional JavaScript. All iterator methods return a new value — they never mutate the original array. Method Returns Example forEach(fn) undefined arr.forEach(x => console.log(x)) map(fn) New array (same length) arr.map(x => x * 2) filter(fn) New array (filtered) arr.filter(x => x > 2) reduce(fn, initial?) Accumulated value (any type) arr.reduce((a,b) => a+b, 0) reduceRight(fn, initial?) Accumulated value (right-to-left) arr.reduceRight((a,b)=>a+b) 💡 Chaining Pattern Because most iterator and accessor methods return new arrays, you can chain them: arr .filter(x => x > 0) .map(x => x * 2) .reduce((sum, x) => sum + x, 0) 4. ES2023: The New Wave The 2023 update to ECMAScript introduced three new array methods that return ** new arrays** instead of mutating in place. These are the non-mutating alternatives to `sort()`, `reverse()`, and bracket assignment. Method Returns Example toSorted(compareFn?) New sorted array arr.toSorted() // arr unchanged toReversed() New reversed array arr.toReversed() // arr unchanged with(index, value) New array with element replaced arr.with(1, 99) toSpliced(start, deleteCount?, ...items) New array with splice applied arr.toSpliced(1, 1, 42) 💡 Immutable Arrays The ES2023 methods make it easy to work immutably. Instead of arr.sort() which mutates, use arr.toSorted() which returns a copy. This is especially useful in React and Redux where immutability is required. 5. Static Methods These are methods on the `Array` constructor itself, not on instances. Method Returns Example Array.from(arrayLike, mapFn?) New array from iterable/array-like Array.from('abc') // ['a','b','c'] Array.of(...items) New array from arguments Array.of(1, 2, 3) Array.isArray(value) Boolean Array.isArray([]) // true 6. Practical Examples Removing Duplicates const arr = [1, 2, 2, 3, 3, 4]; const unique = [...new Set(arr)]; // [1, 2, 3, 4] Grouping Objects by Property const users = [ , , , ]; const grouped = users.reduce((acc, user) => { (acc[user.role] = acc[user.role] || []).push(user); return acc; }, ); // Deep Flattening const nested = [1, [2, [3, [4]]]]; nested.flat(Infinity); // [1, 2, 3, 4] Safe Sorting (Immutably) const arr = [3, 1, 4, 1, 5]; const sorted = arr.toSorted((a, b) => a - b); // sorted = [1, 1, 3, 4, 5] // arr = [3, 1, 4, 1, 5] (unchanged!) 7. Performance Notes - **push/pop** are O(1) — fastest way to add/remove from end. - **shift/unshift** are O(n) — they re-index all elements. - **splice** is O(n) in worst case due to re-indexing. - **filter/map** create new arrays — chaining many of them uses more memory. For performance-critical paths, consider a single `reduce()` or a loop. - **flat(Infinity)** is convenient but slow for deeply nested arrays. Use iterative flattening for large datasets. - **sort()** uses Timsort (O(n log n)) and is stable as of ES2019. 8. Quick Reference Table All methods at a glance. **M** = Mutator, **A** = Accessor, **I** = Iterator. Cat Method Returns M push() New length M pop() Removed element M unshift() New length M shift() Removed element M splice() Removed elements array M sort() Modified array M reverse() Modified array M fill() Modified array M copyWithin() Modified array A concat() New array A slice() New array A flat() New array A flatMap() New array A join() String A indexOf() Index or -1 A includes() Boolean A find() Element or undefined A findIndex() Index or -1 A some() Boolean A every() Boolean I forEach() undefined I map() New array I filter() New array I reduce() Accumulated value N toSorted() New array N toReversed() New array N with() New array N toSpliced() New array Browser Support All methods covered here are well-supported in modern browsers: - **ES2023 methods** (toSorted, toReversed, with, toSpliced): Chrome 110+, Firefox 115+, Safari 16.4+, Node 20+ - **ES2019+ methods** (flat, flatMap): Chrome 69+, Firefox 62+, Safari 12+, Node 11+ - **All others**: Supported everywhere including IE9+ (with polyfills for `find`, `findIndex`) Common Mistakes & How to Avoid Them Even experienced developers trip over these array method gotchas. Here are the five most common pitfalls and how to dodge them. 1. Forgetting That sort() Sorts Strings by Default `sort()` converts every element to a string before comparing, so `[10, 2, 1].sort()` returns `[1, 10, 2]` — not the numeric order you expected. Always pass a comparator for numbers: [10, 2, 1].sort((a, b) => a - b); // [1, 2, 10] 2. Mutating an Array While Iterating Over It Calling splice() inside a forEach() loop shifts the indexes of every remaining element, which causes items to be silently skipped. Instead of removing elements in place, build a new array with filter() — it is safer and easier to reason about. Using map() for Side Effects map() exists to transform data and always returns a new array. If you only need to run side effects like logging or DOM updates, use forEach() instead. Calling map() and discarding its return value allocates an unused array and signals the wrong intent to readers. filter(Boolean) Silently Drops Falsy Values filter(Boolean) is a popular one-liner, but it also removes 0, "", and NaN. When those values are meaningful data, use an explicit predicate such as x => x !== null && x !== undefined. map() Skips Holes in Sparse Arrays Array(3).map(x => 1) returns an array of empty holes, not [1, 1, 1]. Create a dense array first with Array.from() or [...Array(3)] before mapping over it. Frequently Asked Questions What is the difference between map() and forEach()? map() builds and returns a new array with the same length, transformed by the callback. forEach() runs the callback for side effects and returns undefined. Use map() when you need the transformed result, and forEach() when you only need to perform an action. Neither can be stopped early with break — use a for...of loop if you need early exit. How do I remove duplicates from an array? The simplest approach is to spread a Set: [...new Set(arr)]. This preserves insertion order and works for primitives. For arrays of objects, dedupe by a key with a Map or a Set of ids instead of relying on reference equality. What is the difference between slice() and splice()? slice(start, end) returns a new array containing a copy of a portion of the original, without modifying it. splice(start, deleteCount, ...items) removes or replaces elements in the original array and returns the removed elements. Remember: slice copies, splice mutates. If you need the non-mutating version of splice, use toSpliced(). Why does sort() return an unexpected order for numbers? The default sort() converts elements to strings and compares them lexicographically, so 10 comes before 2. Pass a numeric comparator like (a, b) => a - b to sort numbers correctly, or use toSorted() when you want to keep the original array unchanged. How do I check if an array contains a value? Use includes(value) for a simple boolean check, or indexOf(value) when you also need the position. Both use strict equality, so neither can find NaN — use some(x => Number.isNaN(x)) for that case, and find() with a predicate when searching for objects by property. 🔍 Related Resources Check out our JSON Formatter and Base64 Encoder/Decoder for more dev tools. Also read our JSON Formatting Guide for data debugging tips.