How to access methods of an array of objects in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we shall learn to access the methods of an array of objects in JavaScript.

What is an array of objects? An array of objects can store several values in a single variable. Every value has an array index. The values can be objects, booleans, functions, numbers, strings, or another array.

Arrays are extremely flexible because they are listed as objects. Therefore, we can access it easily.

An array of objects has a lot of built-in methods. Some are concat, forEach, join, indexOf, splice, sort, slice, lastIndexOf, filter, map, pop, shift, push, unshift, reverse, find, reduce, isArray, length, includes, etc.

Using the dot Notation

In this method, we can access the methods of an array of objects using the array and the dot notation.

Users can follow the syntax below for using this method.

Syntax

//create an array of objects
const arr = [v1,v2,…vn];
//access the method name
arr.methodName();

Here, the array name directly accesses the array method with the dot notation.

Parameters

v1,v2,...v_n − The array elements.

Example

In this program, we access the array join method using the input array and the dot notation following the syntax given above.

When the user ticks on the button, the function named getArrayMethod gets called and joins the input array values with the @ operator.


<html>
<body>
   <p> The JavaScript program to access the methods of an array of objects
   using the dot notation </p>
   <div id="arrMethBtnWrap">
      <p> Click on the button </p>
      <button onclick="getArrayMethod();"> Join </button>
   </div>
   <br>
   <pre id="arrMethInp"> </pre>
   <p id="arrMethOut"> </p>
   <script>
      function getArrayMethod(){
         var arrMethObj=["A","B","C"];
         var arrMethInp=document.getElementById("arrMethInp");
         var arrMethOut=document.getElementById("arrMethOut");
         var arrMethBtnWrap=document.getElementById("arrMethBtnWrap");
         arrMethBtnWrap.style.display="none";
         arrMethInp.innerHTML="The input array="+ JSON.stringify(arrMethObj);
         var arrMethJoin = arrMethObj.join("@");
         arrMethOut.innerHTML=`Accessed array join method and combined values
         with @ symbol -> ` + arrMethJoin;
      }
   </script>
</body>
</html>

Using array prototype method call function

In this method, we can use a function.prototype.call on Array.prototype to access the methods of an array of objects.

Users can follow the syntax below for using the array prototype method.

Syntax

//create an array of objects
const arr = new Array();
//access method name
Array.prototype.methodName.call(arg);

The array method is accessed here using the array prototype and call function

Parameters

arg − The array of objects and any other values.

Example

In this program, we access the array join method using the array prototype method call function following the syntax given above.

When the clicks the button, we call the method getArrayProtMethod. The method joins the input array values, and the string arguments are passed to the Array.prototype.join.call function and displays the output to the user.


<html>
<body>
   <p> The JavaScript program to access the methods of an array of objects using the array prototype method call. </p>
   <div id="arrProtBtnWrap">
      <p> Click on the button </p>
      <button onclick="getArrayProtMethod();"> Join </button>
   </div>
   <br>
   <pre id="arrProtInp"> </pre>
   <p id="arrProtOut"> </p>
   <script>
      function getArrayProtMethod(){
         var arrProtObj=["A",["X","Y"],"B"];
         var arrProtInp=document.getElementById("arrProtInp");
         var arrProtOut=document.getElementById("arrProtOut");
         var arrProtBtnWrap=document.getElementById("arrProtBtnWrap");
         arrProtBtnWrap.style.display="none";
         arrProtInp.innerHTML="The input array=" +
         JSON.stringify(arrProtObj);
         function getJoin(x, y, z){
            const arrProtObj=Array.prototype.join.call(arguments);
            arrProtOut.innerHTML=`Accessed array join method and combined the
            input array values with two string arguments using the array
            prototype method call. </b> <br><br>` + arrProtObj;
         }
         getJoin(arrProtObj, "S1", "S2");
      }
   </script>
</body>
</html>

In this tutorial, we went through the two ways to access the methods of an array of objects in JavaScript.

The article might have helped you understand the method of access using the array with the dot notation and the array prototype function that accesses the array methods.

In the long run, the Array.prototype method goes well. The reason is that this method avoids the need for loops and other iteration options.