How to add key-value pair to an object in JavaScript?

In this article, we are going to show you how to add a key to an object in JavaScript with this comprehensive guide.

Get the solutions here and use them effectively to manipulate objects in JavaScript.

We can be guaranteed that this guide will help you enhance your skills and better understand the process.

Different ways on how to add key-value pair to an object in JavaScript?

There are multiple ways to add a key to an object in JavaScript. Here, we’ll explore the most commonly used methods:

1. Use the Bracket Notation

One of the simplest and widely-used methods to add a key to an object is by using bracket notation. This method allows us to add a new key-value pair or modify an existing one.

Here’s an example:

const myObject = { name: "Itsourcecode", age: 18 };
myObject["occupation"] = "Programmer";

// the result that modified the object
console.log(myObject);

Output:

{ name: 'Itsourcecode', age: 18, occupation: 'Programmer' }

2. Use the Dot Notation

Dot notation is another approach to add a key to an object, especially when the key is a valid identifier. This method is concise and readable.

Here’s an example:

const sampleObject = { name: "Itsourcecode", age: 18 };
sampleObject.city = "USA";

console.log(sampleObject);

Output:

{ name: 'Itsourcecode', age: 18, city: 'USA' }

3. Use the Object.assign() Method

The Object.assign() method is useful when we want to merge multiple objects or add multiple key-value pairs simultaneously.

const obj1 = { x: 1 };
const obj2 = { y: 2 };

const mergedObject = Object.assign({}, obj1, obj2);

console.log(mergedObject);

Output:

{ x: 1, y: 2 }

4. Expanding an object

You can add multiple key/value pairs to an object at the same time by expanding it. For instance, if you have an object let obj = {key1: value1, key2: value2}; you can add multiple new properties by using Object.assign(obj, {key3: value3, key4: value4});.

Here’s an example:

let obj = {name: "Itsourcecode", position: "programmer"};
Object.assign(obj, {address: "USA", gender: "Male"});
console.log(obj);

Output:

{
  name: 'Itsourcecode',
  position: 'programmer',
  address: 'USA',
  gender: 'Male'
}

5. Using a function

You can also use a function to add a new property to an object.

For instance, you can create a function addProperty(obj, key, value) {obj[key] = value;} and then use it to add a new property to an object by calling addProperty(obj, “key3”, “value3”);.

Here’s an example:

let obj = {name: "Itsourcecode", position: "programmer"};

function addProperty(obj, key, value) {
obj[key] = value;
}

addProperty(obj, "address", "USA");
console.log(obj);

Output:

{ name: 'Itsourcecode', position: 'programmer', address: 'USA' }

Conclusion

In conclusion, this article provides a comprehensive guide on how to add a key to an object in JavaScript. It explores multiple commonly used methods:

1. Bracket Notation: Adding or modifying a key-value pair using square brackets.
2. Dot Notation: Adding a key-value pair when the key is a valid identifier.
3. Object.assign() Method: Merging multiple objects or adding multiple key-value pairs simultaneously.
4. Expanding an Object: Adding multiple key-value pairs at the same time by expanding the object.
5. Using a Function: Creating a function to add a new property to an object.

By following these methods, you can enhance your JavaScript skills and gain a better understanding of object manipulation in JavaScript.

We are hoping that this article provides you with enough information that help you understand on how to add key to object JavaScript.

You can also check out the following article:

• JavaScript add option to select
• JavaScript add row to table
• JavaScript append to array

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →