Muhammad Usman

Posted on Feb 6

JavaScript Array Methods Cheat Sheet: The Only Guide You Need

Muhammad Usman · 2025-02-06T05:38:53Z

Mutator Methods (Modify the original array) push(element1, ..., elementN) Adds elements to the end. Returns: New length. arr.push(5); // [1,2,3] → [1,2,3,5] Enter fullscreen mode Exit fullscreen mode pop() Removes the last element. Returns: Removed element. arr.pop(); // [1,2,3] → [1,2] shift() Removes the first element. Returns: Removed element. arr.shift(); // [1,2,3] → [2,3] Enter fullscreen mode Exit fullscreen mode unshift(element1, ..., elementN) Adds elements to the start. Returns: New length. arr.unshift(0); // [1,2,3] → [0,1,2,3] Enter fullscreen mode Exit fullscreen mode 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] Enter fullscreen mode Exit fullscreen mode sort([compareFunction]) Sorts elements (lexicographically by default). Returns: Sorted array (mutates original). arr.sort((a, b) => a - b); // [3,1,2] → [1,2,3] Enter fullscreen mode Exit fullscreen mode reverse() Reverses the array. Returns: Reversed array (mutates original). arr.reverse(); // [1,2,3] → [3,2,1] Enter fullscreen mode Exit fullscreen mode fill(value, start?, end?) Fills array with value between start and end . arr.fill(0); // [1,2,3] → [0,0,0] Enter fullscreen mode Exit fullscreen mode copyWithin(target, start, end?) Copies elements within the array. [1,2,3,4].copyWithin(0, 2); // → [3,4,3,4] Enter fullscreen mode Exit fullscreen mode Accessor Methods (Return new data without modifying the array) concat(...arrays) Merges arrays. Returns: New merged array. arr.concat([4,5]); // [1,2,3] → [1,2,3,4,5] Enter fullscreen mode Exit fullscreen mode slice(start?, end?) Returns subarray between start and end . arr.slice(1, 3); // [1,2,3,4] → [2,3] Enter fullscreen mode Exit fullscreen mode join(separator?) Joins elements into a string (default: , ). arr.join('-'); // [1,2,3] → "1-2-3" Enter fullscreen mode Exit fullscreen mode includes(element) Checks if array contains element . Returns: true / false . arr.includes(2); // [1,2,3] → true Enter fullscreen mode Exit fullscreen mode indexOf(element) Returns first index of element or -1 . arr.indexOf(2); // [1,2,3] → 1 Enter fullscreen mode Exit fullscreen mode lastIndexOf(element) Returns last index of element or -1 . [1,2,2,3].lastIndexOf(2); // → 2 Enter fullscreen mode Exit fullscreen mode toString() Same as join() . [1,2,3].toString(); // "1,2,3" Enter fullscreen mode Exit fullscreen mode toSorted() (ES2023) Non-mutating version of sort() . const sorted = arr.toSorted(); Enter fullscreen mode Exit fullscreen mode toReversed() (ES2023) Non-mutating version of reverse() . const reversed = arr.toReversed(); Enter fullscreen mode Exit fullscreen mode Iteration Methods forEach(callback) Executes callback for each element. Returns: undefined . arr.forEach(x => console.log(x)); Enter fullscreen mode Exit fullscreen mode map(callback) Returns new array with transformed elements. const doubled = arr.map(x => x * 2); Enter fullscreen mode Exit fullscreen mode filter(callback) Returns elements that pass callback test. const evens = arr.filter(x => x % 2 === 0); Enter fullscreen mode Exit fullscreen mode reduce(callback, initialValue?) Reduces array to a single value. const sum = arr.reduce((acc, x) => acc + x, 0); Enter fullscreen mode Exit fullscreen mode find(callback) Returns first element passing callback test. const firstEven = arr.find(x => x % 2 === 0); Enter fullscreen mode Exit fullscreen mode some(callback) Checks if at least one element passes test. Returns: true / false . const hasEven = arr.some(x => x % 2 === 0); Enter fullscreen mode Exit fullscreen mode every(callback) Checks if all elements pass test. const allEven = arr.every(x => x % 2 === 0); Enter fullscreen mode Exit fullscreen mode flat(depth = 1) Flattens nested arrays. [1, [2]].flat(); // → [1,2] Enter fullscreen mode Exit fullscreen mode flatMap(callback) Maps then flattens the result. arr.flatMap(x => [x, x*2]); // [1,2] → [1,2,2,4] Enter fullscreen mode Exit fullscreen mode Static Methods Array.isArray(value) Checks if value is an array. Array.isArray([1,2]); // → true Enter fullscreen mode Exit fullscreen mode Array.from(arrayLike) Creates an array from array-like/iterable. Array.from('123'); // → ['1','2','3'] Enter fullscreen mode Exit fullscreen mode Array.of(...elements) Creates an array from arguments. Array.of(1,2,3); // → [1,2,3] Enter fullscreen mode Exit fullscreen mode ES6+ Additions at(index) Returns element at index (supports negatives). [1,2,3].at(-1); // → 3 Enter fullscreen mode Exit fullscreen mode findLast(callback) (ES2023) Returns last element passing test. [1,2,2,3].findLast(x => x === 2); // → 2 Enter fullscreen mode Exit fullscreen mode 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+).

#javascript #webdev #frontend #programming

Mutator Methods (Modify the original array)

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

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

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

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

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

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

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

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

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]

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

toString() Same as join().

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

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

const sorted = arr.toSorted();

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

const reversed = arr.toReversed();

Iteration Methods

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

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

map(callback) Returns new array with transformed elements.

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

filter(callback) Returns elements that pass callback test.

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

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

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

find(callback) Returns first element passing callback test.

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

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

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

every(callback) Checks if all elements pass test.

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

flat(depth = 1) Flattens nested arrays.

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

flatMap(callback) Maps then flattens the result.

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

Static Methods

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

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

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

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

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

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

ES6+ Additions

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

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

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+).