Back to Home
JavaScript logoJavaScript INTERMEDIATE

JavaScript Array Methods

JavaScript array methods cheat sheet with map, filter, reduce, find, sort, and practical code examples for data transformation.

5 min read
javascriptarraysmethodses6

Other JavaScript Sheets

Async JavaScriptINTERMEDIATEAxiosINTERMEDIATEDOM ManipulationBEGINNERFetch APIINTERMEDIATEJavaScriptBEGINNERJavaScript Regular ExpressionsINTERMEDIATEJavaScript String MethodsINTERMEDIATE

Transformation Methods

Transform arrays into new arrays with modified data

map() - Transform Elements

Create a new array by transforming each element

javascript
🟢 Essential - Most commonly used array method
💡 Returns new array, doesn't modify original
⚡ Perfect for data transformation and React rendering
📌 Always returns array of same length as original
🔗 Related: forEach (for side effects), filter (for selection)

filter() - Select Elements

Create a new array with elements that pass a test

javascript
🟢 Essential - Use for selecting subset of elements
💡 Returns new array with filtered items
⚡ Chainable with other array methods
📌 Original array remains unchanged
⚠️ Returns empty array if nothing matches

reduce() - Aggregate Values

Reduce array to single value using accumulator

javascript
🔴 Advanced - Powerful but complex method
💡 Can return any type: number, string, object, array
⚡ Use for sums, counts, grouping, flattening
⚠️ Always provide initial value to avoid errors
📌 Accumulator carries value between iterations

Searching & Testing

Find elements and test array conditions

find() & findIndex()

Find first element matching condition or its index

javascript
🟢 Essential - Better than filter()[0] for single item
💡 find() returns element, findIndex() returns index
⚡ Stops searching after first match (efficient)
⚠️ Returns undefined/-1 if nothing found
📌 Use findLast() for searching from end (ES2023)

some() & every()

Test if any/all elements pass a condition

javascript
💡 Returns boolean, not array elements
⚡ some() stops at first true (OR logic)
⚡ every() stops at first false (AND logic)
📌 Empty array: some() returns false, every() returns true
🔗 Related: includes() for simple value checking

includes() & indexOf()

Check if array contains a value or find its position

javascript
🟢 Essential - Simple value checking
💡 includes() returns boolean, indexOf() returns position
⚡ Use includes() for existence check (cleaner)
⚠️ Uses strict equality (===) for comparison
📌 indexOf() returns -1 if not found

Array Manipulation

Add, remove, and rearrange array elements

Adding & Removing Elements

Methods to add and remove array elements

javascript
🟢 Essential - Core array operations
⚠️ push/pop/shift/unshift MUTATE the array
💡 push/pop work on end (fast), shift/unshift on start (slower)
⚡ Use spread [...arr, item] for immutable operations
📌 All mutating methods return different values

slice() & concat()

Extract portions and combine arrays without mutation

javascript
🟢 Essential - Safe array operations
💡 slice() extracts portion, concat() combines arrays
⚡ Both return new arrays (immutable)
📌 Negative indices count from end
🔗 Use spread [...arr1, ...arr2] as modern concat

sort() & reverse()

Sort and reverse array elements in place

javascript
⚠️ Both MUTATE the original array
💡 Use [...arr].sort() to avoid mutation
🔴 sort() converts to strings by default (10 < 2)
📌 Provide compare function for numbers: (a, b) => a - b
⚡ toSorted() and toReversed() are immutable (ES2023)

Iteration Methods

Loop through arrays and process elements

forEach() - Side Effects

Execute function for each element (side effects only)

javascript
💡 Use for side effects (logging, DOM updates)
⚠️ Cannot break/return early like for loop
📌 Returns undefined, not chainable
🔗 Use map() if you need transformed array
⚡ Skips empty slots in sparse arrays

join() & Array/String Conversion

Convert array to string and vice versa

javascript
🟢 Essential - Common for display and parsing
💡 join() array→string, split() string→array
📌 Default separator is comma for join()
⚡ Use template literals for complex formatting
🔗 Related: toString() for simple conversion

flat() & flatMap()

Flatten nested arrays and map-then-flatten

javascript
💡 flat() removes nesting levels (default: 1)
⚡ flatMap() = map() + flat(1) in one pass
📌 Use Infinity to flatten all levels
🔗 Great for handling nested data structures
⚠️ Removes empty slots from arrays

Array Creation & Conversion

Create new arrays and convert between types

Array.from() & Array.of()

Create arrays from array-like objects or iterables

javascript
💡 Array.from() converts iterables to arrays
⚡ Second parameter maps elements during creation
📌 Array.of() creates array from arguments
🔗 Useful for NodeList, arguments, Set, Map
🟢 Essential for DOM manipulation

fill() & copyWithin()

Fill array with values or copy elements within

javascript
⚠️ Both methods MUTATE the array
💡 fill() sets multiple elements to same value
📌 copyWithin() copies part to another position
⚡ Useful for array initialization
🔴 Be careful with object references in fill()

Modern Array Methods (ES2023+)

Immutable variants, findLast, fromAsync, and grouping (ES2023+)

Immutable Variants: toSorted, toReversed, toSpliced, with

Non-mutating versions of sort/reverse/splice and indexed update

javascript
💡 Same shape as sort/reverse/splice — just prefixed with `to` (and `with` for indexed set)
📌 Always returns a new array — safe for React/Redux state, signals, etc.
⚡ Replaces the [...arr].sort() / structuredClone copy-then-mutate idiom
🎯 `with(-1, x)` is the cleanest way to "replace the last element"
es2023immutablemodern

findLast & findLastIndex

Search from the end — perfect for "most recent matching"

javascript
💡 Iterates from the end — early-returns on first match like find()
⚡ Way cheaper than `[...arr].reverse().find(...)` on large arrays
📌 findLastIndex returns -1 on no match — same convention as findIndex
🎯 Pair with `with()` for "update the most recent matching item"
es2023search

Array.fromAsync & Grouping

Build arrays from async iterables, group by key (Object.groupBy / Map.groupBy)

javascript
💡 Array.fromAsync replaces the manual `for await ... push` loop
⚡ Object.groupBy returns a null-prototype object — no .hasOwnProperty needed
📌 Map.groupBy is the version to use when keys are objects, not strings
🎯 Pair fromAsync with fetch + ReadableStream for clean streaming-to-array code
es2024asyncgrouping

More JavaScript Cheat Sheets

Async JavaScript

INTERMEDIATE8 min

Fetch API

INTERMEDIATE5 min

JavaScript String Methods

INTERMEDIATE5 min