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.

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);

{ 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);

{ 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);

{ 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);

{ 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);

{ Name: 'Nikunj', Age: 22, Occupation: 'Content Writer' }