Commonly Utilized JavaScript Methods Part II

 This entry is part 2 of the Commonly Utilized JavaScript Methods series. This emphasis of this passage is regarding the Getter method also known as Accessor Methods.

What are Accessor Methods?

As oppose to Mutator Methods which manipulate the original array. Accessor Methods instead, return a new array with modifications implemented without compromising the original array. Methods being covered in this article are: .concat(), .join(), .slice(), .indexOf(), .lastIndexOf(), .filter(), and .includes().

.concat() method:

This method is integral for merging two arrays and producing a new array, hence the use of concat which is short for concatenation, which is defined as the act of linking/convergence of things. It is capable of merging more than two arrays via passing multiple arguments.

Example of .concat() method:

//.concat() method:

let marvelChars = [

"Spider-Man",

"Captain America",

"Hulk",

"Iron Man",

"Wolverine",

];

let streetFighterChars = ["Ryu", "Akuma", "Kenny", "Chun-Li", "M.Bison"];

let marvelVsCapcom = marvelChars.concat(streetFighterChars);

console.log(marvelVsCapcom); /*

Results:

[

'Spider-Man',

'Captain America',

'Hulk',

'Iron Man',

'Wolverine',

'Ryu',

'Akuma',

'Kenny',

'Chun-Li',

'M.Bison'

] */

From utilizing this method of convergence of arrays, you can utilize the Mutator method of .sort() to display the characters in alphabetical order for furthermore manipulation and rendering of data.

.join() method:

This method is responsible for the conversion of elements in an array into a string. Join method requires the passing of ',  ' in the parameters to ensure that the elements in the string are separated accordingly and shall be displayed in the examples below.

Examples of .join() method:

//.join() method:

/*

Displaying concat in conjunction with join() method

for versatility portrayal of both methods.

*/

let bleachChars = ["Ichigo", "Yoruichi", "Toshiro", "Gin", "Kenpachi"];

let onePieceChars = ["Monkey", "Roronoa", "Nami", "Vinsmoke", "Kaido"];

let bleachOnePieceChars = bleachChars.concat(onePieceChars).join(" "); //without (', ');

console.log(bleachOnePieceChars);

//Results: Ichigo Yoruichi Toshiro Gin Kenpachi Monkey Roronoa Nami Vinsmoke Kaido

let bleachOnePieceCharsTwo = bleachChars.concat(onePieceChars).join(", ");

console.log(bleachOnePieceCharsTwo);

//Results: Ichigo, Yoruichi, Toshiro, Gin, Kenpachi, Monkey, Roronoa, Nami, Vinsmoke, Kaido

.slice() method:

This method duplicates a portion of the original array, with passing of arguments/parameter indicating which from which element in the original array to display in the new array/output. The second parameter after the element selected to slice from is the last digit of the array. For instance, if you had an array with 4 elements, you would pass 4 as the element you would want to slice from as the last digit if you only wanted from the second element to the last element of the array.

Example of .slice() method:

//.slice() method:

let dbzChars = ["Goku", "Vegeta", "Gohan", "Goten", "Trunks"];

let goTenks = dbzChars.slice(3, 5);

console.log(goTenks); //Results: [ 'Goten', 'Trunks' ]

.indexOf() method:

Quite similar to the forEach method in regards to returning the index of an element. The indexOf method returns the index of an element that is passed as an argument.

Example of .indexOf():

This example is a continuation of the variable/array set above in the slice method:

console.log(dbzChars.indexOf("Gohan")); //Result: 2

.lastIndexOf():

This method is responsible for returning the index number of the last time an element was displayed in an array, especially when the element is repeated more than once in the array.

Example of .lastIndexOf():

//.lastIndexOf() method:

let threeNinjas = ["Tum", "Rocky", "Colt", "Tum"];

console.log(threeNinjas.lastIndexOf("Tum")); //Result: 3

.filter() method:

Can be utilized in instances of rendering authenticated users from that partake in particular fields on a web or application. Its essential the return of a new array under conditions of specific type, length, index or array. The condition is recognized as a test done so via a callback function.

Examples of .filter() method:

//.filter() method:

//Example #1:

let narutoChars = [

{ name: "Naruto Uzumaki", type: "Kage" },

{ name: "Gaara", type: "Kage" },

{ name: "Tsuande", type: "Kage" },

{ name: "Kakashi Hatake", type: "Jonin" },

{ name: "Shikamaru Nara", type: "Jonin" },

{ name: "Tenten", type: "Chunin" },

{ name: "Boruto Uzumaki", type: "Genin" },

];

const kages = narutoChars.filter((element) => element.type === "Kage");

console.log(kages);

/*

Results:

[

{ name: 'Naruto Uzumaki', type: 'Kage' },

{ name: 'Gaara', type: 'Kage' },

{ name: 'Tsuande', type: 'Kage' }

]

*/

//Example #2 - filter by element character length:

let pets = [

"Mouse",

"Dog",

"Cat",

"Bird",

"Hamster",

"Gerbil",

"Snake",

"Monkey",

];

const rhymesWithBix = pets.filter((pets) => pets.length === 6);

console.log(rhymesWithBix); //[ 'Gerbil', 'Monkey' ]

.includes() method:

This method returns a boolean (true or false) under condition that the array contains the argument passed.

Example of .includes() method:

Continuation of the variable set in filter method above.

//.includes() method:

console.log(pets.includes("Hamster")); //Result: True

This concludes the article, I hope that you find this passage quite informative and enabling you to retain the methods displayed above for your future programming endeavours.