AppDividend
Latest Code Tutorials

JavaScript: How to Add Property to Object

0

Is it possible to add properties to this Object after its initial creation if the properties’ name is not determined until run time? Well, the answer is yes, you can do add dynamic properties to object after Object is created, and let’s see how we can do that.

Javascript add property to Object

To add a new property to Javascript object, define the object name followed by the dot, the name of a new property, an equals sign and the value for the new property.

It does not matter if you have to add the property, change the value of the property, or read a value of the property, you have the following choice of syntax.

  1. Dot Syntax
  2. Square Bracket Notation. (Dot syntax is more straightforward and is generally sufficient).

Dot syntax

To add a new property in Javascript Object, use dot syntax. It will add a property to the existing Object.

Consider the following example JavaScript Object literal.

// app.js

let obj = {
  name: 'Krunal',
  age: 27,
  education: 'Engineer'
};

console.log(obj)

obj.college = 'VVP';
console.log('After adding a property using dot syntax');
console.log(obj);

Output

{ name: 'Krunal', age: 27, education: 'Engineer' }
After adding a property using dot syntax
{ name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }

You can see that using dot syntax, and we added a new property called college and logged the Object.

Square Bracket Notation to add a property in JS Object

To add a property, use square bracket notation. The following demonstrates square bracket syntax.

obj['college'] = 'VVP';

See the following code.

// app.js

let obj = {
  name: 'Krunal',
  age: 27,
  education: 'Engineer'
};

console.log(obj)

obj['college'] = 'VVP';
console.log('After adding a property using square bracket syntax');
console.log(obj);

Output

{ name: 'Krunal', age: 27, education: 'Engineer' }
After adding a property using square bracket syntax
{ name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }

Square bracket syntax is also required when the property name is variable; for instance, if it is passed as the argument to a method, it is accessed in a for-in loop or is an expression to be evaluated, such as the following code.

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

Output

{}
4

An expression with the object name, a dot, and a property name (obj.prop4) will evaluate the current value of that property. Our example first displays the value in the console log, then assigns the value to the variable val.

Square bracket syntax is required if a property name contains spaces or other special characters, or if it includes the keyword reserved in JavaScript. Otherwise, JavaScript errors will be your result.

Modify a Property of a Javascript Object

To modify a JavaScript property, we will assign the new value to the existing property, and it will reflect in the main Object.

// app.js

let obj = {
  name: 'Krunal',
  age: 27,
  education: 'Engineer'
};

console.log(obj)

obj['age'] = 26;
obj['name'] = 'Ankit';
console.log('After modifying a property using square bracket');
console.log(obj);

Output

{ name: 'Krunal', age: 27, education: 'Engineer' }
After modifying a property using square bracket
{ name: 'Ankit', age: 26, education: 'Engineer' }

To change a value of the existing property of an object, specify the object name followed by a square bracket, the name of the property you wish to change, an equals sign, and the new value you want to assign. You can also use the dot syntax to attach the new values to the existing properties or change the values of existing properties.

Conclusion

You can add as many more properties as you like in Javascript by merely using the dot notation or square bracket syntax. That is it for Javascript add property to Object example.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.