In JavaScript, you can dynamically add properties to an object using dot notation or bracket notation. Dot notation is concise and easier to read, while bracket notation allows for using variable names or expressions as property names.
Both approaches achieve the same result, and you can use them to add new properties to an existing object or create a new object with properties dynamically.
Using dot notation:
objectName.propertyName = propertyValue;Using bracket notation:
objectName[propertyName] = propertyValue;
If you’re using bracket notation and want to use a variable as the property name, you can replace propertyName with the variable name:
let variableName = "propertyName";
objectName[variableName] = propertyValue;
This will add a new property to the object with the name stored in the variableName variable.
Add property to object JavaScript dynamically example
Simple example code.
//empty object
let person = {};
// Add properties using dot notation
person.name = "John";
person.age = 30;
person.city = "New York";
// Add a property using bracket notation
let propertyName = "email";
person[propertyName] = "[email protected]";
console.log(person);
Output:
Another example
Adding a property to an object dynamically in JavaScript, this time using only bracket notation:
// Create an object with some initial properties
let car = {
make: "Toyota",
model: "Camry",
year: 2019
};
// Define the new property name and value
let propertyName = "color";
let propertyValue = "red";
// Add the new property to the object using bracket notation
car[propertyName] = propertyValue;
// Log the updated object to the console
console.log(car);
Which is better dot notation or bracket notation for Adding Property in Object
Both dot notation and bracket notation can be used to add properties to an object dynamically in JavaScript, and they achieve the same result. However, there are some differences between the two notations that may make one better than the other in certain situations.
Here are some factors to consider when choosing between dot notation and bracket notation:
- Property name restrictions: Dot notation can only be used for property names that are valid JavaScript identifiers. If the property name contains special characters or starts with a number, you must use bracket notation. Bracket notation allows for more flexibility in naming properties since it can handle any string as a property name.
- Readability: Dot notation is generally more readable and easier to understand than bracket notation, especially when the property name is a simple identifier. It is also shorter and more concise, which can make the code easier to read and understand.
- Dynamic property names: If you need to add a property to an object with a dynamically generated name, you must use bracket notation. This is because you can use a variable or an expression to compute the property name at runtime.
- Performance: In general, dot notation is faster than bracket notation, especially in modern JavaScript engines. However, the performance difference is usually negligible and is unlikely to be a bottleneck in most applications.
In summary, dot notation is generally preferred for adding properties to an object when the property name is a simple identifier and is known at development time. Bracket notation should be used when the property name is dynamic or contains special characters. However, the choice between the two notations ultimately depends on the specific requirements and constraints of the project.
Comment if you have any doubts or suggestions on this JS Object Property topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version