How to pass an object as a parameter in JavaScript function?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to pass an object as a parameter in a JavaScript function.

One of JavaScript's data types is represented by the Object type. It is used to store keyed collections as well as more complex entities. The Object() function Object() or the object initializer / literal syntax can be used to create objects.

Almost all JavaScript objects are instances of Object; a typical object inherits properties (including methods) from Object.prototype, though these properties may be shadowed (a.k.a. overridden).

Following are the methods used to pass an object as a parameter in a JavaScript function.

Using the Literal Object Notation

This is extremely straightforward. You have to just place your key-value pairs separated by ':' inside a set of curly braces(), and your object will be ready to serve (or consumed).

We can pass an object to a JavaScript function, but the arguments must have the same names as the Object property names.

Syntax

function areaOfRectangle({ l,b }) {
   return l * b;
}
let rectangle = {
   l: 22,
   b: 10
};
areaOfRectangle(rectangle);

The rectangle object takes the input of length and breadth of a rectangle whose area is calculated when this object is passed as a parameter to the areaofRectangle() function.

Example

The rectangle object is created using the literal notation object in this example. The rectangle’s length and breadth are passed into this object. We create the areaOfRectangle() function to calculate the area of the rectangle. This function is called, and the rectangle object is passed to it.


<html>
<body>
   <p id="result"></p>
   <script>
      let output = document.getElementById("result");

      // define a function
      function areaOfRectangle({l, b}) {
         return (l * b);
      }

      // define an object
      let rectangle = {l: 77, b: 21 };

      // Call the function passing the object to fucntion as parameter.
      let area = areaOfRectangle(rectangle);

      output.innerHTML = "Area of rectangle : " + area + "<br>";
   </script>
</body>
</html>

Using this and prototype

Compared to other languages, the "this" keyword in a function behaves slightly differently in JavaScript. It also distinguishes between strict and non-strict modes.

This value is usually determined by how a function is called (runtime binding). It cannot be set during execution and may differ each time the function is called. The bind() method can change the value of a function's this no matter how it's called, and arrow functions don't have their binding (it retains this value of the enclosing lexical context).

JavaScript objects inherit features from one another through the use of prototypes. This article will explain a prototype, how prototype chains work, and how to set a prototype for an object.

Syntax

var func = function(param1) {
   this.param1 = param1;
};
func.prototype.display = function() {
   return this.param1;
};

The function func() takes a parameter param, which is passed to the display function to display its value.

Example

In the example, we have created an object in the variable res. This variable calls the function func() with a parameter of 11.98. To make an object, use the new keyword in conjunction with the Object() function Object(), and then add properties to this object. This function passes the parameter as an object and helps to display it using the display() function.


<html>
<body>
   <script>
      var func = function(param1) {
         this.param1 = param1;
      };
      func.prototype.display = function() {
         return this.param1;
      };
      function display(val) {
         document.write(val());
      }
      var res = new func(11.98);
      display(res.display.bind(res));
   </script>
</body>
</html>

In this tutorial, we have learned two techniques to pass an object as a parameter in the JavaScript function. The first technique is to use an object whose arguments must have the same names as the Object property names. The second technique is to use the "this" function and the prototype method.