How to add an element to a JavaScript object?

In JavaScript, the object is a real-time entity that contains properties and methods. In simple words, we can say that object is an instance of a class. It stores the data in the form of key and value pairs. The keys are usually referred to as properties and the values are referred to as property values.

There are two ways to define an object in JavaScript.

Syntax

var obj = new Object();

(or)

var obj = {property1: value, property2 : value2 …….}

Using dot (.) operator

In JavaScript, using the dot (.) operator we can access a variable which is stored in an object. The dot (.) operator will act as a connector between the object and the variable to be added.

Not only does this operator help in adding new elements to the object but also will be used in accessing the existing elements in an object anywhere else in the program.

let obj = {property: value, …..};
obj.property = value;

Let’s discuss this method with a proper example.

Example

In the example program below, we have used the dot (.) operator method to access and add the elements in an object.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var student = {
         name: 'abc',
         age: 20,
         city: 'Hyderabad',
      }
      student.marks = 80;
      document.write(
         "Name: " + student.name + "<br>" +
         "Age: " + student.age + "<br>" +
         "City: " + student.city + "<br>" +
         "Marks: " + student.marks
      )
      console.log(student);
   </script>
</body>
</html>

Using the assign () method

In JavaScript, assign() is an in-built method. Using the assign() method, we can assign or add a new value to an existing object or we can create the new object without changing the existing object values.

Syntax

Object.assign(target,source);

In JavaScript assign(target, source) method takes two parameters, first one is a target which usually means that we can target the existing object or we can put an empty object on the target’s place, so it will create a new object without changing the existing object.

And source means the property we want to assign an object to.

Example 1

Let’s understand how the assign() method adds a new element to an object in JavaScript without changing the existing object.

Object.assign({},objectname,{property: value});

In the example, we have used the assign() method to add a new element to an existing object. For that, we used an empty target place and are creating a new object so it does not change the existing object values.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var book = {
         name: 'English',
         price: 250,
      }
      var newobj = Object.assign({}, book, {publishyear : 2015});
      document.write(
         "Name: " + newobj.name + "<br>" +
         "Price: " + newobj.price + "<br> " +
         "Publish year: " + newobj.publishyear
      )
   </script>
</body>
</html>

Example 2

In this example, we will look at how assign() method works by modifying the existing object.

Object.assign(objectname,{prooerty:value});

In the program, we are giving the target parameter in the assign method as an existing object name so that it will change the existing object value as well. Let us look at how that happens in the example below −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var book = {
         name: 'English',
         price: 250,
      }
      var newobj = Object.assign(book,{publishyear : 2015});
      document.write(
         "Name: " + newobj.name + "<br>" +
         "Price: " + newobj.price + "<br> " +
         "Publish year: " + newobj.publishyear
      )
   </script>
</body>
</html>

Using square [] bracket

Using square [] bracket: In JavaScript, we can use [] brackets to add elements to an object. This is another way to add an element to the JavaScript object.

let obj = {};
obj[property] = value;

Example

In the example program below, we have used square [] brackets to fetch the array of elements in any particular index. Also we can add the element to an array.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var student = {
         name: 'abc',
         age: 20,
      }
      student['city'] = 'Hyderabad';
      document.write(
         "Name: " + student.name + "<br>" +
         "Age: " + student.age + "<br>" +
         "City: " + student.city
      )
      console.log(student);
   </script>
</body>
<html>

Updated on: 02-Sep-2023

60K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements