JavaScript Array Methods Cheat Sheet: The Only Guide You Need

A solid understanding of these will level up your JavaScript skills. Save this for quick reference! 🚀

Mutator Methods (Modify the original array)

1. push(element1, ..., elementN) Adds elements to the end. Returns: New length.

arr.push(5); // [1,2,3] → [1,2,3,5]

1. pop() Removes the last element. Returns: Removed element.

arr.pop(); // [1,2,3] → [1,2]

1. shift() Removes the first element. Returns: Removed element.

arr.shift(); // [1,2,3] → [2,3]

1. unshift(element1, ..., elementN) Adds elements to the start. Returns: New length.

arr.unshift(0); // [1,2,3] → [0,1,2,3]

1. splice(start, deleteCount, ...items) Adds/removes elements at start index. Returns: Array of removed elements.

arr.splice(1, 1, 'a'); // [1,2,3] → [1,'a',3]

1. sort([compareFunction]) Sorts elements (lexicographically by default). Returns: Sorted array (mutates original).

arr.sort((a, b) => a - b); // [3,1,2] → [1,2,3]

1. reverse() Reverses the array. Returns: Reversed array (mutates original).

arr.reverse(); // [1,2,3] → [3,2,1]

1. fill(value, start?, end?) Fills array with value between start and end.

arr.fill(0); // [1,2,3] → [0,0,0]

1. copyWithin(target, start, end?) Copies elements within the array.

[1,2,3,4].copyWithin(0, 2); // → [3,4,3,4]

Accessor Methods (Return new data without modifying the array)

1. concat(…arrays) Merges arrays. Returns: New merged array.

arr.concat([4,5]); // [1,2,3] → [1,2,3,4,5]

1. slice(start?, end?) Returns subarray between start and end.

arr.slice(1, 3); // [1,2,3,4] → [2,3]

1. join(separator?) Joins elements into a string (default: ,).

arr.join('-'); // [1,2,3] → "1-2-3"

1. includes(element) Checks if array contains element. Returns: true/false.

arr.includes(2); // [1,2,3] → true

1. indexOf(element) Returns first index of element or -1.

arr.indexOf(2); // [1,2,3] → 1

1. lastIndexOf(element) Returns last index of element or -1.

[1,2,2,3].lastIndexOf(2); // → 2

1. toString() Same as join().

[1,2,3].toString(); // "1,2,3"

1. toSorted() (ES2023) Non-mutating version of sort().

const sorted = arr.toSorted();

1. toReversed() (ES2023) Non-mutating version of reverse().

const reversed = arr.toReversed();

Iteration Methods

1. forEach(callback) Executes callback for each element. Returns: undefined.

arr.forEach(x => console.log(x));

1. map(callback) Returns new array with transformed elements.

const doubled = arr.map(x => x * 2);

1. filter(callback) Returns elements that pass callback test.

const evens = arr.filter(x => x % 2 === 0);

1. reduce(callback, initialValue?) Reduces array to a single value.

const sum = arr.reduce((acc, x) => acc + x, 0);

1. find(callback) Returns first element passing callback test.

const firstEven = arr.find(x => x % 2 === 0);

1. some(callback) Checks if at least one element passes test. Returns: true/false.

const hasEven = arr.some(x => x % 2 === 0);

1. every(callback) Checks if all elements pass test.

const allEven = arr.every(x => x % 2 === 0);

1. flat(depth = 1) Flattens nested arrays.

[1, [2]].flat(); // → [1,2]

1. flatMap(callback) Maps then flattens the result.

arr.flatMap(x => [x, x*2]); // [1,2] → [1,2,2,4]

Static Methods

1. Array.isArray(value) Checks if value is an array.

Array.isArray([1,2]); // → true

1. Array.from(arrayLike) Creates an array from array-like/iterable.

Array.from('123'); // → ['1','2','3']

1. Array.of(...elements) Creates an array from arguments.

Array.of(1,2,3); // → [1,2,3]

ES6+ Additions

1. at(index) Returns element at index (supports negatives).

[1,2,3].at(-1); // → 3

1. findLast(callback) (ES2023) Returns last element passing test.

[1,2,2,3].findLast(x => x === 2); // → 2

Key Notes:

• Mutators: Modify the original array (e.g., push, sort).
• Accessors: Return new data without changing the original (e.g., slice, concat).
• Iterators: Process elements via callbacks (e.g., map, filter).
• Use toSorted(), toReversed(), etc., for non-mutating operations (ES2023+).

Thanks for reading to the end, and have a good day!
You rock! 🙌

Let’s grow, learn, and build amazing things together!
Don’t forget to clap 👏 your heart content, save it to your list, and follow me.

Let’s stay friends!
Stay connected with me on my other platforms:

LinkedIn | dev.to| Bluesky