How to Add Property to an object in JavaScript?

Introduction

To start with, let us revise and go through the concept of objects and their properties in brief. Object in JavaScript is a collection of unordered properties and these properties are basically key-value pairs that define the characteristics of an object. Just like JavaScript variables, object names & their properties are case-sensitive. Let us take an example of an object in JavaScript where we will define some of the properties inside it.

//JavaScript object named car with some defined properties inside it
const car = {
  brand: 'BMW', //brand property of car object having 'BMW' as its assigned value
  year: 2010 //year property of car object having 2010 as its assigned value
};

Here, we have created an object named car with brand and year as its properties with assigned values. Now, if we have to access these properties of car object, we can simply use dot notation or square-bracket notation. Note that if we try to access properties of an object which are unassigned, then it will return undefined and (not null).

//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined


Try it yourself  

Have you ever wondered that if it is possible to add more properties to an existing object that has already been created? The answer to this question is yes, we can do so and can add properties to an object in JavaScript dynamically even if the object has already been created.

There are many methods and ways by which we can add properties to an existing object in JavaScript and we will discuss all of them in detail as we move through the course of this article.

• Using dot notation (.)
• Using square brackets notation [ ]
• Using Object.defineProperty() method
• Using Object.assign() method
• Using spread operator syntax

Using Dot Notation (.)

One of the simplest ways to add, access, or modify properties of an existing object in JavaScript is by using dot notation.

Syntax

object.new_property = new_value; //use of dot notation method in JavaScript

Here, object denotes existing object name, and to add property to object JavaScript, we are using the dot operator. new_property is basically the key and new_value is the value assigned to this new property that is to be added inside the object.

Note that this dot notation will not work for the cases where the property key name includes special characters like spaces, dashes, digits, etc.

Example to Demonstrate the use of Dot Notation in JavaScript

In the below JavaScript example code, we have created an object named obj with some initial properties defined inside it.

Now to demonstrate the use of dot notation, we are adding two new properties with assigned values inside obj: obj.roll_no = 121 and obj.secondName = 'Jain' with the help of the dot operator.

In the end, we are printing the object obj to check newly added properties (key-value pairs) inside it.

Note that with the help of the dot operator, we can also change the existing properties of an object. Example: obj.name = 'Raj';

//Example code to demonstrate the use of dot notation method in JavaScript
let obj = { //JavaScript object named obj with some define properties inside it
  name: 'Mayank',
  age: 20,
  major: 'Computer Science'
};
//Printing object named obj that has been created above with some properties inside it
console.log("Object just after its creation: ",obj); //prints properties of existing JavaScript object named obj before adding new properties in it

obj.roll_no = 121; //adding new property roll_no with assigned value as 121 using dot operator of JavaScript
obj.secondName = 'Jain'; //adding new property secondName with assigned value as 'Jain' using dot operator of JavaScript
obj.gender = 'Male'; //adding new property gender with assigned value as 'Male' using dot operator in JavaScript

console.log("Object after adding new properties using dot notation: ",obj); //prints object obj after adding new properties using dot notation method in JavaScript


Try it yourself  

Output:

As we can observe, new properties have been added dynamically using dot notation.

Object just after its creation:  { name: 'Mayank', age: 20, major: 'Computer Science' }
Object after adding new properties using dot notation:  { name: 'Mayank',
  age: 20,
  major: 'Computer Science',
  roll_no: 121,
  secondName: 'Jain',
  gender: 'Male' } 

Example 2

Note that if we try to use any special character or numeric digit in the property name while adding using dot notation, it will generate a syntax error.

obj.123name = 'Hello'; //Taking above example and adding property name '123name' with assigned value as 'Hello' 
console.log(obj); //results in Syntax error 


Try it yourself  

Output:

SyntaxError: Invalid or unexpected token

Using Square Brackets Notation [ ]

As we have discussed above, there are some disadvantages while working with dot notation in cases where the property name is invalid variable identifier (say all digits, having spaces, special characters).

To handle such cases, we can imagine object as an associative array and can use square bracket notation to add new properties inside an object.

Also in case of dynamic variables where property names are retrieved from user inputs or API calls, this square bracket notation is helpful over dot notation in JavaScript.

Syntax

object['new_property'] = new_value; //square brackets notation method

Here, object denotes existing object name, and to add property to object JavaScript, we are using square brackets notation. new_property is basically the key and new_value is the value assigned to this new property that is to be added inside the object.

Example to Demonstrate the Use of Square Brackets Notation in JavaScript

In the below JavaScript example code, we have initially created an object named obj with some defined properties. Clearly, as we already know now that using square brackets notation also, we can access, add and even modify the existing properties.

To start with, we modified existing property of object obj i.e, obj['state'] = 'Mumbai'. We then created an empty nested object (obj.city = {}) within obj. We can also access nested objects using square bracket notation just like accessing a 2D array.

We have also showcased the combinational use of the dot operator and square brackets to access nested objects.

//JavaScript example code to demonstrate the use of square bracket notation method
let obj = {
   name: 'India',
   state: 'Delhi'
}; //Object obj created with some defined properties inside it

obj['state'] = 'Mumbai'; //modifying already exisiting 'state' property of object obj
obj.city = {}; //nested JavaScript object
obj['city']['name'] = 'Navi Mumbai'; //accessing nested object with square bracket notation
obj.city['street'] = 12; //combination of both dot and square bracket notation

console.log(obj); //printing object obj


Try it yourself  

Output: As we can observe that the object obj has been displayed here with modified 'state' property and a newly added nested object 'city' with name and street properties.

{ name: 'India',
  state: 'Mumbai',
  city: { name: 'Navi Mumbai', street: 12 } }

Example 2

Taking another example to understand the advantages of square brackets notation, here we have an empty JavaScript object obj and to add properties inside it, we are running for-loop.

The property name is an expression that has to be evaluated on each loop iteration depending on the value of 'i' (when i==1, obj['num1'] = 1;), clearly helpful in case of dynamic property names.

let obj = {}; //empty JavaScript object obj
for(let i = 0; i <= 5; i++) {
  obj['num' + i] = i; //value of 'i' here is dynamically retrieved everytime within the loop 
}
console.log(obj); //prints the properties of JavaScript object obj
console.log(obj.num4); //prints 4
for(let i=0;i<=6;i++){ //loop to print the properties of object obj
    console.log(obj['num' + i]); //note that obj.num6 is undefined as it was not assigned its value above where loop ended in 6 iterations
}


Try it yourself  

Output:

{ num0: 0, num1: 1, num2: 2, num3: 3, num4: 4, num5: 5 }
4
0
1
2
3
4
5
undefined //for obj.num6

Using Object.defineProperty() Method

JavaScript object class provides the defineProperty() method and using this, we can modify an existing object or add property to object JavaScript.

This method returns the modified object and also allows us to control or configure the behavior of the properties.

Syntax

Object.defineProperty(obj, new_property, configuration); //Object.defineProperty() method of JavaScript to define new properties to an existing object 

Here, the configuration consists of majorly two properties which we can manually set: enumerable and writable.

If writable is set to false, it means that we can't modify or set a new value for this particular property of object whereas enumerable denotes that the value has to be retrieved dynamically using either for-loop or user-input, etc. Let us understand this theory practically seeing example codes.

Example to Demonstrate Use of defineProperty() Method in JavaScript

In the below JavaScript example code, we have initially taken an empty object named obj. To add properties inside it, we have used Object.defineProperty() method to add 'id' property to obj and set its configuration property - writable as 'false'.

Next, we tried modifying the 'id' property of obj but due to the writable configuration which was set to false, there is no effect on the value of object 'id'.

//JavaScript example code to demonstrate the use of Object.defineProperty() method
let obj = {}; //empty JavaScript object obj
Object.defineProperty(obj, 'id', { //using Object.defineProperty() method of JavaScript object class 
  value: 101,
  writable: false //configured writable property as false, and hence, the id property of object obj can't be changed now
});
obj.id = 412; //no effect on 'id' property
console.log("Object ID:",obj.id); //prints 101

Object.defineProperty(obj, 'name', { //using Object.defineProperty() method of JavaScript object class 
  value: 'Mayank',
  writable: true //configured writable property as true, and hence, the name property of object obj can be changed now
});
obj.name = 'Mayank Jain'; //modifying the name property of object obj (writable property is set to true)
console.log("Object Name:",obj.name); //prints 'Mayank Jain'


Try it yourself  

Output:

Object ID: 101
Object Name: Mayank Jain

Using Object.assign() Method

There is another interesting way by which we can add property to object JavaScript i.e, by using the Object.assign() method. This method allows us to add properties of one source object to another target object. We can just define all those properties inside the source object that we need to add to an existing target object.

Using Spread Operator (...)

There is another unique way to add property to object JavaScript by using the spread operator. Spread operator (...) creates a copy of the existing object with all its properties and therefore, using inline property definition, we can further add more properties to that object. Let us look at the syntax to understand this in a better manner!

Syntax

//adding property1 & property2 to object using spread operator of JavaScript
object = { ...object, property1: value1, property2: value2 }

//adding all properties from new_object to object using spread operator of JavaScript
object = { ...object, ...new_object }

Here, ...object virtually creates a copy of existing properties of object, and using inline definition, we can add more properties (property1, property2....) to the existing object.

Also, the spread operator allows us to merge the properties of two objects into a new object.