DEV Community

Mohin Sheikh
Mohin Sheikh

Posted on

JavaScript Array Methods: Mutating vs Non-Mutating

Table of Contents

  1. Mutating Array Methods

  2. Non-Mutating Array Methods


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]
Enter fullscreen mode Exit fullscreen mode

2. pop()

Removes the last element from an array.

let arr = [1, 2, 3];
arr.pop(); // arr is now [1, 2]
Enter fullscreen mode Exit fullscreen mode

3. shift()

Removes the first element from an array.

let arr = [1, 2, 3];
arr.shift(); // arr is now [2, 3]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

7. sort()

Sorts elements in place.

let arr = [30, 10, 1, 20];
arr.sort(); // arr is now [1, 10, 20, 30]
Enter fullscreen mode Exit fullscreen mode

8. reverse()

Reverses elements in place.

let arr = [1, 2, 3, 4];
arr.reverse(); // arr is now [4, 3, 2, 1]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

2. concat()

Combines arrays.

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

3. indexOf()

Returns first index of element.

let arr = [1, 2, 3, 4];
let index = arr.indexOf(3); // 2
Enter fullscreen mode Exit fullscreen mode

4. lastIndexOf()

Returns last index of element.

let arr = ["a", "b", "a"];
let lastIndex = arr.lastIndexOf("a"); // 2
Enter fullscreen mode Exit fullscreen mode

5. includes()

Checks if value exists.

let arr = [1, 2, 3];
let hasTwo = arr.includes(2); // true
Enter fullscreen mode Exit fullscreen mode

6. find()

Returns first matching element.

let nums = [10, 25, 30];
let found = nums.find(n => n > 20); // 25
Enter fullscreen mode Exit fullscreen mode

7. findIndex()

Returns index of first matching element.

let nums = [10, 25, 30];
let index = nums.findIndex(n => n > 20); // 1
Enter fullscreen mode Exit fullscreen mode

8. filter()

Returns new array with matching elements.

let nums = [10, 25, 30];
let filtered = nums.filter(n => n > 20); // [25, 30]
Enter fullscreen mode Exit fullscreen mode

9. map()

Transforms each element.

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2); // [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

10. reduce()

Reduces to single value.

let nums = [1, 2, 3];
let sum = nums.reduce((t, n) => t + n, 0); // 6
Enter fullscreen mode Exit fullscreen mode

11. reduceRight()

Reduces from right to left.

let nums = [1, 2, 3];
let sum = nums.reduceRight((t, n) => t + n, 0); // 6
Enter fullscreen mode Exit fullscreen mode

12. some()

Tests if any element passes test.

let nums = [1, 2, 3];
let hasEven = nums.some(n => n % 2 === 0); // true
Enter fullscreen mode Exit fullscreen mode

13. every()

Tests if all elements pass test.

let nums = [2, 4, 6];
let allEven = nums.every(n => n % 2 === 0); // true
Enter fullscreen mode Exit fullscreen mode

14. forEach()

Executes function for each element.

let nums = [1, 2, 3];
nums.forEach(n => console.log(n)); // Logs 1, 2, 3
Enter fullscreen mode Exit fullscreen mode

15. toSorted()

Returns new sorted array.

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

16. toSpliced()

Returns new spliced array.

let nums = [1, 2, 3];
let spliced = nums.toSpliced(1, 1); // [1, 3]
Enter fullscreen mode Exit fullscreen mode

17. at()

Returns element at index.

let nums = [10, 20, 30];
let num = nums.at(1); // 20
Enter fullscreen mode Exit fullscreen mode

18. findLast()

Returns last matching element.

let nums = [10, 25, 30, 25];
let last = nums.findLast(n => n === 25); // 25
Enter fullscreen mode Exit fullscreen mode

19. findLastIndex()

Returns index of last match.

let nums = [10, 25, 30, 25];
let lastIndex = nums.findLastIndex(n => n === 25); // 3
Enter fullscreen mode Exit fullscreen mode

20. join()

Joins elements into string.

let arr = ["Hello", "World"];
let str = arr.join(" "); // "Hello World"
Enter fullscreen mode Exit fullscreen mode

21. flat()

Flattens nested arrays.

let arr = [1, [2, [3]]];
let flat = arr.flat(2); // [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

22. flatMap()

Maps then flattens.

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

23. toReversed()

Returns new reversed array.

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

Author: Mohin Sheikh

Follow me on GitHub for more insights!

Top comments (0)