How to Add Key-Value Pairs to an Object

Working with objects is a common task in JavaScript. Objects are used to store data in the form of key-value pairs.

One of the most common tasks that developers often encounter is adding key-value pairs to an object.

There are multiple ways to add key-value pairs to an object in JavaScript. Let's explore them one by one.

Object Introduction

Before we proceed, let's have a quick overview of JavaScript objects. In JavaScript, objects are data structures that store key-value pairs. They are similar to real-life objects, where each property represents a characteristic or attribute of the object.

Objects are defined within curly braces {} and can hold various data types as values, including numbers, strings, arrays, and even other objects. Now, let's explore different techniques to add key-value pairs to an object.

1. Using Dot Notation

One way to add a key-value pair to an object is by using the dot notation. This method is suitable when you know the key name in advance.

Here is an example of adding a key-value pair to an object using the dot notation.

const person = {
  name: "John",
  age: 30,
};

person.city = "New York";

console.log(person);

In the above code snippet, we have an object called person with properties name and age. To add the city property, we can simply use dot notation (person.city) followed by the assignment operator (=) and the value we want to assign ("New York"). The resulting object will contain the added key-value pair.

2. Using Bracket Notation

Another way to add a key-value pair to an object is by using the bracket notation. This method is useful when the key name is stored in a variable or when it contains special characters.

Let's see an example for this:

const car = {
  brand: "Toyota",
};

const key = "color";
const value = "blue";

car[key] = value;

console.log(car);

In the above example, we have an object called car with the property brand. To add a new key-value pair, we create variables key and value. Then, we use bracket notation (car[key]) to add the key-value pair dynamically.

Another example of using bracket notation to add a key-value pair to an object is when the key name contains special characters.

Here is example for this:

const person = {
  name: "John",
  age: 30,
};

const key = "city name";
const value = "New York";

person[key] = value;

console.log(person);

3. Using Object.assign()

Using the Object.assign() method you can add multiple key-value pairs to an object at once.

To add multiple key-value pairs to an object, you need to pass the object as the first argument and the key-value pairs as the second argument to the Object.assign() method.

Here is your example:

const person = {
  name: "John"
};

Object.assign(person, {
  age: 30,
  country: "USA",
});

console.log(person);

In the above example, we have an object called person with properties name and age. To add multiple key-value pairs to the object, we use the Object.assign() method and pass the object as the first argument and the key-value pairs as the second argument.

4. Using Spread Operator

Using the spread operator (...) you can add multiple key-value pairs to an object at once.

To add multiple key-value pairs to an object, you need to pass the object as the first argument and the key-value pairs as the second argument to the spread operator.

Here is your example:

const person = {
  name: "John"
};

const newPerson = {
  ...person,
  age: 30,
  country: "USA",
};

console.log(newPerson);

In the above example, we have an object called person with properties name and age. To add multiple key-value pairs to the object, we use the spread operator (...) and pass the object as the first argument and the key-value pairs as the second argument.

5. Checking if a Key Already Exists

Before adding a key-value pair to an object, it's important to check if the key already exists. If the key exists, you might want to update its value instead.

Here's an example that demonstrates this concept:

const student = {
  name: "Emily",
  age: 21,
};

if (student.hasOwnProperty("age")) {
  student.age = 22;
} else {
  student.age = 21;
}

console.log(student);

In the above example, we have an object called student with properties name and age. Before adding a key-value pair to the object, we check if the key age already exists using the hasOwnProperty() method. If the key exists, we update its value. Otherwise, we add the key-value pair to the object.

6. Adding a Key-Value Pair to a Nested Object

Adding a key-value pair to a nested object is similar to adding a key-value pair to a normal object.

Here's an example that demonstrates this concept:

const student = {
  name: "Emily",
  age: 21,
  address: {
    street: "123 Main St",
    city: "New York",
  },
};

student.address.country = "USA";

console.log(student);

In the above example, we have an object called student with properties name, age, and address. The address property is a nested object with properties street and city. To add a key-value pair to the nested object, we use the dot notation (.) and pass the key name and value.

7. Updating the Value of an Existing Key

Updating the value of an existing key is similar to adding a key-value pair to an object.

Here's an example that demonstrates this concept:

const student = {
  name: "Emily",
  age: 21,
};

student.age = 18;

console.log(student);

In the above example, we have an object called student with properties name and age. To update the value of the age property, we use the dot notation (.) and pass the key name and value.

Conclusion

There are multiple ways to add a key-value pair to an object in JavaScript. You can use the dot notation (.), square bracket notation ([]), Object.assign() method, spread operator (...), etc.

It's important to check if the key already exists before adding a key-value pair to an object. If the key exists, you might want to update its value instead.

That's all for now. Happy Learning!