How to add Key-Value pair to a JavaScript Object?
Last Updated :
16 May, 2025
A JavaScript object has a key-value pair, and it can be of variable length. We first need to declare an object and assign the values to that object for that there can be many methods.
Below are the methods to add a key/value pair to a JavaScript object:
Using Dot Notation
In this approach, we will directly access the key of an object by "." for assigning the value to it. It can be a repeated method as every time we need to define a different key for different values.
Example: This example shows the implementation of the above approach.
index.js
const obj = { Organisation: "GFG" };
obj.field = "CS";
console.log(obj);
Output:
bash
{ Organisation: 'GFG', field: 'CS' }
Using Bracket Notation
In this approach, we are using Bracket to access the key and assign the value to it.
Example: This example shows the implementation of the above approach.
JavaScript
const obj = { Organisation: "GFG" };
const Field = "field";
const Year = "year";
const lang = "lang";
obj[Field] = "CS";
obj[Year] = "2023";
obj[lang] = "English";
console.log(obj);
Output:
Output
{ Organisation: 'GFG', field: 'CS', year: '2023', lang: 'English' }
Using Object.assign() Method
In this approach, we are using Object.assign() method to assign the key and value to the object. We are passing the object name and the field that we want to use in the object. It assign those fields to the given object.
Example: This example shows the implementation of the above approach.
JavaScript
const obj = { Organisation: "GFG" };
Object.assign(obj, { field: "CS" });
console.log(obj);
Output:
bash
{ Organisation: 'GFG', field: 'CS' }
Using Variable as a Key
If your key name is inside a variable, you must use bracket notation.
index.js
let obj = {};
let keyName = "city";
obj[keyName] = "New York";
console.log(obj);
Output:
bash
Using Object.defineProperty() Method
In this approach, we are using Object.defineProperty() method to assign the key and value to the object. We are passing the object name and the field that we want to use in the object with some extra specification that is served by the method itself.
Example: This example shows the implementation of the above approach.
JavaScript
const obj = { Organisation: "GFG" };
Object.defineProperty(obj, "field", {
value: "CS",
writable: false,
enumerable: true,
configurable: true,
});
console.log(obj);
// This won't change the 'field' key because
// 'writable' is set to false
obj.afield = "Civil";
console.log(obj);
Output:
bash
{ Organisation: 'GFG', field: 'CS' }
{ Organisation: 'GFG', field: 'CS', afield: 'Civil' }
Using Object.entries() and Object.fromEntries()
In this approach, we are using Object.entries() to convert the object into an array of key-value pairs, then adding the new key-value pair, and converting it back to an object using Object.fromEntries().
Example: This example shows the implementation of the above approach.
JavaScript
const obj = { Organisation: "GFG" };
const entries = Object.entries(obj);
entries.push(['field', 'CS']);
const newObj = Object.fromEntries(entries);
console.log(newObj);
{ Organisation :'GFG' , field:'CS' }
Using Spread Operator
The spread operator is used to copy all properties from one object into another, or merge objects easily.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Spread Operator Example</title>
</head>
<body>
<h2>Check console for output</h2>
<script>
// Original object
const person = {
name: "Alice",
age: 25
};
// Add a new key-value pair using spread operator
const updatedPerson = {
...person,
city: "New York",
profession: "Engineer"
};
console.log("Original Object:", person);
console.log("Updated Object:", updatedPerson);
</script>
</body>
</html>
Output:
bash
Updated Object: { name: 'Alice', age: 25, city: 'New York', profession: 'Engineer' }
Using Map (alternative to Plain Objects)
A Map allows keys of any type and maintains insertion order. It is used when you need more flexibility.
script.js
// Create a new Map
const person = new Map();
// Add key-value pairs
person.set('name', 'Grace');
person.set('age', 27);
person.set('city', 'Berlin');
console.log(person);
// Get a value
console.log(person.get('name'));
Output:
bash
Map(3) { 'name' => 'Grace', 'age' => 27, 'city' => 'Berlin' }
Grace
Similar Reads
How to remove a key-value pair from JavaScript object?
Removing a key-value pair from an object in JavaScript means deleting a specific property and its corresponding value from the object. This can be achieved using the delete operator, destructuring with the rest operator, or various utility functions to manipulate the object dynamically.How to remove
3 min read
How to create an object from the given key-value pairs using JavaScript ?
In this article, we will learn to create an object from the given key-value pairs using JavaScript.Key-value pair: Unique identifier (key) associated with its corresponding value; fundamental for data organization and retrieval in programming. here we have some common approaches.We will explore the
5 min read
How to get a key in a JavaScript object by its value ?
To get a key in a JavaScript object by its value means finding the key associated with a specific value in an object. Given an object with key-value pairs, you want to identify which key corresponds to a particular value, often for searching or data retrieval.How to get a key in a JavaScript object
4 min read
How to invert key value in JavaScript object ?
JavaScript is a high-level, interpreted, and dynamically typed client-side scripting language. JavaScript is used to add dynamic features to the static HTML. Everything is an object in JavaScript. Objects in JavaScript can be declared using figure brackets {..} and the objects may comprise certain p
2 min read
How to store a key=> value array in JavaScript ?
In JavaScript, storing a key-value array means creating an object where each key is associated with a specific value. This allows you to store and retrieve data using named keys instead of numeric indices, enabling more intuitive access to the stored information.Here are some common approaches:Table
4 min read
How to Merge Child Object Value to Parent Key Based on Key Name in JavaScript ?
JavaScript allows us to merge values from child objects into their parent object based on a specific key name. This can be useful for organizing data or simplifying complex structures. There are several approaches available in JavaScript to merge child object values to parent key based on the key na
4 min read
How to get the Value by a Key in JavaScript Map?
JavaScript Map is a powerful data structure that provides a convenient way to store key-value pairs and retrieve values based on keys. This can be especially useful when we need to associate specific data with unique identifiers or keys.Different Approaches to Get the Value by a Key in JavaScript Ma
3 min read
How to add a property to a JavaScript object using a variable as the name?
In JavaScript, you can dynamically add a property to an object using a variable as the name. This allows you to create flexible and dynamic objects based on runtime values, enhancing code reusability and adaptability. There are several methods that can be used to add a property to a JavaScript objec
2 min read
How to unflatten an object with the paths for keys in JavaScript ?
In this article, we will learn to unflatten an object which has a certain number of key-value pairs(s) within it with the paths for the keys in JavaScript. Problem Statement: You are given an object with several key-value pair(s). Some keys have various keys names present after a dot, you basically
4 min read
How to Sort/Order Keys in JavaScript Objects?
To sort or order keys in JavaScript objects, first get the keys as an array and then apply a sorting mechanism to arrange them.Below are the approaches to sort the keys in JavaScript Objects:Table of ContentUsing forEach() methodUsing reduce methodApproach 1: Using forEach() methodSort the keys of a
2 min read