How to Add a Property to an Object in JavaScript

In this article, we will explore the process of adding a property to an object in JavaScript.

JavaScript Object

In JavaScript, an object is defined as a collection of properties that are organized as key-value pairs.

Syntax:

const obj = {
  property1: value1,
  property2: value2,
  property n: value3,
};

Demo:

We will be creating an object named student that will possess four distinct properties.

Code:

const student = {
    firstName: "Justin",
    lastName: "Timberlake",
    rollNo: 32,
    stream: "commerce"
};

console.log(student);

Output:

{
  firstName: 'Justin',
  lastName: 'Timberlake',
  rollNo: 32,
  stream: 'commerce'
}

In JavaScript, it is possible to introduce additional properties to an already defined Object. Various methods are available that we can employ to incorporate properties into the JavaScript object.

The following are the methods utilized to alter the JavaScript Object:

• ✅ Bracket Notation
• ✅ Dot Notation
• ✅ assign Method
• ✅ ES6 Computed Property Names
• ✅ defineProperty method
• ✅ Spread Operator Syntax

We will grasp each technique through the assistance of demonstrations.

Utilizing the Bracket Notation

We will employ bracket notation to introduce a new property within an object.

Demo:

We are going to create an object referred to as student, which will contain two properties called firstName and lastName. Additionally, we will introduce two new properties: age, assigned the value of 19, and stream, which will be set to commerce.

Syntax:

object['new_property'] = value;

Code:

let student =
    { firstName: "Vedant", lastName: "Singh" };

const newPropertyName1 = 'age';
const newPropertyValue1 = 19;

const newPropertyName2 = 'stream';
const newPropertyValue2 = 'commerce';

student['age'] = newPropertyValue1;
student['stream'] = newPropertyValue2;

console.log(student);

Output:

It is evident that the student object has been enhanced with the addition of two new properties.

{ firstName: 'Vedant', lastName: 'Singh', age: 19, stream: 'commerce' }

Utilizing the Dot Notation

We will employ the dot notation technique to incorporate a new property into an object.

Syntax:

object.newProperty = value;

Demo:

We are going to create an object referred to as 'employee' that includes two attributes: firstName and lastName. Additionally, we will introduce new properties: age, which will have a value of 28, and department, which will be set to finance.

Code:

let employee =
    { firstName: "Sahil", lastName: "Kumar" };

const newPropertyName1 = 'age';
const newPropertyValue1 = 28;

const newPropertyName2 = 'department';
const newPropertyValue2 = 'finance';
 
employee.age = newPropertyValue1;
employee.department = newPropertyValue2;

console.log(employee);

Output:

It is evident that the employee object now includes two additional properties.

{
  firstName: 'Sahil',
  lastName: 'Kumar',
  age: 28,
  department: 'finance'
}

Utilizing the Object.assign

We will make use of the Object.assign method to add a new property to an object.

Syntax:

Object.assign({}, obj,
        { [newPropertyName]: newPropertyValue });

Demo:

We are going to create an object referred to as car that contains two attributes: carCompany and carModel. Additionally, we will introduce a new attribute called carColor, assigning it the value of red.

Code:

let car =
    { carCompany: "Ford", carModel: "Ford Figo" };
 
const newPropertyName1 = 'carColor';
const newPropertyValue1 = 'red';
 
const updatedCarObject =
    Object.assign({}, car,
        { [newPropertyName1]: newPropertyValue1 });

console.log(updatedCarObject);

Output:

{ carCompany: 'Ford', carModel: 'Ford Figo', carColor: 'red' }

Utilizing the ES6 Computed Property Names

The computed property names in ES6 allow you to employ variables to define the names of properties.

Demo:

We are going to define an object called food that will include five properties. Additionally, we will introduce a new property titled Pizza with a value set at 249.

Code:

const propertyName = 'Pizza';
const propertyValue = 249;
 
const food =
    {
      Burger: 99,
      Cheeseburger: 119,
      Taco: 105,
      Sandwich: 59,
      FrenchFries: 109,
    };
 
const updatedFoodObject = {
    ...food,
    [propertyName]: propertyValue,
};
 
console.log(updatedFoodObject);

Output:

{
  Burger: 99,
  Cheeseburger: 119,
  Taco: 105,
  Sandwich: 59,
  FrenchFries: 109,
  Pizza: 249
}

Utilizing the Object.defineProperty method

The Object.defineProperty function is employed to alter the properties of an Object, such as introducing a new property to it. This function also sets the behavior of the property in question. The configuration options can specify whether the property is enumerable or writable. If writable is set to false, it prohibits the assignment of a new value to the object; conversely, if writable is true, a new value can be assigned to the object.

Syntax:

Object.defineProperty(obj, newProperty, configuration);

Demo:

We will alter the JavaScript Object by utilizing the Object.defineProperty function.

Code:

let obj = {}; 
Object.defineProperty(obj, 'id', { 
  value: 501,
  writable: false 
});
obj.id = 501; 
console.log("Object ID:",obj.id); 

Object.defineProperty(obj, 'name', { 
  value: 'Kartik',
  writable: true 
});
obj.name = 'Kartik Kumar'; 
console.log("Object Name:",obj.name);

Output:

Object ID: 501
Object Name: Kartik Kumar

Utilizing the spread operator (...)

The spread operator can be employed to introduce an additional property to an object. It replicates all the existing properties of the object and subsequently appends a new property by utilizing inline property definition.

Syntax:

object = { ...object, property1: value1, property2: value2 }
object = { ...object, ...newObject }

Demo:

We are going to construct an object referred to as obj, which will contain two properties identified as id and name. In addition, we will incorporate two more properties: nationality, which will be assigned the value of Indian, and gender, which will be set to Male.

Code:

let obj = {id: '105', name: 'Kamal'}; 
console.log(obj); 
obj = {...obj, nationality: 'Indian', gender: 'Male'}; 
console.log(obj); 

let obj2 = {country: 'India', city: 'Noida', pincode: '201301'}; 
let obj3 = {name: 'Sonam', lastName: 'Singh', age: '28', gender: 'Female'}; 
obj3 = {...obj3, ...obj2}; 
console.log(obj3);

Output:

{ id: '105', name: 'Kamal' }
{ id: '105', name: 'Kamal', nationality: 'Indian', gender: 'Male' }
{
  name: 'Sonam',
  lastName: 'Singh',
  age: '28',
  gender: 'Female',
  country: 'India',
  city: 'Noida',
  pincode: '201301'
}

Conclusion:

In this article, we have explored the process of adding a property to an object in JavaScript. We have examined different techniques through illustrative examples that can be employed to introduce a new property into an object.