JavaScript

Array Mutator Methods in JavaScript Explained with Examples

In JavaScript, the methods that modify or overwrite the original array elements are called array mutator methods, and there are many built-in methods available in JavaScript that can be utilized to modify the elements of the original array. For example, forEach(), reverse(), splice(), fill() and shift() method. This article will provide a thorough overview of these methods with a couple of examples.

sort() method in JavaScript

Sorting array elements is very crucial, in JavaScript a build-in method ‘sort()’ is used to sort the unsorted array elements, by default it sorts the array elements in ascending order:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.sort();

console.log("The sorted array : ", Input_Array);

We utilize the sort() function in this program and as a result, it will return a sorted array:

We can also pass the comparison parameter. For instance, consider the below-given code to print the array in descending order:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.sort(function(lower, higher){

return higher-lower;

});

console.log("The sorted array : ", Input_Array);

We passed two parameters to the function “lower” and “higher”, and “higher-lower” will return the output in descending order while “lower-higher” will return the output in ascending order:

reverse() method in JavaScript

In JavaScript, the “reverse()” method is used to reverse the order of array elements, consider the below-given code to understand the working of reverse function:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.reverse();

console.log("The reverse array : ", Input_Array);

The output for the reverse function will be:

push() method in JavaScript

To add some new elements to the array JavaScript utilizes the “push()” method, it appends the new element at the last index of array:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.push(100);

console.log("The updated array : ", Input_Array);

We appended ‘100’ in the array using the push method, the output will be:

pop() method in JavaScript

In JavaScript, the “pop()” method deletes the last element of the array:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.pop();

console.log("The updated array : ", Input_Array);

The above code will pull out the “6” from the array and the resultant output will be:

shift() method in JavaScript

The “shift()” method is used to delete the first element of the array:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.shift();

console.log("The updated array : ", Input_Array);

The above code will pull out the “15” from the array and the output of this program will be:

unshift() method in JavaScript

In JavaScript “unshift()” functions takes an element as a parameter and put it in the beginning of the array:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.unshift(50);

console.log("The updated array : ", Input_Array);

The output of the above given code will be:

fill() method in JavaScript

In JavaScript, the “fill()” method replicates all the entries of an array with some specified value:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.fill(50);

console.log("The updated array : ", Input_Array);

Now we will implement the “fill” method on the “Input_Array”:

In the output, all the elements of the array will be replicated with the ‘50’:

The fill method also deals with the optional parameters. It takes three parameters, first for the specified value, second for the starting index, and third parameter for the last index. As a result, it will replicate all the elements of the array from the specified starting index to the specified last index.

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.fill(50, 1, 4);

console.log("The updated array : ", Input_Array);

As an example, we passed 50, 1, and 3 in the fill method, now the fill method will replace the array elements from index 1 to index 3 with 50. While the remaining indexes values will remain unchanged. Now observe the output of parameterized fill method:

splice() method in JavaScript

In JavaScript, the “splice()” method is used very frequently due to its unique and specific properties. It can append or delete the elements of an array and it can perform both actions simultaneously.

The “splice()” method holds three parameters:

  • First parameter takes starting index
  • Second parameter specifies the total number of elements to delete
  • Third parameter is optional and it takes the element to insert in the array

Now consider an example where we want to add an element in the array without deleting any existing element:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.splice(2, 0, 5);

console.log("The updated array : ", Input_Array);

In this example, we set the value of the second parameter as 0. In the output we observed that ‘5’ is added at index two, and it didn’t delete any existing value:

Now we will consider an example where we want to delete an element from the array:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.splice(1,2);

console.log("The updated array : ", Input_Array);

Here in the first parameter, we specify the starting index ‘1’ and in the second parameter we write ‘2’ which specifies that delete two elements of the array. We didn’t write the third parameter because we don’t want to add a new element in the array:

In the output, we noted that the values of index 1 and 2 are deleted from the array:

Now we will consider an example to add and delete some entries of an array simultaneously:

const Input_Array = [15, 13, 0, 12, -10, 6];

Input_Array.splice(1,2,50);

console.log("The updated array : ", Input_Array);

So, in this example, the “splice()” method specifies that from index 1 onwards delete two elements and insert one new element at index 1:

Conclusion

In JavaScript, mutator methods don’t create new arrays, instead they modify the current arrays. In this article we covered various array mutator functions. We learn how mutator methods work in JavaScript, and we analyze that among all these methods, the pop method and the push method modify the array’s final indexes while the shift method and the unshift method modify the array’s initial indexes. Moreover, we figure out how to sort the array in ascending or descending order and how to reverse or replicate the array elements using different mutator methods.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.