Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add a Property to a JavaScript Object Constructor
In this article, we'll go over how to add a property to a JavaScript object constructor in JavaScript with appropriate examples.
Adding a property to an object constructor is different from adding a property to a normal object. If we want to add a property, we have to add it in the constructor itself rather than outside the constructor whereas we can add anywhere in a normal object.
To get a better understanding of the given task, let's look into the syntax and usage of the constructor in JavaScript.
Syntax
The syntax for a constructor is ?
Constructor(); // No parameters Constructor(param1); //One parameter constructor Constructor(param1,param2,?,paramN) // N-parameter constructor.
Where param1,param2,..paramN are the parameters passed to the constructor.
Example 1
This is an example program to add a property to the JS Object constructor. In this example, we are adding parameter as a property to the constructor.
<!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 Constructor.</title>
</head>
<body style="text-align : center">
<h3>Add a method to a JavaScript Object Constructor.</h3>
<p id="prop-to-obj"></p>
<script>
function Car(name, model, year, color) {
this.Name = name;
this.Model = model;
this.Year = year;
this.Color = color;
this.type = 'SUV'
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
document.getElementById("prop-to-obj").innerHTML = car1.Name+" is of "+car1.type+" type";
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 2
This is an example program to add a method as a property to the JS object contructor. We can add a function to object as a property. Then they can be referred as method.
<!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 Constructor.</title>
</head>
<body style="text-align : center">
<h3>Add a method to a JavaScript Object Constructor.</h3>
<p id="method-to-obj-constructor"></p>
<script>
function Car(name, model, year, color) {
this.Name = name;
this.Model = model;
this.Year = year;
this.Color = color;
this.type = 'SUV';
this.description = function() {
return this.Name+" is of "+this.Model+" model and launched in the year "+this.Year+" and is of "+this.type+" type."
}
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
document.getElementById("method-to-obj-constructor").innerHTML = car1.description();
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 3
This is an example program to add properties (method and parameter) to a JavaScript Object Constructor.
<!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 Constructor.</title>
</head>
<body style="text-align : center">
<h3>Add a method to a JavaScript Object Constructor.</h3>
<p id="method-to-obj-constructor"></p>
<script>
function Student(name, rollNo, course) {
this.Name = name;
this.RNo = rollNo;
this.course = course;
this.year = "2022";
this.college = "St. Xaviers College";
this.studentDetails = function () {
return this.Name + " with roll number " + this.RNo + " is a student of : " + this.college;
}
}
var studentObj = new Student("Harsha", "17355B07C7", "CSE");
document.getElementById("method-to-obj-constructor").innerHTML = studentObj.studentDetails();
</script>
</body>
</html>
On executing the above code, the below output is generated.
815 Views
