Commonly utilized JavaScript methods Part I

In this entry we're going to be covering commonly utilized JavaScript methods, their uses, optimal data structures to append them to and essentially obtain a greater understanding of the language of JavaScript via the intricacies of these methods. The types of methods I'm going to be covering in this series are Mutator Methods, Accessor Methods and Iteration Methods. This article shall particularly cover the Mutator Methods as it is part I of Commonly utilized JavaScript Methods

What are Mutator Methods?

Mutator methods are essentially utilized to manipulate arrays. Mutator methods are also identified as Setter method, which is quite often accompanied with Getter methods also known as Accessor methods. Commonly used methods associated with Mutator methods are: .unshift(), .shift(), .push(), .pop(), .reverse(), .sort(), .splice(), .fill(), and forEach(). Below I shall display the various definitions, uses, and examples of the Mutator Methods identified above.

.unshift():

This method is responsible for adding new elements to the beginning of an array, furthermore overwriting the original array and returning the new length of the array.

This is an optimal method to add a new element, in an array:

Example of .unshift() method:

let narutoCharactersArray = ["Naruto", "Itachi", "Sakura"];

narutoCharactersArray.unshift("Neji");

console.log(narutoCharactersArray); //[ 'Neji', 'Naruto', 'Itachi', 'Sakura' ]

.shift():

This method is responsible for removing an element from the beginning of an array as opposed to the unshift method above.

Example of .shift() method:

//.shift() method:

let simpsonsCharactersArray = [

"Homer",

"Marge",

"Lisa",

"Bart",

"Maggie",

"Ned",

];

simpsonsCharactersArray.shift();

console.log(simpsonsCharactersArray); //[ 'Marge', 'Lisa', 'Bart', 'Maggie', 'Ned' ]

.push():

This method is similar to the unshift method and does the opposite, instead of adding an element or sets of elements to the beginning of the array this method is responsible for placing elements at the end of the array.

Example of .push() method:

//.push() method:

let familyGuyCharactersArray = ["Peter", "Lois", "Chris", "Meg", "Stewie"];

familyGuyCharactersArray.push("Bryan");

console.log(familyGuyCharactersArray); //[ 'Peter', 'Lois', 'Chris', 'Meg', 'Stewie', 'Bryan' ]

.pop():

This element removes the last element of the array furthermore, manipulating the length of the original array.

Example of .pop() method:

//.pop() method:

familyGuyCharactersArray.pop();

console.log(familyGuyCharactersArray); // [ 'Peter', 'Lois', 'Chris', 'Meg', 'Stewie' ]

.reverse():

This method just as expected reverses the array.

Example of .reverse() method:

//.reverse() method:

familyGuyCharactersArray.reverse();

console.log(familyGuyCharactersArray); //[ 'Bryan', 'Stewie', 'Meg', 'Chris', 'Lois', 'Peter' ]

.sort():

This method like its name is responsible for sorting the elements in an array, this can be pertaining to alphabetically, or ascending and descending.

Example of .sort() method - Alphabetically:

//.sort() method:

familyGuyCharactersArray.sort();

console.log(familyGuyCharactersArray); //[ 'Bryan', 'Chris', 'Lois', 'Meg', 'Peter', 'Stewie']

Example of .sort() method - Descending:

//.sort method - descending order:

let familyAgesArray = [27, 21, 25, 57];

familyAgesArray.sort(function (a, b) {

return b - a;

});

console.log(familyAgesArray); //[ 57, 27, 25, 21 ]

.splice():

This method is responsible for the manipulation of an array, it add or removes an element from an array and overwrites the original. This is done via removal/replacing elements. It is done so via passing  parameters. The initial parameter is the start which is responsible for placing the first index to manipulate in the array. The second parameter is identified as the deleteCount this is responsible for the mitigation of how many elements to be removed in an array.

Example of the .splice() method:

//.splice() method:

familyAgesArray.splice(2, 1); //start at index 2: 25 and removal of 1 element: 25.

console.log(familyAgesArray); //[ 57, 27, 21 ]

.fill():

This method manipulates array by changing elements to a static value via passing of parameters: value, start and end.

Example of .fill() method:

//.fill() method:

let randomDigits = [2, 4, 6, 8, 10];

randomDigits.fill(12, 0, 5); //Change array to static number 12 from index 0 to 5.

console.log(randomDigits); //[ 12, 12, 12, 12, 12 ]

.forEach method:

This method is integral for the iteration of an array, via use of a callback function and the passing of 3 parameters: Current Value, Index and Array.  Current value is the only parameter that is typically required, it was required to produce the current value of array element, Index returns the index number, Array returns what array the current element derives from.

Example of .forEach() method via current value:

//.forEach() method:

let randomDigitsTwo = [2, 4, 5, 6, 8, 10, 12];

randomDigitsTwo.forEach(function () {

//console log the elements of the array:

console.log(randomDigitsTwo);

});

/* Results: [

2, 4, 5, 6,

8, 10, 12

]

[

2, 4, 5, 6,

8, 10, 12

]

[

2, 4, 5, 6,

8, 10, 12

]

[

2, 4, 5, 6,

8, 10, 12

]

[

2, 4, 5, 6,

8, 10, 12

]

[

2, 4, 5, 6,

8, 10, 12

]

[

2, 4, 5, 6,

8, 10, 12

] Iterates by the number of elements in the array */

This concludes my article regarding the commonly utilized JavaScript methods, be sure to tune in for part two of the methods covering Accessor Methods.