Do you think JavaScript Functions are Object Methods?

Front End Technology Javascript Web Development

Compared to other languages, JavaScript works differently, especially if you get confused between function and methods. In this tutorial, we will learn whether JavaScript functions are object methods. The example written in this tutorial gives you a better idea about the differences and which one is more convenient for us.

What are JavaScript Functions?

Functions are generally used to define a particular task that we want to perform. It is a set of instructions, and every function has its block of code. Functions can also have parameters by performing desired operations on those parameters.

Syntax

The syntax for the JavaScript function is given below.

function name_of_function(parameters){
   //body of function
      //scope of function
}

What are Methods?

The method is similar to the function, but it is always defined for objects, meaning it is an object's property. By using methods, we can manipulate other properties of an object. We can’t define any methods outside the block of the object.

Syntax

The syntax for JavaScript object methods is given below.

Var  variable = {
   //properties
   Method : function()
   {
      //body of method
   }
}

Difference between Functions and Methods

JavaScript function does not need any object as a reference to call as functions are not bound with any specific object. But we have to pass an object as a reference while calling methods. The object contains all properties, and that’s why we can manipulate it by methods.

If user want to assign any value that functions or methods return, then the syntax for calling (invoking) them in code is different.

Syntax

The syntax is given below to invoke the function.

Var variable = name_of_funciton( parameter );
// calling the function
Name_of_function( parameter );

Syntax

The syntax given below to invoke the object method.

Var variable = obj.method(parameter);
//invoking the object an method
Obj.method(parameter);

In this syntax ‘obj’ is an object which contain ‘method’ as property.

Example

In the following example, we will create object = ‘info’, and function = ‘getinfo’ . and then we will create the following properties of the object ‘name , IMDB , getname , getIMDB , information ’.

Furthermore, we will invoke the function and object method for the demonstration purpose.


<html>
<head>  
</head>
<body>
   <h2> Do you think JavaScript Functions are Object Methods? </h2>
   <div>
      <h4> When we call <i> functions </i> </h4>
      <p> getting info about series : <span id = "seriesfunction"> </span> </p>
   </div>
   <div>
      <h4> When we call <i> methods </i> </h4>
      <p> getting info about series : <span id = "seriesmethod" > </span> </p>
   </div>
   <script>
      //making an object
      var info = {
         name:"pending",
         IMDB:00,
         getname: function(NAME) {
            this.name=NAME;
         },
         getIMDB: function(imdb) { 
            this.IMDB=imdb;
         },
         information: function() // this are methods of object info
         {
            return this.name  + " " + "IMDB : " + this.IMDB; 
         }
      };
      info.getname('money_heist');
      info.getIMDB(8.2);
      document.getElementById("seriesmethod").innerHTML = info.information();

      //creating an function
      function getinfo(name_,imdb_rate) {
         let series_name=name_;
         let rate=imdb_rate;
         return series_name  + " " + "IMDB : " + rate;
      }
      
      // assigning the value of function to the variable
      var series = getinfo('stranger_things',8.7); 
      document.getElementById("seriesfunction").innerHTML = series;
   </script>
</body>
</html>

In the above example, both function and method are working the same, but the way of defining the method and function are not the same.

So, users got an idea of how the function and methods work the same way but in a different manner. Both of them have their own advantages whenever we deal with multiple properties of the same element, then methods work efficiently, and if users want to do some operation without combining with any object properties, they should use JavaScript functions.