DEV Community

Cover image for JavaScript Array Methods Cheat Sheet: The Only Guide You Need
Muhammad Usman
Muhammad Usman

Posted on

JavaScript Array Methods Cheat Sheet: The Only Guide You Need

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]
Enter fullscreen mode Exit fullscreen mode
  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]
Enter fullscreen mode Exit fullscreen mode
  1. 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
  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]
Enter fullscreen mode Exit fullscreen mode
  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]
Enter fullscreen mode Exit fullscreen mode
  1. reverse() Reverses the array. Returns: Reversed array (mutates original).
arr.reverse(); // [1,2,3] → [3,2,1]
Enter fullscreen mode Exit fullscreen mode
  1. 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
  1. 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)

  1. 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
  1. 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
  1. join(separator?) Joins elements into a string (default: ,).
arr.join('-'); // [1,2,3] → "1-2-3"
Enter fullscreen mode Exit fullscreen mode
  1. includes(element) Checks if array contains element. Returns: true/false.
arr.includes(2); // [1,2,3] → true
Enter fullscreen mode Exit fullscreen mode
  1. indexOf(element) Returns first index of element or -1.
arr.indexOf(2); // [1,2,3] → 1
Enter fullscreen mode Exit fullscreen mode
  1. lastIndexOf(element) Returns last index of element or -1.
[1,2,2,3].lastIndexOf(2); // → 2
Enter fullscreen mode Exit fullscreen mode
  1. toString() Same as join().
[1,2,3].toString(); // "1,2,3"
Enter fullscreen mode Exit fullscreen mode
  1. toSorted() (ES2023) Non-mutating version of sort().
const sorted = arr.toSorted();
Enter fullscreen mode Exit fullscreen mode
  1. toReversed() (ES2023) Non-mutating version of reverse().
const reversed = arr.toReversed();
Enter fullscreen mode Exit fullscreen mode

Iteration Methods

  1. forEach(callback) Executes callback for each element. Returns: undefined.
arr.forEach(x => console.log(x));
Enter fullscreen mode Exit fullscreen mode
  1. map(callback) Returns new array with transformed elements.
const doubled = arr.map(x => x * 2);
Enter fullscreen mode Exit fullscreen mode
  1. filter(callback) Returns elements that pass callback test.
const evens = arr.filter(x => x % 2 === 0);
Enter fullscreen mode Exit fullscreen mode
  1. reduce(callback, initialValue?) Reduces array to a single value.
const sum = arr.reduce((acc, x) => acc + x, 0);
Enter fullscreen mode Exit fullscreen mode
  1. find(callback) Returns first element passing callback test.
const firstEven = arr.find(x => x % 2 === 0);
Enter fullscreen mode Exit fullscreen mode
  1. 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
  1. every(callback) Checks if all elements pass test.
const allEven = arr.every(x => x % 2 === 0);
Enter fullscreen mode Exit fullscreen mode
  1. flat(depth = 1) Flattens nested arrays.
[1, [2]].flat(); // → [1,2]
Enter fullscreen mode Exit fullscreen mode
  1. 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

  1. Array.isArray(value) Checks if value is an array.
Array.isArray([1,2]); // → true
Enter fullscreen mode Exit fullscreen mode
  1. Array.from(arrayLike) Creates an array from array-like/iterable.
Array.from('123'); // → ['1','2','3']
Enter fullscreen mode Exit fullscreen mode
  1. Array.of(...elements) Creates an array from arguments.
Array.of(1,2,3); // → [1,2,3]
Enter fullscreen mode Exit fullscreen mode

ES6+ Additions

  1. at(index) Returns element at index (supports negatives).
[1,2,3].at(-1); // → 3
Enter fullscreen mode Exit fullscreen mode
  1. 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+).

Top comments (3)

Collapse
 
atwright147 profile image
Andy Wright

That is actually very useful, thank you

Collapse
 
gauravsingh8026 profile image
Gaurav Singh

It's an interesting collection, but why are they all numbered 1?
Image description

Collapse
 
web_dev-usman profile image
Muhammad Usman

It's Just typing