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

avatar

Borislav Hadzhiev

Sun Oct 10 20213 min read

banner

Photo by Toa Heftiba

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 using the first 2 ways.

index.js
const obj = {name: 'Tom'}; obj.age = 30; obj['country'] = 'Chile'; // ๐Ÿ‘‡๏ธ {name: 'Tom', age: 30, country: 'Chile'} console.log(obj);

We first add 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 on the object, its value will get overridden.

However, if the name of the key in your object has spaces or contains a dash -, you have to use the square brackets approach.

index.js
const obj = {name: 'Tom'}; obj.my-country = 30; // ๐Ÿ‘ˆ๏ธ SyntaxError obj['my-country'] = 'Chile'; // ๐Ÿ‘ˆ๏ธ Works

You 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);
In the code snippet, we have the name of the key stored in a variable, therefore we can't use dot notation to set the key/value pair on the object.

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

As a general rule of thumb, you will see most programmers use dot . notation to add key/value pairs to objects, unless they have to use the square brackets [] approach.

The next most common way to add a key/value pair to an object is using 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 parameters 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

A straight forward way to think about the Object.assign method is that the key/value pairs of the object we passed as the second parameter get copied into the object we provided as the first parameter.

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 operator (...). However, notice that to use the ... syntax, we 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.

We basically create a new object, using the key/value pairs of an existing object and some additional ones.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee