Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to pass an object as a parameter in JavaScript function?
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
| Method | Use Case | Advantage |
|---|---|---|
| Destructuring | When you need specific properties | Clean syntax, explicit parameters |
| Entire Object | When you need multiple properties | Simple, access any property |
| Constructor + Prototype | Object-oriented programming | Reusable, supports 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.
34K+ Views
