Is there a way to print all methods of an object in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to print all methods of an object in JavaScript.

An object's property with a function declaration is known as a JavaScript method. Methods are represented as object attributes and functions. We refer to actions carried out on objects as JavaScript methods.

It is also possible to call the objects without using parentheses. This is a reference to the method's owner object. The method manipulates data that is part of a Class. The Object that was called into a method is implicitly passed. A function connected to an object attribute is called a method. A method is made up of a piece of code that can be called using either dot notation or square bracket notation, along with the name of its object and method name.

Following are the methods used to print all methods of an object in JavaScript.

Using the Object.getOwnPropertyNames() Method

An array containing all the properties that can be found directly in a particular object is returned by the Object.getOwnPropertyNames() function. The function Object.getOwnPropertyNames() provides a string array, representing the enumerable and non-enumerable properties that can be found directly in the object obj.

A for-in loop ordering revealed (or by Object.keys()) across the properties of the Object is consistent with enumerable properties ordering in the array. The Object's non-negative integer keys, both non-enumerable and enumerable, are added to the array first in ascending order, then the string keys in the order of insertion.

Syntax

Object.getOwnPropertyNames(obj).filter(function (p) {
   return typeof obj[p] === 'function';
}

The Object.getOwnPropertyNames() returns all properties that belong to the object obj. It returns the properties of the object in the program.

Example 1

In the below example, we print all method of an object. First we created an object obj with two methods myMethod1 and myMethod2. We apply above syntax to print all the methods.


<html>
<body>
   <h3>Print all methods of an object using <i>Object.getOwnPropertyNames()</i></h3>
</body>
<script>
   var obj = {
      name : 'John',
      age : 32,
      myMethod1: function(age) { return age},
      myMethod2: function(name) {return name}
   }
   document.write("obj methods:");
   document.write("<br>" + Object.getOwnPropertyNames(obj).filter(function(p) {
      return typeof obj[p] === 'function';
   }));
</script>
</html>

Example 2

In this example, two objects are prepared. One is the Math object, and another is the Array. The Object.getOwnPropertyNames() will return the methods of the Math and Array object. The methods are shown in the output.


<html>
<body>
   <h2>Print all methods of an object using <i>Object.getOwnPropertyNames()</i></h2>
</body>
<script>
   document.write("Math methods:");
   document.write("<br>" + Object.getOwnPropertyNames(Math).filter(function(p) {
      return typeof Math[p] === 'function';
   }));
   document.write("<br>");
   document.write("Array methods:");
   document.write("<br>" + Object.getOwnPropertyNames(Array).filter(function(q) {
      return typeof Array[q] === 'function';
   }));
</script>
</html>

Using the typeof operator method

The job is to obtain all of the objects' methods from an HTML document containing some methods. Here, we construct a function that accepts an object as an argument. Use the typeof operator to determine if an object is a function or not. It returns the Object if the type of the Object is a function. This determines if an error happened or not, and if it did, how to address it correctly.

Syntax

function getAllMethods(obj = this) {
   return Object.keys(obj)
      .filter((key) => typeof obj[key] === 'function')
         .map((key) => obj[key]);
}

The Object returns the properties of the function and returns the methods of the Object.

Example

In this example, we have used jQuery. Two user-defined methods are created, and the typeof operator detects if an object is a function or not. The filter() method is used to build a new array from a given array that only contains the items of the original array that meet the criteria specified by the argument method. The Map object stores key-value pairs and keep track of the keys' initial insertion order. This checks if the typeof Object is a function and returns its value to the user's screen.


<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
   </script>
</head>
<body style = "text-align:center;">
   <h2>Print all methods of an object using <i>typeof</i> operator</h2>
   <p id = "root1" style = "font-size: 15px; font-weight: bold;"></p>
   <button onclick = "execute()">
      Click Here
   </button>
   <p id = "root2" style = "color:back"></p>
   <script>
      var level1 = document.getElementById("root1");
      var level2 = document.getElementById("root2");
      level1.innerHTML = "Click on the button to get " +
      " all methods of any Object.";
      function Obj() {
         this.a1 = function newFunc1() {
            return "From new function1";
         }
         this.a2 = function newFunc2() {
            return "From new function2";
         }
      }
      function getAllMethods(obj = this) {
         return Object.keys(obj)
         .filter((key) => typeof obj[key] === 'function')
         .map((key) => obj[key]);
      }
      function execute() {
         level2.innerHTML = getAllMethods(new Obj());
      }
   </script>
</body>
</html>

In this tutorial, we have discussed two different ways to print all methods of an object in JavaScript. The first method uses the Object.getOwnPropertyNames(). The second method uses the typeof operator to check whether the Object is a function.