How to Add a Key/Value pair to an Object in JavaScript

by

Objects are one of the essential data types in any programming language. The objects are key-value pairs. There are many ways to add key-value pairs to an Object in JavaScript.

How to Add a Key/Value pair to an Object in JavaScript

To add a key/value pair to an Object in JavaScript:

  1. Use the bracket [ ] notation
  2. Using dot (.) notation
  3. Using the Object.assign() method

Creating the objects

We can add the key-value pairs in objects while creating them by specifying the key-value pairs.

Example

let obj = {name: 'Johnny',country:'USA'};

console.log(obj);

Output

{ name: 'Johnny', country: USA }

Using the bracket[] notation

We can add the objects and keys using the bracket notations.

Syntax

Object_name[key] = value;

Example

let obj={name:'Johnny'}

obj['age']=59;

console.log(obj);

Output

{ name: 'Johnny', age: 59 }

Explanation

The above code can be explained as follows:

  1. First, we created an object using the let keyword. Then, we named it obj and created a key-value pair within it.
  2. Next, we used the bracket method to create the key/value pair.
  3. Finally, we printed the object in the console.

Using the dot(.) notation

Another way of adding the key-value pair is to use dot notation.

Syntax

object_name.key=value;

Example

let obj={name:'Johnny'}

obj.age=59;

console.log(obj);

Output

{ name: 'Johnny', age: 59 }

Which one among the dot and bracket notation is better?

As evident from the above codes, we can see that the dot notation is fairly more concise and easy to use compared to the bracket notation. This is because most programmers use dot notation to assign the key-value pairs. However, if the key’s name contains spaces or hyphens(‘-‘), you have to use square brackets.

Example

let obj={name:'Johnny'}

obj.age-gap=59;

console.log(obj);
Output:

obj.age-gap=90;

^^^^^^^^^^^

SyntaxError: Invalid left-hand side in assignment

    at Object.compileFunction (node:vm:352:18)

    at wrapSafe (node:internal/modules/cjs/loader:1033:15)

    at Module._compile (node:internal/modules/cjs/loader:1069:27)

    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)

    at Module.load (node:internal/modules/cjs/loader:981:32)

    at Function.Module._load (node:internal/modules/cjs/loader:822:12)

    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)

    at node:internal/main/run_main_module:17:47

Explanation

The above code didn’t work because the name of the key contains ‘-‘ between them. In such a case, the bracket notation works fine.

Example

let obj={name:'Johnny'}

obj['age-gap']=59;

console.log(obj);

Output

{ name: 'Johnny', 'age-gap': 59 }

Using Object.assign() Method

Another popular method is to use the object.assign() method.However, the internal working of the method is slightly different from the previous two methods we have seen.

The main advantage of using the object. assign () method allows the user to add multiple key-value pairs within the same code line conveniently.

This function will copy the key-value pairs from the existing object into some other target object, and finally, we display the modified target object. Hence the space consumed will be slightly more compared to the previous methods.

The function takes two arguments. First is the target object’s name, and second is the key value pairs within curly braces.

Syntax

Object.assign(object_name,{key:value});

Example

let obj={name:'Johnny'}

Object.assign(obj,{favourite_color:'red',favouirite_fruit:'mango'})

console.log(obj);

Output

{

  name: 'Johnny',

  favourite_color: 'red',

  favouirite_fruit: 'mango'

}

We can add a slight variation to the code to get the same output. For example, we can use the concept of spread operator(…) in javascript. This operator specifies that we want to unpack the key-value pairs.

Example

let obj = {name: 'Johnny'};

obj = {...obj, favourite_color: 'green',favourite_number:13};

console.log(obj);

Output

{ name: 'Johnny', favourite_color: 'green', favourite_number: 13 }

Conclusion

In this article, we have learned how to add the key-value pairs to an object in javascript. Mostly the programmers prefer to use dot notation. However, Some developers also prefer bracket notation and assign method.

Leave a Comment