JavaScript Array Methods: Mutating vs Non-Mutating

Table of Contents

1. 
   

   Mutating Array Methods

   
   
   
   
   
   • push()
   
   
   • pop()
   
   
   • shift()
   
   
   • unshift()
   
   
   • splice()
   
   
   • fill()
   
   
   • sort()
   
   
   • reverse()
   
   
   • copyWithin()
   
   
   
   


2. 
   

   Non-Mutating Array Methods

   
   
   
   
   
   • slice()
   
   
   • concat()
   
   
   • indexOf()
   
   
   • lastIndexOf()
   
   
   • includes()
   
   
   • find()
   
   
   • findIndex()
   
   
   • filter()
   
   
   • map()
   
   
   • reduce()
   
   
   • reduceRight()
   
   
   • some()
   
   
   • every()
   
   
   • forEach()
   
   
   • toSorted()
   
   
   • toSpliced()
   
   
   • at()
   
   
   • findLast()
   
   
   • findLastIndex()
   
   
   • join()
   
   
   • flat()
   
   
   • flatMap()
   
   
   • toReversed()
   
   
   
   

Mutating Array Methods (Change the Original Array)

These methods modify the original array directly:

1. push()

Adds one or more elements to the end of an array.

let arr = [1, 2, 3];

arr.push(4); // arr is now [1, 2, 3, 4]

2. pop()

Removes the last element from an array.

let arr = [1, 2, 3];

arr.pop(); // arr is now [1, 2]

3. shift()

Removes the first element from an array.

let arr = [1, 2, 3];

arr.shift(); // arr is now [2, 3]

4. unshift()

Adds one or more elements to the beginning of an array.

let arr = [1, 2, 3];

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

5. splice()

Changes the array by removing/replacing existing elements and/or adding new elements.

let arr = [10, 5, 6, 4];

arr.splice(1, 2, 20, 30); // Removes 5,6 and adds 20,30

// arr is now [10, 20, 30, 4]

6. fill()

Fills elements with a static value.

let arr = [25, 30, 35, 40, 45, 50];

arr.fill(0, 2, 5); // Fills from index 2 to 5 with 0

// arr is now [25, 30, 0, 0, 0, 50]

7. sort()

Sorts elements in place.

let arr = [30, 10, 1, 20];

arr.sort(); // arr is now [1, 10, 20, 30]

8. reverse()

Reverses elements in place.

let arr = [1, 2, 3, 4];

arr.reverse(); // arr is now [4, 3, 2, 1]

9. copyWithin()

Copies part of array to another location.

let arr = [1, 2, 3, 4, 5];

arr.copyWithin(0, 2); // arr is now [3, 4, 5, 4, 5]

Non-Mutating Array Methods (Do Not Change the Original Array)

These methods return new arrays/values without modifying the original:

1. slice()

Returns a portion of array.

let arr = [1, 2, 3, 4, 5];

let sliced = arr.slice(1, 4); // [2, 3, 4]

2. concat()

Combines arrays.

let arr1 = ["a", "b"];

let arr2 = ["c", "d"];

let combined = arr1.concat(arr2); // ["a", "b", "c", "d"]

3. indexOf()

Returns first index of element.

let arr = [1, 2, 3, 4];

let index = arr.indexOf(3); // 2

4. lastIndexOf()

Returns last index of element.

let arr = ["a", "b", "a"];

let lastIndex = arr.lastIndexOf("a"); // 2

5. includes()

Checks if value exists.

let arr = [1, 2, 3];

let hasTwo = arr.includes(2); // true

6. find()

Returns first matching element.

let nums = [10, 25, 30];

let found = nums.find(n => n > 20); // 25

7. findIndex()

Returns index of first matching element.

let nums = [10, 25, 30];

let index = nums.findIndex(n => n > 20); // 1

8. filter()

Returns new array with matching elements.

let nums = [10, 25, 30];

let filtered = nums.filter(n => n > 20); // [25, 30]

9. map()

Transforms each element.

let nums = [1, 2, 3];

let doubled = nums.map(n => n * 2); // [2, 4, 6]

10. reduce()

Reduces to single value.

let nums = [1, 2, 3];

let sum = nums.reduce((t, n) => t + n, 0); // 6

11. reduceRight()

Reduces from right to left.

let nums = [1, 2, 3];

let sum = nums.reduceRight((t, n) => t + n, 0); // 6

12. some()

Tests if any element passes test.

let nums = [1, 2, 3];

let hasEven = nums.some(n => n % 2 === 0); // true

13. every()

Tests if all elements pass test.

let nums = [2, 4, 6];

let allEven = nums.every(n => n % 2 === 0); // true

14. forEach()

Executes function for each element.

let nums = [1, 2, 3];

nums.forEach(n => console.log(n)); // Logs 1, 2, 3

15. toSorted()

Returns new sorted array.

let nums = [3, 1, 2];

let sorted = nums.toSorted(); // [1, 2, 3]

16. toSpliced()

Returns new spliced array.

let nums = [1, 2, 3];

let spliced = nums.toSpliced(1, 1); // [1, 3]

17. at()

Returns element at index.

let nums = [10, 20, 30];

let num = nums.at(1); // 20

18. findLast()

Returns last matching element.

let nums = [10, 25, 30, 25];

let last = nums.findLast(n => n === 25); // 25

19. findLastIndex()

Returns index of last match.

let nums = [10, 25, 30, 25];

let lastIndex = nums.findLastIndex(n => n === 25); // 3

20. join()

Joins elements into string.

let arr = ["Hello", "World"];

let str = arr.join(" "); // "Hello World"

21. flat()

Flattens nested arrays.

let arr = [1, [2, [3]]];

let flat = arr.flat(2); // [1, 2, 3]

22. flatMap()

Maps then flattens.

let arr = [1, 2, 3];

let mapped = arr.flatMap(x => [x, x*2]); // [1, 2, 2, 4, 3, 6]

23. toReversed()

Returns new reversed array.

let arr = [1, 2, 3];

let reversed = arr.toReversed(); // [3, 2, 1]

Author: Mohin Sheikh


Follow me on GitHub for more insights!