How to create object properties in JavaScript?

Javascript Web Development Front End Technology

JavaScript object properties are the keys inside the body of a JavaScript object. Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object. Object properties are usually variables used internally in the object's methods, but can also be globally visible variables that are used throughout the page. These properties can either be statically typed by the programmer at the time of object declaration, or they can be modified or created later according to the need.

There are two ways of creating or adding properties to a JavaScript object −

Using Dot Notation
Using Square Brackets Notation

Let us study them one by one with code examples.

Using Dot Notation

You can add or create JavaScript object properties by using Dot syntax. To use dot syntax, use dot between the new property or key name and the existing object’s name and assign a value to it by assignment operator as shown below −

Syntax

Following is the syntax for creating or adding new properties to a JavaScript object using Dot Syntax −

objectName.propertyName = propertyValue;

In above syntax, objectName is an already declared JavaScript object to which we are adding new property or key named as propertyName, while on the right hand side of the assignment operator the propertyValue is the value that has to be assigned to that particular newly created or added property or key.

Algorithm

Step 1 − As the first step of creating or adding new properties to a JavaScript object you need to create a JavaScript object according to the syntax discussed above.
Step 2 − In the next step, you need to add or create a new JavaScript object property or key by using the Dot Syntax as discussed above.
Step 3 − In the third or the last step of the process, you need to display the object on the screen with the newly added or created property to it.

Example 1

The below example will illustrate the use of dot syntax for creating or adding new properties to already existing JavaScript object with several properties −


<!DOCTYPE html>
<html>
<body>
   <h3>Creating new object property using Dot Notation.</h3>
   <p>Create or add a new property named "title" to the existing object "obj"</p>
   <p id="result">Resultant object:<br></p>
   <script>
      let obj = {
         company: "tutorialspoint",
         article: 1
      };
      obj.title = "How to create object properties in JavaScript?";
      console.log(obj);
      document.getElementById("result").innerHTML +=
      JSON.stringify(obj);
   </script>
</body>
</html>

In the above example, we have seen that an already existing JavaScript object named “obj” that earlier has “company” and “article” properties, is extended by adding a new property named “title” to it by using the dot syntax.

Using Square Brackets Notation

It is another way of creating or adding properties to a JavaScript object. In this notation, the name of the object is followed by the square braces with the property name passed as a string inside them and the value will be assigned using the assignment operator as assigned in the dot notation.

Syntax

Following is the syntax for adding or creating new properties of a JavaScript object using Square Brackets Syntax −

objectName[“propertyName”] = propertyValue;

In above syntax, objectName is an already existing JavaScript object whose properties are increased with one by adding a new property named propertyName inside square brackets and double quotes, while on the right hand side of assignment operator propertyValue is the actual value that will be assigned to the newly created or added property of object.

Algorithm

Step 1 − In first step, you will create a JavaScript object with several properties to which you will add properties later.
Step 2 − The second step of the process involves the adding or creating the JavaScript object property using the square brackets syntax.
Step 3 − The last or the third step will display the object on the user screen. So that user can clearly see the change in the properties of objects after and before adding new properties.

Example 2

Below example will illustrates the use of square brackets syntax for creating or adding new properties to already existing JavaScript object with several properties −


<html>
<body>
   <h3>Creating new object property using square brackets Notation.</h3>
   <p>Create or add a new property named "title" to the existing object "obj".</p>
   <p id="result">Resultant object:<br></p>
   <script>
      let obj = {
         company: "tutorialspoint",
         article: 1
      };
      obj["title"] = "How to create object properties in JavaScript?";
      console.log(obj);
      document.getElementById("result").innerHTML +=
      JSON.stringify(obj);
   </script>
</body>
</html>

In above example, we have seen that an already existing JavaScript object named “obj” that has “company” and “article” properties earlier, is modified by adding new property named “title” to it by using the square brackets syntax.

As we have seen that the output of both the syntaxes to add or create Object property in JavaScript is similar. Hence, both the syntaxes discussed above are valid and can be used to create new properties or to add properties in JavaScript object.

Note

The Dot Notation out of two notations discussed above is a more convenient and preferred way to add or create new properties to a JavaScript object as it is simple and easy to use as compared to Square Brackets Notation.