Add a Key/Value pair to an Object in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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

There are multiple ways to add a key/value pair to an object:

  • Use bracket [] notation, e.g. obj['name'] = 'John'.
  • Use dot . notation, e.g. obj.name = 'John'.
  • Use the Object.assign() method, passing it a target and source objects as parameters.

Let's look at an example of adding key-value pairs with dot and bracket notation.

index.js
const obj = {name: 'Tom'}; obj.age = 30; obj['country'] = 'Chile'; // 👇️ {name: 'Tom', age: 30, country: 'Chile'} console.log(obj);

The first example adds a key/value pair using dot . notation. It is more concise and direct than the bracket [] notation approach.

If a key with the supplied name already exists in the object, its value gets updated.

If the name of the key contains spaces or hyphens -, you have to use square brackets.

index.js
const obj = {name: 'Tom'}; obj.my-country = 30; // 👈️ SyntaxError obj['my-country'] = 'Chile'; // 👈️ Works

You must also use the square brackets approach when you don't know the name of the key in advance and you need to dynamically name the key.

index.js
const obj = {}; const key = 'city'; obj[key] = 'Santiago'; // 👇️ {city: 'Santiago'} console.log(obj);
We have the name of the key stored in a variable, therefore we can't use dot notation to add the key/value pair to the object.

We don't wrap the value between the square brackets in quotes, because it is a variable whose value we use for the key name.

Most programmers use dot . notation to add key/value pairs to objects, until they have to use the square brackets [] approach.

The next most common way to add a key/value pair to an object is to use the Object.assign method.

To add multiple key/value pairs to an object in the same statement, use the Object.assign() method. The method copies the key/value pairs of one or more objects into a target object and returns the modified target object.

index.js
const obj = {country: 'Chile'}; Object.assign(obj, {color: 'red', food: 'pizza'}); // 👇️️ {country: 'Chile', color: 'red', food: 'pizza'} console.log(obj);

The arguments we passed to the Object.assign method are:

  1. the target object - the object to which the provided properties will be applied
  2. the source object(s) - one or more objects that contain the properties we want to apply to the target object

You can imagine that the key/value pairs of the object we passed as the second argument get copied into the object we supplied for the first argument.

The Object.assign method is very convenient when you have to add multiple key/value pairs to an object.

Another common approach to add multiple key/value pairs to an object is to use the spread syntax (...). However, to use the ... syntax, we have to declare the variable using the let keyword.

index.js
let obj = {name: 'Tom'}; obj = {...obj, color: 'green'}; // 👇️ {name: 'Tom', color: 'green'} console.log(obj);

An easy way to think about the spread operator (...) is that we are unpacking the key/value pairs of the object into a new object.

We use the let keyword instead of const because it allows us to re-declare the obj variable.

When using this approach, we create a new object by using the key/value pairs of an existing object and adding one or more key-value pairs.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.