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
Add a property to a JavaScript object constructor?
In this article, we'll go over how to add properties to a JavaScript object constructor with appropriate examples.
Adding a property to an object constructor is different from adding a property to a normal object. Properties must be added inside the constructor function itself, not outside. This ensures all instances created from the constructor have access to these properties.
To get a better understanding, let's look at the syntax and usage of constructors in JavaScript.
Syntax
The syntax for a constructor is:
function Constructor() {
// No parameters
}
function Constructor(param1) {
// One parameter constructor
}
function Constructor(param1, param2, ...paramN) {
// N-parameter constructor
}
Where param1, param2, ...paramN are the parameters passed to the constructor.
Adding Simple Properties
This example shows how to add both parameter-based and fixed properties to a constructor:
<!DOCTYPE html>
<html>
<head>
<title>Add Properties to JavaScript Object Constructor</title>
</head>
<body>
<h3>Add Properties to 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'; // Fixed property
this.available = true; // Another fixed property
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
document.getElementById("prop-to-obj").innerHTML =
car1.Name + " is of " + car1.type + " type and is " +
(car1.available ? "available" : "not available");
</script>
</body>
</html>
Maruti is of SUV type and is available
Adding Methods as Properties
You can add functions as properties to constructors. These functions become methods of the object:
<!DOCTYPE html>
<html>
<head>
<title>Add Methods to JavaScript Object Constructor</title>
</head>
<body>
<h3>Add Methods to 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';
// Method as property
this.description = function() {
return this.Name + " is of " + this.Model + " model, launched in " +
this.Year + " and is of " + this.type + " type.";
}
// Another method
this.startEngine = function() {
return this.Name + " engine started!";
}
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
document.getElementById("method-to-obj-constructor").innerHTML =
car1.description() + "<br>" + car1.startEngine();
</script>
</body>
</html>
Maruti is of Vitara Brezza model, launched in 2016 and is of SUV type. Maruti engine started!
Complete Example with Multiple Properties
This example demonstrates adding various types of properties to a constructor:
<!DOCTYPE html>
<html>
<head>
<title>Complete Constructor Properties Example</title>
</head>
<body>
<h3>Complete Constructor Properties Example</h3>
<p id="complete-example"></p>
<script>
function Student(name, rollNo, course) {
// Parameter-based properties
this.Name = name;
this.RNo = rollNo;
this.course = course;
// Fixed properties
this.year = "2024";
this.college = "St. Xaviers College";
this.isActive = true;
// Method properties
this.studentDetails = function() {
return this.Name + " with roll number " + this.RNo +
" is a " + this.course + " student of " + this.college;
}
this.getFullInfo = function() {
return this.studentDetails() + " (Year: " + this.year + ")";
}
}
var studentObj = new Student("Harsha", "17355B07C7", "CSE");
document.getElementById("complete-example").innerHTML =
studentObj.getFullInfo();
</script>
</body>
</html>
Harsha with roll number 17355B07C7 is a CSE student of St. Xaviers College (Year: 2024)
Key Points
- Use `this` keyword: All properties must be assigned using `this.propertyName`
- Inside constructor only: Properties must be defined within the constructor function
- Types of properties: Can add simple values, objects, arrays, or functions (methods)
- Instance access: Each object instance gets its own copy of these properties
Conclusion
Adding properties to JavaScript object constructors involves defining them inside the constructor using the `this` keyword. This ensures all instances created from the constructor inherit these properties and methods.
926 Views
