Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can we use a JavaScript function as an object?
This tutorial will teach us to use the JavaScript functions as an object. However, functions, objects, and arrays are the mutable data types in JavaScript, and all mutable data types are the objects.
The JavaScript object is one type of entity that contains the key-value pairs. It contains unique keys; every key has some values that can be of any type. We can use the object key to access the values of the objects.
We can create a function so that it behaves like an object. Below, we have given a detailed explanation of converting the function to an object.
Use JavaScript function as an object
In this section, we will learn basic things to make functions works as an object in JavaScript. We can define the variables inside the function and initialize the values of variables of the key. To create a new object, we will create an instance of the object by passing the arguments we need inside the function to initialize the key values.
Syntax
Users can follow the below syntax to use the function as an object.
Syntax for normal object.
let object = {
key : value;
// other key and values
}Syntax to use function as an object.
function funcObject() {
this.key1 = "hello";
this.key2 = "world";
}
Var object = new funcObject();
let value = object.key1; // accessing the object key valuesParameters
this − It is the reserved keyword in JavaScript. This keyword refers to the variable, object, or method of the current instance. It means that if we use this keyword inside the function or block, it refers to the variable of that block only. If we use this keyword globally inside the code, it refers to the global variable.
Example
In the below example, we have created a single function. We will create the instance of the function and use it as an object. After that, using the object of the function, we will access the variables of the function as we access the values of the normal object using keys.
<html>
<head>
<title> JavaScript User defined object </title>
</head>
<body>
<h2> JavaScript function as an object </h2>
<p> Values of the object, after using function as an object. </p>
<div id="value"> </div>
<script>
function funcObject() {
this.name = " tutorialsPoint ";
this.site = " tutorialsPoint.com ";
this.info = " A computer science portal "
}
// Creating the instance of the function to use it as an object.
let newObject = new funcObject();
let values = document.getElementById("value");
values.innerHTML = " name: " + newObject.name + ". <br/>";
values.innerHTML += "site: " + newObject.site + ". <br/>";
values.innerHTML += "info: " + newObject.info + ". <br/>";
</script>
</body>
</html>In the above example, the function works the same as the object. We have accessed the function variables as we access the values of the object keys, and it prints the above output on the screen.
Add parameters and methods inside the function
In this section, we will add the parameters to the function. Using the parameters of the function, we can initialize the object's keys by the parameters. We will pass the arguments to instances of the object when we create a new object using the ‘new’ keyword.
Rather than creating a normal object, using the function as an object has more benefits. When we use the parameterize function as an object, we can create a new object with different values by passing the values of keys as an argument. If we use a normal object, we need to re-initialize the value for every key.
Syntax
Users can follow the below syntax to declare method inside the function which we use as an object.
function funcObject(param1, param2) {
this.key1 = param1;
this.key2 = param2;
this.method = function () {
// code for current method
}
}
// object of the function with arguments
let newObject = new funcObject( "hello", "world" );
newObject.method(); // invoking the method of the objectExample 2
In the below example, we have created the function with parameters. Also, the function contains the method which we have assigned to the variable. We have created the anonymous method to assign it to the variable. After that, we have created the instance of the object using the function by passing the arguments.
<html>
<body>
<h2> Use Javascript function as an object. </h2>
<p> Create method inside the function, initialize value of the function variable, and use it as an object. </p>
<div id="value"> </div>
<script>
function funcObject( param1, param2 ) {
this.key1 = param1;
this.key2 = param2;
this.method = function () {
return " The sum of 10 + 30 is " + ( 10 + 30 );
}
}
// Creating the instance of the function to use it as an object.
let newObject = new funcObject("hello", "world");
let values = document.getElementById("value");
values.innerHTML = " key1: " + newObject.key1 + " <br/>";
values.innerHTML += " key2: " + newObject.key2 + " <br/>";
values.innerHTML += " return value from method: " + newObject.method() + " <br/>";
</script>
</body>
</html>Conclusion
We have learned to use the function as an object. Here, this keyword plays an important role in creating variables of the current function. When using the user-define objects, it is better to manage the objects with multiple values. Furthermore, we can pass the values to initialize the key and create the new object just with a single line of code.
2K+ Views
To Continue Learning Please Login