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 can we use a JavaScript function as an object?
This tutorial will teach us to use JavaScript functions as objects. In JavaScript, functions are first-class objects, meaning they can have properties and methods just like regular objects. This powerful feature allows us to create constructor functions that act as blueprints for creating multiple similar objects.
The JavaScript object is an entity that contains key-value pairs with unique keys. Each key has values that can be of any type. We can access object values using their keys.
We can create a function that behaves like an object using the this keyword and the new operator. Below is a detailed explanation of how to use functions as objects.
Using JavaScript Function as an Object
To make functions work as objects, we define properties inside the function using the this keyword. When we create a new instance using the new operator, JavaScript creates a new object and binds this to that object.
Syntax
Normal object creation:
let object = {
key: value,
// other key-value pairs
};
Using function as object constructor:
function FuncObject() {
this.key1 = "hello";
this.key2 = "world";
}
let object = new FuncObject();
let value = object.key1; // accessing object properties
Parameters
this ? A reserved keyword in JavaScript that refers to the current object context. Inside a constructor function,
thisrefers to the newly created object instance.
Basic Example
Here's how to create and use a function as an object constructor:
<html>
<head>
<title>JavaScript Function as Object</title>
</head>
<body>
<h2>JavaScript function as an object</h2>
<p>Values accessed from function-based object:</p>
<div id="output"></div>
<script>
function Website() {
this.name = "TutorialsPoint";
this.url = "tutorialspoint.com";
this.description = "A computer science portal";
}
// Creating instance of the function as an object
let siteObject = new Website();
let output = document.getElementById("output");
output.innerHTML = "Name: " + siteObject.name + "<br/>";
output.innerHTML += "URL: " + siteObject.url + "<br/>";
output.innerHTML += "Description: " + siteObject.description + "<br/>";
</script>
</body>
</html>
Name: TutorialsPoint URL: tutorialspoint.com Description: A computer science portal
Adding Parameters and Methods
Constructor functions become more powerful when we add parameters to initialize object properties dynamically and include methods for object behavior.
Syntax
function FuncObject(param1, param2) {
this.key1 = param1;
this.key2 = param2;
this.method = function() {
// method implementation
};
}
let newObject = new FuncObject("hello", "world");
newObject.method(); // calling the method
Advanced Example
This example shows a constructor function with parameters and methods:
<html>
<body>
<h2>Function as Object with Methods</h2>
<p>Constructor function with parameters and methods:</p>
<div id="result"></div>
<script>
function Calculator(num1, num2) {
this.firstNumber = num1;
this.secondNumber = num2;
this.add = function() {
return this.firstNumber + this.secondNumber;
};
this.getInfo = function() {
return "Calculator with numbers: " + this.firstNumber + " and " + this.secondNumber;
};
}
// Creating calculator object with arguments
let calc = new Calculator(15, 25);
let result = document.getElementById("result");
result.innerHTML = "First Number: " + calc.firstNumber + "<br/>";
result.innerHTML += "Second Number: " + calc.secondNumber + "<br/>";
result.innerHTML += "Sum: " + calc.add() + "<br/>";
result.innerHTML += calc.getInfo() + "<br/>";
</script>
</body>
</html>
First Number: 15 Second Number: 25 Sum: 40 Calculator with numbers: 15 and 25
Key Benefits
Reusability ? Create multiple objects with the same structure but different values
Encapsulation ? Group related properties and methods together
Dynamic Initialization ? Pass different parameters to create customized objects
Conclusion
Using functions as object constructors provides a powerful way to create multiple similar objects with shared structure but different values. The this keyword and new operator work together to create object instances, making code more organized and reusable than creating individual objects manually.
2K+ Views
