How to Append an Object as a Key Value in an Existing Object in JavaScript ?
In JavaScript, An object is a key-value pair structure. The key represents the property of the object and the value represents the associated value of the property. In JavaScript objects, we can also append a new object as a Key-value pair in an existing object in various ways which are as follows.
Table of Content
- Using JavaScript Spread (…) Operator
- Using JavaScript Object.assign() method
- Using JavaScript Bracket notation ([])
- Using JavaScript object.defineProperty() method
Using JavaScript Spread (…) Operator
The Spread (…) Operator in JavaScript allows to copy all the elements in the existing object into a new object.
Example: Demonstrating appending new object to existing object as a key using the spread operator.
let Object1 = {
Name: "Poojitha",
Age: 20,
};
let Object2 = {
Occupation: "Content Writer",
};
Object1 = {
...Object1,
...Object2,
};
console.log(Object1);
Output
{ Name: 'Poojitha', Age: 20, Occupation: 'Content Writer' }
Using JavaScript Object.assign() method
The Object.assign() method is used to copy the data from the specified enumerable objects to the target object.
Syntax:
Object.assign(target_object, source_object)
Example: Appending new object to existing object as a key using assign method.
let Object1 = {
Name: "Poojitha",
Age: 20,
};
let Object2 = {
Occupation: "Content Writer",
};
Object.assign(Object1, Object2);
console.log(Object1);
Output
{ Name: 'Poojitha', Age: 20, Occupation: 'Content Writer' }
Using JavaScript Bracket notation ([])
The JavaScript bracket notation helps to directly assign the new object as a key-value pair to the existing object.
Example: We will create a new key that is similar to the key in the object2 and assign the value to it taken from the object1 by using bracket notation.
let Object1 = {
Name: "Poojitha",
Age: 20,
};
let Object2 = {
Occupation: "Content Writer",
};
Object1["Occupation"] = Object2["Occupation"];
console.log(Object1);
Output
{ Name: 'Poojitha', Age: 20, Occupation: 'Content Writer' }
Using JavaScript object.defineProperty() method
The Object.defineProperty() method helps to define a new property in the specified object. To make the newly created property enumerable and writable, we set the `enumerable` and `writable` properties to `true`.
Syntax:
Object.defineProperty(object, property_name, descriptor)
Example: To demonstrate appending new object to the existing object as a key using the Object.defineProperty() method.
let Object1 = {
Name: "Poojitha",
Age: 20,
};
let Object2 = {
Occupation: "Content Writer",
};
Object.defineProperty(Object1, "Occupation", {
value: Object2["Occupation"],
enumerable: true,
writable: true,
});
console.log(Object1);
Output
{ Name: 'Poojitha', Age: 20, Occupation: 'Content Writer' }
Using Object.entries() and Array.prototype.forEach()
In this approach, we use the Object.entries() method to get an array of key-value pairs from the new object. Then, we use the Array.prototype.forEach() method to iterate over these pairs and add them to the existing object.
Syntax:
Object.entries(newObject).forEach(([key, value]) => {
existingObject[key] = value;
});
Example: This example demonstrates how to use Object.entries() and Array.prototype.forEach() to append a new object to an existing object.
let Object1 = {
Name: "Nikunj",
Age: 22,
};
let Object2 = {
Occupation: "Content Writer",
};
Object.entries(Object2).forEach(([key, value]) => {
Object1[key] = value;
});
console.log(Object1);
Output
{ Name: 'Nikunj', Age: 22, Occupation: 'Content Writer' }
Contact Us