How to Add Property or Key-Value Pair in JavaScript Object

by

There are the following methods to add Property or Key-Value Pair in JavaScript Object.

  1. Using the dot(.) operator
  2. Using the square bracket([]) notation
  3. Using the Object.assign() function
  4. Using the Spread Operator
  5. Using a Variable as a key 

Method 1: Using the dot notation(.)

This is the most common and straightforward way to add a property to an object. You simply use the dot (.) followed by the property name and assign a value to it. It’s easy to read and understand but can only be used with valid JavaScript identifiers as property names.

Example

const mama = {
 name: "PrafulChandra Rupani",
 age: 73
}

console.log(mama)
console.log("After adding a new property using . notation")

mama.Hobby = "Watching Cricket and News"

console.log(mama)

Output

{ name: 'PrafulChandra Rupani', age: 73 }

After adding a new property using . notation

{
  name: 'PrafulChandra Rupani',
  age: 73,
  Hobby: 'Watching Cricket and News'
}

In this example, we created a JavaScript Object using curly braces({ }) and added one more property using the dot notation.

Method 2: Using square bracket notation(.)

Similar to dot notation, bracket notation allows you to add a property to an object. The main difference is that you can use any string as the property name, including strings that are not valid JavaScript identifiers. This is useful when working with dynamic or computed property names.

Example

let get_property = function (property_name) {
 return obj[property_name]
};

get_property("key1")
get_property("key2")
get_property("key3")

If we apply the bracket notation in our previous example, it looks like the one below.

const mama = {
 name: "PrafulChandra Rupani",
 age: 73
}

console.log(mama)
console.log("After adding a new property using square bracket notation")

mama["Hobby"] = "Watching Cricket and News"

console.log(mama)

Output

{ name: 'PrafulChandra Rupani', age: 73 }

After adding a new property using square bracket notation

{
  name: 'PrafulChandra Rupani',
  age: 73,
  Hobby: 'Watching Cricket and News'
}

And we get the same output.

Method 3: Using the Object.assign() function

The Object.assign() is a built-in JavaScript method used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

Example

const x = { a: 11, b: 21 }
const y = { b: 46, c: 19 }

const returnedY = Object.assign(x, y)

console.log(x)

console.log(returnedY)

Output

{ a: 11, b: 46, c: 19 }
{ a: 11, b: 46, c: 19 }

Method 4: Using the spread operator

The spread operator (…) is a more modern way to merge properties from one or more objects into a new object. For example, you can use it to add new properties to an existing object by creating and spreading the existing object along with the new properties.

Example

const obj = {}

const newObj = { ...obj, key: 'value' };

console.log(newObj)

Output

{ key: 'value' }

Method 5: Using a variable as a key

Sometimes you may need to use a variable as the property name. You can do this using bracket notation or a computed property name in an object literal. This allows you to create dynamic property names based on variable values.

Example

const obj = {};
const key = 'dynamicKey';
const value = 'dynamicValue';

// Using bracket notation
obj[key] = value;

// Or using Object.assign()
const newObj = Object.assign({}, obj, { [key]: value });

// Or using the spread operator
const anotherObj = { ...obj, [key]: value };
console.log(anotherObj)

Output

{ dynamicKey: 'dynamicValue' }

These are the most common methods for adding properties to JavaScript objects. Choose the method that best fits your use case and coding style preferences.

Leave a Comment