
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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.
- Related Articles
- Add a method to a JavaScript object constructor?
- How to add a property, method to a JavaScript constructor?
- How to add a property to a JavaScript object using a variable as the name?
- JavaScript Boolean constructor Property
- JavaScript Date constructor Property
- What is a constructor to create String object in JavaScript?
- How to check if the constructor of an object is a JavaScript Object?
- How to add a method to a JavaScript object?
- How to remove a property from a JavaScript object?
- How to add an element to a javascript object?
- How to create JavaScript objects using object() constructor?
- How to add 30 minutes to a JavaScript Date object?
- How to add 2 hours to a JavaScript Date object?
- How to add 10 seconds to a JavaScript date object?
- How do we remove a property from a JavaScript object? - JavaScript
