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() constructor 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 Object Literal Notation

This is the most straightforward approach. You place your key-value pairs separated by ':' inside a set of curly braces, and your object is ready to use.

We can pass an object to a JavaScript function using destructuring, where the function parameters must have the same names as the object property names.

Syntax

function functionName({ property1, property2 }) {
   // function body using property1 and property2
}

let objectName = {
   property1: value1,
   property2: value2
};

functionName(objectName);

Example

The rectangle object is created using literal notation. The rectangle's length and breadth are passed into this object. We create the areaOfRectangle() function to calculate the area using destructuring assignment.

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

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

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

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

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

Area of rectangle: 1617

Passing Entire Object as Parameter

You can also pass the entire object to a function and access its properties using dot notation inside the function.

Example

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

      // Function that accepts entire object
      function calculateArea(shape) {
         return shape.length * shape.width;
      }

      // Create object
      let rectangle = {
         length: 25,
         width: 15,
         color: "blue"
      };

      // Pass entire object
      let area = calculateArea(rectangle);

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

Rectangle area: 375
Rectangle color: blue

Using Constructor Functions and Prototypes

JavaScript allows creating objects using constructor functions. The this keyword refers to the current object instance, and prototypes allow adding methods to all instances.

Syntax

function ConstructorName(param1, param2) {
   this.param1 = param1;
   this.param2 = param2;
}

ConstructorName.prototype.methodName = function() {
   return this.param1;
};

Example

In this example, we create a constructor function and use prototypes to add methods. The object is created using the new keyword.

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

      // Constructor function
      function Student(name, grade) {
         this.name = name;
         this.grade = grade;
      }

      // Add method using prototype
      Student.prototype.getInfo = function() {
         return "Student: " + this.name + ", Grade: " + this.grade;
      };

      // Function that accepts object parameter
      function displayStudent(student) {
         return student.getInfo();
      }

      // Create object using constructor
      let student1 = new Student("Alice", "A+");

      // Pass object to function
      let info = displayStudent(student1);

      output.innerHTML = info;
   </script>
</body>
</html>

Student: Alice, Grade: A+

Comparison of Methods

Conclusion

JavaScript offers multiple ways to pass objects as function parameters. Use destructuring for specific properties, pass entire objects for flexibility, or use constructor functions for object-oriented approaches. Choose the method that best fits your use case.

• JavaScript - Parameters vs Arguments Javascript
• JavaScript - Function Parameters Javascript
• JavaScript - Rest Parameter Javascript
• ES6 - Passing Arrays to Functions Es6
• JavaScript - Function call() Method Javascript