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 add a method to a JavaScript object?
In this article, we'll go over how to add a method to a JavaScript object in JavaScript with appropriate examples.
A JavaScript object is an entity which has properties. A property can be a variable or a method which define state and behavior of the object. A method is a property of an object that adds behavior to an object.
We can add a method to a JavaScript object using object prototype. All JavaScript objects get their attributes and methods from a prototype.
Let's understand this concept better with the help of examples further in this article.
Syntax
The syntax to add a method to the JavaScript object using Object Prototype is ?
functionName.prototype.newMethodName = function(){}
or
functionName.prototype.newMethodName = function(param1,param2,..paramN){}
Where,
functionName is the existing function name
newMethodName is the method name to be added.
param1, param2..paramN are the parameters that are to be passed to the new method.
Method 1: Using Prototype
This is an example program to add a method to an object by extending the behavior of Calculator function prototype with add.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To add a method to a JavaScript object.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function Calculator(){
Calculator.prototype.add = function (a,b){
var result = a+b;
document.getElementById('method-to-obj').innerHTML='The sum of two numbers is : '+result;
}
}
var calc = new Calculator();
calc.add(10,20);
</script>
</body>
</html>
The sum of two numbers is : 30
Method 2: Adding Method to Specific Object Instance
This is an example program to add a method to JavaScript object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To add a method to a JavaScript object.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function Car(name, model, year, color) {
this.Name = name;
this.Model = model;
this.Year = year;
this.Color = color;
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
car1.prop = function() {
return ""+this.Name+" has launched in the year "+this.Year;
}
document.getElementById("method-to-obj").innerHTML = car1.prop();
</script>
</body>
</html>
Maruti has launched in the year 2016
Method 3: Using Factory Function with Methods
This is an example program to create a function which returns an object. In this example, a .mul is created as a property of the object. Each of the new object created has a .mul function created for them. In this example, method is a parameter to the function.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To add a method to a JavaScript object.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function ReturnCalculatorObject() {
var a, b,
multiplication = function (a, b) {
var result = a * b;
document.getElementById('method-to-obj').innerHTML = 'The Product of two numbers is : ' + result;
},
object1 = {
mul: multiplication
};
return object1;
}
var calc = new ReturnCalculatorObject();
calc.mul(20, 30);
</script>
</body>
</html>
The Product of two numbers is : 600
Comparison
| Method | Applies To | Performance | Use Case |
|---|---|---|---|
| Prototype | All instances | Memory efficient | Shared functionality |
| Instance method | Single instance | More memory usage | Specific behavior |
| Factory function | Returned objects | Memory per instance | Custom object creation |
Conclusion
You can add methods to JavaScript objects using prototypes (shared across instances), directly to instances (specific to one object), or through factory functions. Choose prototypes for shared behavior and instance methods for object-specific functionality.
7K+ Views
