Javascript: Array Methods | Mutating vs Non-Mutating

In this article, we are going to look at a few common array operations in their mutable and non-mutable versions. Add, Delete, and Replace are the most common operations, and we will take a look at those operations.

In this article, we will exploit methods like array.map() to produce non-mutating versions. This is not an exhaustive listing, we will keep ourselves limited to basic manipulations.

I will assign array to const to show non-mutating aspect and let as mutating.

Though you can always mutate array assign to const but I like to it that way keep for developer indication.

Add: Mutating

The easiest way to add an item to array is array.push() and array.unshift().

// Note: using `let` here to indicate that this array will be mutated.

let array = [1, 2, 3, 4, 5];  
array.push(6); // [1, 2, 3, 4, 5, 6];  
array.unshift(10);// [10, 1, 2, 3, 4, 5, 6];

array.push() adds an item to the end and array.unshift() adds an item to the front of the array.

Add: Non-Mutating

There are two ways to do so array.concat() and …array spread operator.

// Note use `const` to indicate that this will not be mutated  
// concat
const array1 = [1, 2, 3, 4, 5];  
const array2 = array.concat(6);  // [1, 2, 3, 4, 5, 6];
// spread
const array3 = [...array1, 6]; // [1, 2, 3, 4, 5, 6];  
const array4 = [10, ...array1]; // [10, 1, 2, 3, 4, 5];

array1.concat(item1, item2, …) the concat method will merge all items from array1 and items passed as params and create a new array with them. While the … spread operator will essentially take all items out from array and place them in a new array context.

Remove: Mutating

There are two methods array.pop() and array.shift()

let array = [1, 2, 3, 4, 5];  
array.pop();  // [1, 2, 3, 4] > delete from end and return deleted item  
array.shift();  // [2, 3, 4]  > delete from front and return deleted item

array.pop() delete an item from the end and return deleted item. array.shift() delete an item from the front and return deleted item.

There is one important method to manipulate array i.e array.splice(). It mutates the array. splice() takes 2 important params, first being the starting index and second being the number of items to be removed. splice will remove items from array directly. for eg. splice(0, 2) will remove two items starting from index 0.

let array = [1, 2, 3, 4, 5];  
array.splice(0, 2); // [3, 4, 5];

Remove: Non-Mutating

The removing or any type of filtering is done by array.filter(), the filter() is among the coolest non-mutating method on the array. It takes a function that is called over each item in the array during that it has to do some filtering where if it returns true then the item will be included in new array and return false if items has to be thrown away.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.filter((item) => item !== 5);   
// will filter any item i.e not equal to 5

Another very important method is array.slice(). Remember this is not array.splice(), they are different array.slice() will return new array i.e its is not mutating. It is very similar to slice for how its is used. It takes 2 important params, the first is starting index where copying should begin and second is end index where copy should end, it is not inclusive. It copy items between those index and returned them in a new array.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.slice(0, 2); // [1,2];  
// if no args provided ti  will copy the whole array

Replace: Mutating

Array splice method is very interesting method because not only it can remove items but also add items to the array directly. The third parameters and onwards basically mean items that need to be inserted to array.

let array = [1, 2, 3, 4, 5];  
array.splice(2, 1, 10, 12); // [1, 2, 10, 12, 4, 5];

splice will remove 1 item starting index 2 and then insert 10 and 12 from the same position.

Replace | Transform: Non-mutating

The mighty method array.map() is very useful as it can transform array. Map method takes a function that is called on each item of the array and it must return an item that has to be put into the new array.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.map((item) => {  
  if (item === 3) {  
    return 10;    
  }  
  return item;  
}); // [1, 2, 10, 4, 5];

// Map as transformation  
const mutilpliedByTwo = array1.map((item) => item \* 2);   
// [2, 4, 6, 8, 10];