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
Selected Reading
How to add properties and methods to an object in JavaScript?
In JavaScript, you can add properties and methods to objects using several approaches. The most common methods include direct assignment, using the prototype property for constructor functions, and using Object.defineProperty().
Method 1: Direct Property Assignment
The simplest way to add properties to an existing object is direct assignment:
<html>
<head>
<title>Direct Property Assignment</title>
</head>
<body>
<script>
let car = {
brand: "Toyota",
model: "Camry"
};
// Adding new properties
car.year = 2023;
car.color = "Blue";
// Adding a method
car.getInfo = function() {
return this.brand + " " + this.model + " (" + this.year + ")";
};
document.write("Brand: " + car.brand + "<br>");
document.write("Model: " + car.model + "<br>");
document.write("Year: " + car.year + "<br>");
document.write("Info: " + car.getInfo() + "<br>");
</script>
</body>
</html>
Method 2: Using Prototype for Constructor Functions
When working with constructor functions, use the prototype property to add properties and methods that will be shared by all instances:
<html>
<head>
<title>JavaScript Prototype Property</title>
</head>
<body>
<script>
function Book(title, author) {
this.title = title;
this.author = author;
}
// Adding properties via prototype
Book.prototype.price = null;
Book.prototype.publisher = "Unknown";
// Adding a method via prototype
Book.prototype.getDetails = function() {
return this.title + " by " + this.author + " - $" + this.price;
};
var myBook = new Book("JavaScript Guide", "John Doe");
myBook.price = 29.99;
myBook.publisher = "Tech Books";
document.write("Book title: " + myBook.title + "<br>");
document.write("Book author: " + myBook.author + "<br>");
document.write("Book price: $" + myBook.price + "<br>");
document.write("Publisher: " + myBook.publisher + "<br>");
document.write("Details: " + myBook.getDetails() + "<br>");
</script>
</body>
</html>
Method 3: Using Object.defineProperty()
For more control over property attributes, use Object.defineProperty():
<html>
<head>
<title>Object.defineProperty() Method</title>
</head>
<body>
<script>
let person = {
name: "Alice"
};
// Adding property with specific attributes
Object.defineProperty(person, 'age', {
value: 25,
writable: true,
enumerable: true
});
// Adding a method
Object.defineProperty(person, 'greet', {
value: function() {
return "Hello, I'm " + this.name + " and I'm " + this.age + " years old.";
},
writable: false
});
document.write("Name: " + person.name + "<br>");
document.write("Age: " + person.age + "<br>");
document.write("Greeting: " + person.greet() + "<br>");
</script>
</body>
</html>
Comparison
| Method | Use Case | Advantages |
|---|---|---|
| Direct Assignment | Adding to existing objects | Simple and straightforward |
| Prototype | Constructor functions | Shared across all instances |
| Object.defineProperty() | Fine-grained control | Control over property attributes |
Conclusion
Choose direct assignment for simple property additions, use prototype for constructor functions when you want shared properties, and Object.defineProperty() when you need control over property behavior.
Updated on: 2026-03-15T23:18:59+05:30
295 Views
Advertisements