Add Key Value to Object in JavaScript

We will explore the process of adding key-value pairs to objects in JavaScript. To begin with, let’s clarify what key-value pairs are.

Key-Value Pairs

Key-value pairs represent a fundamental method for data storage. In this structure, the key serves as the distinct identifier, while the value corresponds to the information associated with that particular key.

These pairs are beneficial for structuring information within JavaScript objects and arrays.

Creating and accessing Key-Value Pairs

Creating key-value pairs in JavaScript is a straightforward process. When working with Objects, you need to establish keys and assign corresponding values to those keys. In the case of arrays, each element within the array is associated with an index, which serves as the key for the corresponding value.

Constructing and accessing key-value pairs in an object

Code:

const product = {
  name: "Microwave",
  quantity: 2,
  price: 24000
};

console.log(product);

Output:

In this output, we observe pairs of keys and values contained within an object.

Constructing and accessing key-value pairs in an array

Code:

const season = ["summer", "monsoon", "winter", "autumn"];
console.log(season);

Output:

In the result, we can observe pairs of keys and values within an array.

There are various ways to add key-value pair to an Object which are given below:

• ✅ Utilizing Dot Notation
• ✅ Utilizing Square Bracket Notation
• ✅ Utilizing spread (…) Syntax
• ✅ Utilizing Object.assign
• ✅ Utilizing Object.defineProperty

Let us understand these ways one by one.

Utilizing Dot Notation

We can incorporate a key-value pair into an object using dot notation. The key has to be either a String or a symbol.

Demo:

We will employ dot notation to insert a key-value pair into an object.

Code:

const obj = { name: "Peter" };
obj.age = 30;
console.log(obj);

Output:

We can observe output directed downward, where the key-value pair is incorporated using the dot notation.

Utilizing Square Bracket Notation

The dot notation presents certain limitations, particularly in its inability to manage dynamic keys, which can lead to errors. To address this limitation, the square bracket notation is utilized as a solution.

Demo:

We will employ the square bracket syntax to insert a key-value pair.

Code:

const obj = { Product: "Laptop" };
const l1 = "Laptop Company";
const l2 = "Laptop RAM";
const l3 = "Laptop ROM";
obj[l1] = "Lenovo";
obj[l2] = "8GB";
obj[l3] = "1TB";

console.log(obj);

Output:

We can observe the output decreasing, where the key-value pair is incorporated using the square bracket syntax.

Utilizing spread (…) Syntax

It enables the distribution of iterables, including arrays, objects, or strings.

Demo-1:

We will employ the spread (…) syntax to insert a key-value pair. This syntax is commonly used to generate a new object.

Code:

const obj = { name: "Anita" };
const newObj = { ...obj, age: 45 };
console.log(newObj);

Output:

Demo-2:

This feature enables the addition of several properties at once; however, if a property that is being added already exists within the Object, its current value will be replaced with the new value assigned to that property.

Code:

const obj1 = { name: "Anita", age: 45 };
const Obj2 = { ...obj1, age: 50 };
console.log(Obj2);

Output:

It can be observed that the value associated with the key "age" was initially 40; however, this value has now been replaced, resulting in the key "age" having a new value of 45.

Utilizing Object.assign

The Object.assign function operates similarly to the spread (…) syntax.

Demo:

We will employ the Object.assign function to incorporate a key-value pair into an object.

Code:

const ob = { Product: "Sanitizer" };
Object.assign(ob, { Brand: "Dettol" });
console.log(ob);

Output:

In the resulting output below, we can observe the key-value pair generated through the use of the Object.assign method.

Utilizing Object.defineProperty

The method Object.defineProperty is employed to alter the attributes of an object’s property.

Demo:

We will make use of Object.defineProperty to introduce a key-value pair. The property 'season' will remain unchanged, as we have set writable: false.

Code:

const obj = { Fruit: "Mango" };
Object.defineProperty(obj, "season", {
  value: "Summer",
  writable: false,
  enumerable: true,
  configurable: true,
});
console.log(obj);
obj.season = "Monsoon";
console.log(obj);

Output:

In the following result below, we can observe the creation of the key-value pair achieved through the use of the Object.defineProperty method.

Conclusion:

We have comprehended the method of incorporating key-value pairs into JavaScript objects. These key-value pairs serve to structure data effectively, ensuring it can be accessed with ease. There are several approaches available for adding key values, including Dot Notation, Square Bracket Notation, the spread (…) Syntax, Object.assign, and Object.defineProperty.