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 an element to a JavaScript object?
In JavaScript, objects are real-time entities that contain properties and methods. Objects store data in key-value pairs, where keys are called properties and values are called property values.
There are multiple ways to add new properties to existing JavaScript objects. Let's explore the most common approaches.
Object Creation Syntax
var obj = new Object();
Or using object literal syntax:
var obj = {property1: value1, property2: value2};
Using Dot (.) Operator
The dot operator is the most common way to add properties to JavaScript objects. It acts as a connector between the object and the property name.
Syntax
obj.propertyName = value;
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Element in an Object</title>
</head>
<body>
<script>
var student = {
name: 'abc',
age: 20,
city: 'Hyderabad'
};
// Adding new property using dot operator
student.marks = 80;
document.write(
"Name: " + student.name + "<br>" +
"Age: " + student.age + "<br>" +
"City: " + student.city + "<br>" +
"Marks: " + student.marks
);
console.log(student);
</script>
</body>
</html>
Name: abc Age: 20 City: Hyderabad Marks: 80
Using Object.assign() Method
The Object.assign() method copies properties from source objects to a target object. It can create new objects or modify existing ones.
Syntax
Object.assign(target, source);
Example 1: Creating New Object Without Modifying Original
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Element in an Object</title>
</head>
<body>
<script>
var book = {
name: 'English',
price: 250
};
// Create new object with additional property
var newobj = Object.assign({}, book, {publishyear: 2015});
document.write(
"Name: " + newobj.name + "<br>" +
"Price: " + newobj.price + "<br>" +
"Publish year: " + newobj.publishyear
);
</script>
</body>
</html>
Name: English Price: 250 Publish year: 2015
Example 2: Modifying Existing Object
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Element in an Object</title>
</head>
<body>
<script>
var book = {
name: 'English',
price: 250
};
// Modify existing object directly
var newobj = Object.assign(book, {publishyear: 2015});
document.write(
"Name: " + newobj.name + "<br>" +
"Price: " + newobj.price + "<br>" +
"Publish year: " + newobj.publishyear
);
</script>
</body>
</html>
Name: English Price: 250 Publish year: 2015
Using Square Bracket [] Notation
Square bracket notation allows you to add properties using variable names or strings that contain special characters.
Syntax
obj['propertyName'] = value; obj[variableName] = value;
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Element in an Object</title>
</head>
<body>
<script>
var student = {
name: 'abc',
age: 20
};
// Adding property using square bracket notation
student['city'] = 'Hyderabad';
document.write(
"Name: " + student.name + "<br>" +
"Age: " + student.age + "<br>" +
"City: " + student.city
);
console.log(student);
</script>
</body>
</html>
Name: abc Age: 20 City: Hyderabad
Comparison of Methods
| Method | Use Case | Modifies Original |
|---|---|---|
| Dot Operator | Simple property names | Yes |
| Object.assign() | Multiple properties, create new object | Depends on target |
| Square Brackets | Dynamic property names, special characters | Yes |
Conclusion
JavaScript offers flexible ways to add properties to objects. Use dot notation for simple cases, square brackets for dynamic property names, and Object.assign() when you need to add multiple properties or create new objects.
75K+ Views
