Add Key Value to Object in JavaScript

We will understand how to add key value to object in JavaScript. Let us first understand the key-value pairs.

Key-Value Pairs

The key-value pairs are a basic way to store data. The key is the unique identifier and the value is the data related to that key.

These pairs are helpful for organizing data inside JavaScript objects and arrays.

Creating and accessing Key-Value Pairs

It is simple to create key-value pairs in JavaScript. For Objects, we have to define keys and give them values related to the keys. For arrays, every element present in the array has an index which is considered the key with the related value.

Constructing and accessing key-value pairs in an object

Code:

Output:

Here in the output we can witness key-value pairs in an object.

Constructing and accessing key-value pairs in an array

Code:

Output:

Here in the outcome we can witness key-value pairs in 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 add key-value pair to an object with the help of dot notation. The key must be a symbol or a String.

Demo:

We will utilize the dot notation for adding the key-value pair to an object.

Code:

Output:

We can witness output downwards in which the key-value pair is added utilizing the dot notation.

Utilizing Square Bracket Notation

The dot notation has some drawbacks such as it cannot handle the dynamic key due to which error occurs. The square bracket notation comes into account to remove this drawback.

Demo:

We will utilize the square bracket notation to add a key-value pair.

Code:

Output:

We can witness output downwards in which the key-value pair is added utilizing the square bracket notation.

Utilizing spread (…) Syntax

It allows to spread iterable such as an array, object or string.

Demo-1:

We will utilize the spread (…) syntax to add a key-value pair. It is utilized to create a new object.

Code:

Output:

Demo-2:

It allows us to add multiple properties simultaneously but if the same property already exists on the Object then the value of the property will be overwritten and a new value will be given to the property.

Code:

Output:

We can witness that the value of the key "age" was 40, but it has been overwritten, and the value of the key "age" becomes 45.

Utilizing Object.assign()

The Object.assign() method is kind of the same as that of spread (…) syntax.

Demo:

We will utilize the Object.assign() method to add a key-value pair to an object.

Code:

Output:

Here in the outcome downwards we can witness the key-value pair created utilizing the Object.assign() method.

Utilizing Object.defineProperty()

The Object.defineProperty() is utilized to modify the property of an object.

Demo:

We will utilize the Object.defineProperty() to add a key-value pair. The season will not be overwritten because we have utilized writable: false.

Code:

Output:

Here in the outcome downwards we can witness the key-value pair constructed utilizing the Object.defineProperty() method.

Conclusion:

We have understood how to add key value to object JavaScript. The key-value pairs are utilized to organize data in a proper way so it can be easily accessible. We can add key values utilizing various ways such as Dot Notation, Square Bracket Notation, spread (…) Syntax, Object.assign() and Object.defineProperty().