How to Add Key/Value Pair to a JavaScript Object [6 Ways]

by

Here are six ways to add key/value pair to a 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”
  6. Using the “Object.defineProperty()” method

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.

Method 6: Using the “Object.defineProperty()” method

Another less-common way to add a key-value pair to an object is to use Object.defineProperty(). This is the least performant way to add a key-value pair to an object, but it allows the new property to be precisely defined.

This function accepts either a data or accessor descriptor as its second argument, allowing the behavior of the new property to be customized as desired. Remember that you can add multiple properties using Object.defineProperties().

Example

let obj = {};

Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj.name);

Output

John

That’s it!

Leave a Comment