Learn about javascript Array Mutators

In this blog, we are going to be learning about mutator methods in javascript. Various methods are there which can be used as the array object in javascript. A few methods modify the array object whereas the others do not. The methods which modify the array objects are called as mutator methods.

Here are some examples of non-mutator methods 
 - contains indexOf, lastindexOf

for example, Contains method checks if a given array object contains a given element or not. If this array contains a given element then the contains methods would return true otherwise false. This method does not change the array object on which they operate.

Here are the examples of mutator methods - push, pop, shift, unshift, reverse, sort, splice

Here, the second set of methods changes the array object on which they operate. These methods are known mutator methods.

Now, we will define all mutator methods

push() method: This adds new items at the end of the array, also it changes the length of the array.

Now, will define all mutator methods

var numbers = [1,2,3,4];
numbers.push(5);
console.log(numbers); // [1,2,3,4,5]

pop() method: This removes the last element of an array, and returns that element, it changes the length of an array.

var numbers = [1,2,3,4]
numbers.pop();
console.log(numbers); // [1,2,3]

unshift() method: push() method, adds new items at the end of the array. To add new items at the beginning of the array, then use unshift() method. Same as push() method, unshift() method also changes the length of an array.

var numbers = [6,7,8];
numbers.unshift(4, 5);
console.log(numbers); // [4, 5, 6, 7, 8]

shift() method: pop() method, this method removes the last element of an array, and returns that element whereas the shift() method removes the first item of an array and returns that item. Same as pop() method, shift() method also changes the length of an array.

var numbers = [1,2,3];
numbers.shift();
console.log(numbers); // [2,3]

sort() method: This method sorts the elements in an array. By default, the sort() method sorts the values by converting them to string and then comparing those strings which works well for string but not for numbers. 

var myArray = [sam, Mark, Tom, David];
myArray.sort();
console.log(myArray); // [David, Mark, Tom, sam]

Sorting Numbers

var myArray = [20, 1, 10, 2, 3];
myArray.sort();
console.log(myArray); // [1, 10, 2, 20, 3]

Do make sure to notice that the numbers are not sorted properly. This can be fixed by addind a "compare function" as a parameter to the sort function. The compare function whould return a negative, zero, or positive value.

var myArray = [20, 1, 10, 2, 3];
myArray.sort(function (a, b) { return a - b });
console.log(myArray); // [1, 2, 3, 10, 20]

reverse() method: Reverses the order of the elements in the array.

var a = [1, 2, 3, 4];
a.reverse();
console.log(a); // [4, 3, 2, 1]

splice() method: This method adds or removes elements from an array.

These method has got three parameters (index, deleteCount, item1,...,itemX) idex, deleteCount and item1 to itemX. 

Explanation of these parameters:

the index parameter is required and mentions the position in an array if you would you want to add or remove items & deleteCount is also a required parameter. These parameters basically specify the number of items that onw would want to delete from any given array object. If this parameter is set to 0, then no items will be deleted. And if from item1 to itemX this parameter is optional & then this parameter is going to specify the new item that is wanted in the array. For example:-

var myArray = [1, 2, 5];
myArray.splice(2, 0, 3, 4);
console.log(myArray); // [1, 2, 3, 4]

Explanation of splice() method

There are three elements [1, 2, 5] and those are to be added to 3, 4 of this array. In this array, two elements [3, 4] are added at the index position of 2. 
(myArray.splice(2, 0, 3, 4);), Here in the index 2 & second parameter is deleteCount, if one would we want to delete an element from the array, then pass 0 there and the third parameter is item1 to itemX. Now we would want to add 3 & 4 to this "my array" object.

Thanks