Array Accessor Methods in JavaScript Explained with Examples

In JavaScript, there are several built-in methods available that are very beneficial in the perspective of working with arrays, such as the method that modifies the actual array is termed as a mutator method. While the method which doesn’t modify the primary/original array instead it returns some new representation for the array on the basis of the original array is termed as the accessor method. In this post, we will cover various array accessor methods like concat(), slice(), indexOf(), filter(), and lastIndexOf() method.

concat() method in JavaScript

In JavaScript, the concat method is used to join the multiple arrays and as a result, it returns a new array. Let’s consider an example where we created two arrays and concatenate them in the third array, have a look at the below-given code to understand how “concat()” method works in JavaScript:

const Array1 = [ 5,10,15,20,25 ];

const Array2 = [ 30,35,40,45,50 ];

const Resultant_Array = Array1.concat(Array2);

console.log("The resultant array is : ", Resultant_Array);

In the above-given code, the resultant array concatenates the first two arrays:

The console.log function is utilized to produce the output of the resultant array on the browser’s console:

The output verifies that the resultant array combines the elements of both “array1” and “array2”.

join() method in JavaScript

In JavaScript, the “join()” method returns a new string by joining all the array elements within one string separated by a comma “,”.

const Array1 = [ '5','10','15','20','25' ];

const Resultant_Array = Array1.join();

console.log("The resultant array using Join method is : ",Resultant_Array);

Here we took array1 values as string values and the JavaScript implementation of the above-given code will be:

In the output, you will observe that the “join()” function returns a string that is separated by a comma.

In JavaScript, anyone can separate the string elements by any other symbol of theirs choice; suppose we want to use “|” as a separated instead of comma then we will utilize it as:

const Array1 = [ '5','10','15','20','25' ];

const Resultant_Array = Array1.join(‘|’);

console.log("The resultant array using Join method is: ", Resultant_Array);

We will implement the above code in JavaScript as:

The resultant output will be:

filter() method in JavaScript

In JavaScript, the “filter()” method is utilized to filter an array on the basis of some condition. For instance, we want to filter positive numbers from an array, the code in JavaScript would be:

const all_numbers = [5,-10,15,-20,-25,30];

const Positive_only = all_numbers.filter(function(number){

return number >= 0;

});

console.log(Positive_only);

So, in the example, we have an array that consists of both positive as well as negative numbers, and we want to filter the array and display only positive numbers. So we set a condition that will check whether “the number is greater than or equal to 0” or not, as a result:

Our output shows that the “filter()” method prints the positive numbers only:

slice() method in JavaScript

JavaScript utilizes the “slice()” method to copy some part of the array into some new array, and it accepts two optional parameters starting index and the last index. Let’s consider a scenario where we want only the first three elements of the array, we will do this using the slice method. The last index must be the “n+1” index, it means if you want values between index 0 to index 2 then you must write the last index as ‘3’:

const Array1 = [ 5,10,15,20,25 ];

const Resultant_Array = Array1.slice(0,3);

console.log("The resultant array is : ", Resultant_Array);

Here, we take the first index as 0, and we write the last index as 3, the slice method will exclude the last index ‘3’ and it will consider the array elements for index 0, index 1, and index 2 only.

The output of the above program will be:

indexOf() method in JavaScript

JavaScript utilizes the indexOf method to find the occurrence of an element in an array, and it will return -1 if the element is not found in the array. Moreover, if an array has the same element twice then the “indexOf” method will return the position of the first occurrence. Consider the below-given code to understand how “indexOf” method works:

const Array1 = [ 5,10,15,15,20,25 ];

const Resultant_Array = Array1.indexOf(15);

console.log("The resultant array is : ", Resultant_Array);

The JavaScript implementation of the indexOf method will be:

The output of the above-given code will verify that the “indexOf” method returns the first instance of the searched element:

lastIndexOf() method in JavaScript

JavaScript utilizes the “lastindexOf” method to find the last appearance of an element in an array, and this method will return -1 when it fails to find an element in the array:

const Array1 = [ 5,10,15,15,20,25 ];

const Resultant_Array = Array1.lastIndexOf(15);

console.log("You searched for array index : ", Resultant_Array);

Implementation of the above code will be:

In Array1, ‘15’ is repeated twice, so the “lastIndexOf” method will return the index of the last occurrence of ‘15’:

includes() method in JavaScript

JavaScript uses “includes()” method to search any element in an array, as a result, it will return a Boolean value :

const Array1 = [ 5,10,15,15,20,25 ];

const Resultant_Array = Array1.includes(15);

console.log("Searched value found : ", Resultant_Array);

Here we searched for ‘15’ using the “includes()” method:

The “includes()” method will return the output true as ‘15’ is there in the array:

Conclusion:

The array accessor methods perform some actions on the arrays and as a result, they return a new enhanced representation in JavaScript. In this post, we have learned about such methods in detail by considering some examples. Moreover, we implemented each method in JavaScript and noted the desired output against each method. This article will help the readers to implement the built-in array accessor methods in JavaScript.