glunty

JavaScript Array Methods

A searchable reference of JavaScript array methods and what each one does.

Method What it does
arr.forEach(fn) Run a function once for each element for its side effects; always returns undefined and does not build a new array.
arr.entries() Return an iterator of [index, value] pairs; pair it with for..of to loop over both at once.
arr.keys() Return an iterator of the array indexes as numbers.
arr.values() Return an iterator of the array values in order.
for (const v of arr) Loop directly over the values; you can use break and continue here, unlike forEach.
for (const [i, v] of arr.entries()) Loop over index and value together using the entries iterator.
arr.map(fn) Build a new array by transforming every element with the callback; returns a new array of the same length.
arr.flatMap(fn) Map each element then flatten the result one level; returns a new array.
arr.flat(depth) Flatten nested arrays down to the given depth (default 1); returns a new array.
arr.flat(Infinity) Flatten every nested level into one flat array; returns a new array.
arr.join(sep) Join all elements into a string separated by sep (default comma); returns a string, not an array.
arr.slice(start, end) Copy a section from start up to but not including end; returns a new array and leaves the original alone.
arr.concat(other) Merge one or more arrays or values into a new combined array; returns a new array.
arr.reverse() Reverse the order of elements in place; mutates the array and returns that same array.
arr.toReversed() Return a reversed copy; does not change the original array (added in ES2023).
arr.with(i, value) Return a copy with index i replaced by value; does not change the original (added in ES2023).
arr.fill(value, start, end) Overwrite a range of slots with value; mutates the array and returns it.
arr.copyWithin(target, start, end) Copy part of the array to another position inside itself; mutates the array.
arr.find(fn) Return the first element where the callback is truthy, or undefined if none match.
arr.findLast(fn) Return the last matching element, searching from the end; undefined if none match (ES2023).
arr.findIndex(fn) Return the index of the first matching element, or -1 if none match.
arr.findLastIndex(fn) Return the index of the last matching element, or -1 if none match (ES2023).
arr.indexOf(value) Return the first index whose element strictly equals value, or -1 if absent.
arr.lastIndexOf(value) Return the last index whose element strictly equals value, or -1 if absent.
arr.includes(value) Return true if value is present; unlike indexOf it also matches NaN.
arr.some(fn) Return true if at least one element passes the test; stops at the first match.
arr.every(fn) Return true only if every element passes the test; stops at the first failure.
arr.filter(fn) Build a new array of the elements that pass the test; returns a new array.
arr.filter(Boolean) Drop falsy values such as 0, empty string, null, undefined, NaN, and false; returns a new array.
arr.at(i) Read the element at index i, where negative numbers count back from the end.
arr.push(x) Append one or more elements to the end; mutates the array and returns the new length.
arr.pop() Remove and return the last element; mutates the array and returns undefined when empty.
arr.shift() Remove and return the first element, shifting the rest down; mutates the array.
arr.unshift(x) Add one or more elements to the front; mutates the array and returns the new length.
arr.splice(start, count, ...items) Remove count elements at start and optionally insert items; mutates the array and returns the removed elements.
arr.toSpliced(start, count, ...items) Like splice but returns a new array and leaves the original unchanged (ES2023).
arr.length = n Set length directly to truncate or extend the array; mutates the array in place.
arr.reduce(fn, init) Fold the array into a single value left to right, carrying an accumulator; returns that final value.
arr.reduceRight(fn, init) Same as reduce but walks from right to left; returns the final accumulated value.
arr.sort(compareFn) Sort in place; mutates the array. Without a compare function it sorts by string order, so pass (a, b) => a - b for numbers.
arr.toSorted(compareFn) Return a sorted copy without changing the original; still pass a compare function like (a, b) => a - b for numbers (ES2023).
Array.from(iterable) Build a new array from any iterable or array-like value, such as a Set, Map, or NodeList.
Array.from({ length: n }, (v, i) => i) Build an array of length n from a mapping function; handy for making number ranges.
Array.of(...items) Build a new array from the given arguments, avoiding the single-number quirk of the Array constructor.
Array.isArray(value) Return true if value is a real array; the reliable way to test for array type.
Array(n).fill(value) Create an array of length n with every slot set to value; returns a new array.
[...arr] Spread the elements into a new array literal, giving a quick shallow copy.
[...a, ...b] Spread two arrays into one new combined array without mutating either input.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable quick reference for the JavaScript array methods you reach for every day, grouped by what they are for: iterating, transforming into a new array, searching, adding and removing elements, reducing to a single value, sorting, and creating fresh arrays. Each row pairs the exact call form with a plain-English note on what it does, and it flags whether the method mutates the array in place or returns a brand new array. The whole list is built into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box. Entering reduce jumps straight to reduce and reduceRight; entering mutate surfaces the methods that change the array in place; entering new array highlights the non-mutating ones. The category buttons (Iterate, Transform, Search, Add and remove, Reduce, Sort, Create) narrow the table to one family and combine with the text filter, so you can pick Transform and type flat to compare flat and flatMap. Clear the box to see the full sheet again.

Common use cases

  • Recalling whether a method like splice mutates or a method like slice returns a copy.
  • Picking the right search method: find for one item, filter for many, some or every for a yes or no.
  • Looking up the modern ES2023 methods toSorted, toSpliced, toReversed, and with for immutable-friendly code.
  • Remembering the numeric compare function for sort: (a, b) => a - b.
  • Reviewing the core array toolkit before an interview or while learning JavaScript.

Common pitfalls

  • sort mutates and sorts as text by default. arr.sort() changes the array in place and orders elements by their string form, so [10, 2, 1] becomes [1, 10, 2]. Pass a compare function such as (a, b) => a - b for numbers, and use toSorted when you want to leave the original untouched.
  • forEach cannot break. There is no way to stop forEach early with break or return out of the loop. If you need to exit as soon as a condition is met, use a for..of loop, or some and every, which short-circuit.
  • Mutating versus non-mutating pairs. Several methods come in two flavors: reverse vs toReversed, sort vs toSorted, and splice vs toSpliced. The plain name mutates the array; the to version returns a new one. Mixing them up is a frequent source of surprising shared-state bugs.
  • Sparse arrays behave oddly. Arrays with holes, such as the gaps left by new Array(3) or by deleting an index, are treated inconsistently: methods like forEach and map skip empty slots, while join and the spread syntax treat them as undefined. Prefer Array.from({ length: n }, ...) or fill to build dense arrays.

Frequently asked questions

Which array methods mutate the array?
These methods change the array in place: push, pop, shift, unshift, splice, sort, reverse, fill, and copyWithin. Assigning to arr.length also mutates. Everything else, including map, filter, slice, concat, and the newer toSorted, toSpliced, toReversed, and with, returns a new array and leaves the original untouched. When in doubt, assume a method is non-mutating unless it is one of that short mutating list.
What is the difference between map and forEach?
map builds and returns a new array by transforming every element, so you use it when you want a result. forEach returns undefined and is only for running side effects, such as logging or pushing into another structure. If you assign the result of forEach to a variable you get undefined, which is a common mistake, so reach for map when you need the transformed values.
What is the difference between filter and find?
filter returns a new array of every element that passes the test, so the result can hold zero, one, or many items. find returns only the first element that passes, or undefined if nothing matches, and it stops as soon as it finds one. Use find when you want a single matching value and filter when you want the full matching set.
What does reduce do?
reduce folds an array into a single value by running a callback for each element while carrying an accumulator. On each step you return the new accumulator, and the final return value is the result. It can sum numbers, build an object, flatten data, or group items; always pass a sensible initial value as the second argument to avoid surprises on empty arrays.
Why is sort not sorting numbers correctly?
By default sort converts every element to a string and orders them by character codes, so 10 sorts before 2 because the character 1 comes before 2. To sort numbers, pass a compare function: arr.sort((a, b) => a - b) gives ascending order. Remember that sort also mutates the array, so use toSorted if you need to keep the original order.
What are the new toSorted, toSpliced, with, and toReversed methods?
They are the non-mutating counterparts added in ES2023. toSorted, toReversed, and toSpliced do the same work as sort, reverse, and splice but return a new array instead of changing the original, and with returns a copy with one index replaced. They make it easy to work with immutable data without spreading into a copy first, and they are supported in modern browsers and current Node versions.
Does this cheat sheet send anything to a server?
No. The whole method list is baked into the page and every search and filter runs locally in your browser with JavaScript, so nothing you type leaves your device. Open your browser DevTools and watch the Network tab while you use it to confirm there are zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com