How to Add Key-Value Pairs to an Object in JavaScript

Let's go over a few different methods of adding key/value pairs to an object!

Let's begin with an object named orange and give it two properties: type and fruit.

const orange = {
  type: 'fruit',
  color: 'orange',
};

The first method is dot notation.

We can access properties on an object by calling object.property.

In our example, orange is our object and type is a property of orange.

Logging orange.type will give us the value fruit.

console.log(orange.type); // prints fruit

Adding new properties can be done in a similar fashion.

Even though our orange object doesn't have a property named shape, we can add the key/value pair for this property using dot notation.

orange.shape = 'circle';
console.log(orange.shape); // prints circle

After setting the shape property to circle, our orange object is now modified to include this key/value pair.

Bracket notation is another way of accessing properties on an object, but with a different syntax, object[property].

Logging orange['type'] will again give us the value fruit.

console.log(orange['type']); // prints fruit

To add on to our example, let's add a new property called weight and give it a value of 1.

orange['weight'] = 1;
console.log(orange['weight']); // prints 1

Now, our orange object has a total of four properties: type, color, shape and weight.

The Object.assign() method allows us to copy all the properties from one object to another object.

Let's create an object containing the properties we want to add to our orange object. We'll call this object extraProps.

const extraProps = {
  length: 4,
  width: 4,
};

Now, let's add the key/value pairs from our extraProps object and add them to our orange object.

We'll call the new object newOrange.

const newOrange = Object.assign(orange, extraProps);

NewOrange now contains the properties previously added, as well as length and width from our extraProps object.

The object spread operator is similar to the Object.assign() method but provides a shorter syntax.

Let's create an object to highlight how this method works. We'll call this object price.

const price = { cost: 0.99 };

If we wanted to clone our orange object, we can do so.

const anotherOrange = { ...orange };

Our anotherOrange object will contain all the properties that the orange object has.

Now, let's add a cost property to our anotherOrange object.

We can do this simply by taking advantage of the spread syntax.

We'll call the new object that's created, orangeForSale.

const orangeForSale = { ...anotherOrange, ...price };

Our orangeForSale object contains all the properties from the previous examples, with an addition of a cost property.