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()

More JavaScript Cheat Sheets

Async JavaScript

INTERMEDIATE8 min

Fetch API

INTERMEDIATE5 min

JavaScript String Methods

INTERMEDIATE5 min