js add obj prop dynamically

How to dynamically add properties to JavaScript objects#

As a web developer, I often come across situations where I need to dynamically add properties to JavaScript objects. This can be easily achieved using JavaScript.

Method 1: Using dot notation#

let person = {
  name: 'John',
  age: 30
};

person.gender = 'Male';

console.log(person); // { name: 'John', age: 30, gender: 'Male' }

In the above code snippet, we are adding a new property 'gender' to the person object using dot notation.

Method 2: Using square bracket notation#

let person = {
  name: 'John',
  age: 30
};

person['gender'] = 'Male';

console.log(person); // { name: 'John', age: 30, gender: 'Male' }

In the above code snippet, we are adding a new property 'gender' to the person object using square bracket notation.

Method 3: Using Object.assign()#

let person = {
  name: 'John',
  age: 30
};

let newProperty = { gender: 'Male' };

let updatedPerson = Object.assign(person, newProperty);

console.log(updatedPerson); // { name: 'John', age: 30, gender: 'Male' }

In the above code snippet, we are adding a new property 'gender' to the person object using Object.assign() method.

Method 4: Using spread operator#

let person = {
  name: 'John',
  age: 30
};

let updatedPerson = {...person, gender: 'Male'};

console.log(updatedPerson); // { name: 'John', age: 30, gender: 'Male' }

In the above code snippet, we are adding a new property 'gender' to the person object using spread operator.

These are the four methods to dynamically add properties to JavaScript objects. Depending on the situation, we can choose the appropriate method to achieve the desired result.