Add a new Property in JavaScript Objects

Back to: JavaScript Tutorial For Beginners and Professionals

How to Add a new Property in JavaScript Objects with Examples

In this article, I am going to discuss How to Add a new Property in JavaScript Objects with Examples. Please read our previous article where we discussed Accessing non-existent JavaScript Properties with Examples.

How to Add a new Property in JavaScript Objects

In the initial, we have learned that

  • Properties and methods can change at any time
  • JavaScript object properties can be changed, even when they are declared as const. new properties can be added to an object, and existing property values can be changed or deleted from an object.

As we already learned different ways of creating an object in JavaScript. Objects in JavaScript can be declared by using a literal form that is curly bracket {} and also by using new Object() it is the construction function to defined the object.

Both Object literal {} and new Object() do the same work. new Object() is constructor form, and curly brackets {} is literal form of JavaScript Objects.

The very easy and broad use for creating an object is literal form using curly bracket {}.

In JavaScript, we can add new properties in an object when we defined the object, and also even if the object is already declared we can still add new properties in an object by using dot notation (.) or square bracket notation ([]) with new property/key name followed by assignment operator with property value.

Syntax:
var ObjName = {
     myProp1: value1,
     myProp2: value2
}

ObjName.myProp3 = value3; //to add a new property write the name of the object and use dot notation with new property/key name followed by assignment operator (=) with value
//or
ObjName[‘myProp4’] = value4; //To add a new property write the name of the object and use bracket notation with new property/key name followed by assignment operator with value

Here in this example, we have created an object name person with few defined properties shown below:
//Object Literal with properties
var person = {
      firstName: “Elon”, // setting or adding the value of property of person object
      lastName: “Musk”,
     age: 25
};

After declaring the person object, to add a new property to an object (such as location and Pincode) we simply write the name of the object and use dot notation(.) or bracket notation ([]) with new property/key name followed by assignment operator (=) with value

We have added the new property’s location to a person object by writing the object name and using dot notation with new property/key name followed by assignment operator (=) with value.
person.location = “India”; and property Pincode by using bracket notation with new property/key name followed by assignment operator with value.
person[‘pincode’] = ‘400001’;
The newly added properties can be accessed in the same way followed by the normal syntax of accessing the property of an object using dot notation (.) or bracket notation ([]).

Example: JavaScript Objects, Add new property in objects 
<html>
<head>
    <title>JavaScript Objects, Add a new property in objects example</title>
</head>
<body>
    <script>
        //Object Literal with few defined properties
        var person = {
            firstName: "Elon", 
            lastName: "Musk",
            age: 25 // setting /adding the value of property of person object
        };

        person.location = "India"; //added the new property location by using dot notation with new property/key name followed by assignment operator (=) with value.
        person['pincode'] = '400001'; //added the new property pincode by using bracket notation with new property/key name followed by assignment operator with value.

        //display data
        console.log("person object: ", person)
        console.log("person object length: ", Object.getOwnPropertyNames(person).length)
        console.log("person Object literal type? : ", typeof person);// object
        console.log("Person Object already defined property firstName- with dot notation-->Property firstName value is: ", person.firstName);//Elon
        console.log("Person Object already defined property firstName- with bracket notation-->Property firstName value is: ", person['firstName']);

        console.log("Person Object Newly added property location- with dot notation-->Property location value is: ", person.location);//India
        console.log("Person Object Newly added property location- with bracket notation-->Property location value is: ", person['location']);

        console.log("Person Object Newly added property pincode- with dot notation-->Property pincode value is: ", person.pincode);//400001
        console.log("Person Object Newly added property pincode- with bracket notation-->Property pincode value is: ", person['pincode']);

    </script>
</body>
</html>
Output:

JavaScript Objects, Add a new property in objects

Change Property value in JavaScript Objects

We already saw how we can add the new property to an object by using dot notation(.) or the bracket notation ([]) while declaring an object or if an object is already defined. We can set the value of existing property in an object while we declare the object. But we can update its value later on also,

That is, we can update the object existing property value, or in other words, we can change the existing property value in an object simply by writing the name of the object and use dot notation (.) or the bracket notation ([]) with property/key name followed by assignment operator (=) with the new value.

Syntax:
var ObjName = {
       myProp1: value1,
       myProp2: value2
}

ObjName.myProp1 = newValue1; //to change property value write the name of the object and use dot notation followed by assignment operator (=) with the new value
//or
ObjName[‘myProp2’] = newValue2; //To change property value write the name of the object and use bracket notation followed by assignment operator with the new value

In the below example, we have created an object name person with few defined properties shown below:
//Object Literal with properties
var person = {
       firstName: “Elon”, // setting or adding the value of property of person object
       lastName: “Musk”,
       age: 25,
       location: “India”,
      pincode: 400001
};

When we declare the person object that time, we set the value of person object property, and we can update the existing property value (such as age and Pincode) in person object later on by simply writing the name of the object and use dot notation(.) or bracket notation ([]) with property/key name followed by assignment operator (=) with the new value.

Here, we have updated the existing property age value from 25 to 23 by writing object name and using dot notation with property/key name followed by assignment operator (=) with new value here is 23.
person.age = 23; and Pincode from 400001 to 400010 by using bracket notation with property/key name followed by assignment operator with the new value.
person[‘pincode’] = 400010;

The updated value of existing properties can be accessed in the same way followed by the normal syntax of accessing the property of an object using dot notation (.) or bracket notation ([]).

Example: JavaScript Objects, Change property value in objects
<html>
<head>
    <title>JavaScript Objects, Change property value in objects example</title>
</head>
<body>
    <script>
        //Object Literal with few defined properties
        var person = {
            firstName: "Elon", //setting the value of property of person object 
            lastName: "Musk",
            age: 25,
            location: "India",
            pincode: 400001
        };

        person.age = 23; //changed property age value by using dot notation followed by assignment operator (=) with the new value.
        person['pincode'] = 400010; //changed property location value by using bracket notation followed by assignment operator (=) with the new value.

        //display data
        console.log("person object: ", person)
        console.log("person object length: ", Object.getOwnPropertyNames(person).length)
        console.log("person Object literal type? : ", typeof person);// object
        console.log("Person Object already defined property firstName- with dot notation-->Property firstName value is: ", person.firstName);//Elon
        console.log("Person Object already defined property firstName- with bracket notation-->Property firstName value is: ", person['firstName']);

        console.log("Person Object changed property age- with dot notation-->Property age value is: ", person.age);//23
        console.log("Person Object changed property age- with bracket notation-->Property age value is: ", person['age']);

        console.log("Person Object changed property pincode- with dot notation-->Property pincode value is: ", person.pincode);//400010
        console.log("Person Object changed property pincode- with bracket notation-->Property pincode value is: ", person['pincode']);

    </script>
</body>
</html>
Output:

How to Add a new Property in JavaScript Objects with Examples

In the next article, I am going to discuss How to Delete/Remove Property from a JavaScript Object with Examples. Here, in this article, I try to explain How to Add a new Property in JavaScript Objects with Examples and I hope you enjoy this How to Add a new Property in JavaScript Objects article.

Leave a Reply

Your email address will not be published. Required fields are marked *