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

Muhammad Usman @web_dev-usman

About: Building High-Performing, User-Centric Websites 3x Faster | WordPress Developer with 4+ Years of Experience

Location:
Lahore, Punjab, Pakistan
Joined:
Nov 22, 2024

JavaScript Array Methods Cheat Sheet: The Only Guide You Need

Publish Date: Feb 6
15 4

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

Comments 4 total

  • Andy Wright
    Andy WrightFeb 6, 2025

    That is actually very useful, thank you

  • Gaurav Singh
    Gaurav SinghFeb 6, 2025

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

  • Jeannie
    JeannieFeb 8, 2025

    L­a­s­t n­i­g­h­t, I w­o­r­k­e­d o­n m­y l­a­p­t­o­p f­o­r a­r­o­u­n­d t­w­o h­o­u­r­s e­v­e­r­y d­a­y a­n­d e­n­d­e­d u­p e­a­r­n­i­n­g $18,500. T­h­i­s m­e­t­h­o­d o­f m­a­k­i­n­g m­o­n­e­y i­s b­o­t­h d­e­e­p a­n­d

    s­t­r­a­i­g­h­t­f­o­r­w­a­r­d.…➤ payriche.com

Add comment