How to Push an Object into Another Object in JavaScript ?

In JavaScript, an object is a fundamental data type that allows us to store and organize data using key-value pairs.

Objects are versatile and can represent complex structures, making them a crucial part of JavaScript programming.

There are several ways to push an object into another object in JavaScript, which are listed below.

Using pushedObject property

In this method, a new property is added to the target object, and the source object is assigned to that property. creating a hierarchy of objects within the target object. This method includes an entire object within another object, creating a key-value pair where the value is another object.

Example: To demonstrate pushing city information within a region object using the nested object property.

Javascript

// Using a Nested Object

let region =
    { name: "Western Region", subregions: {} };
let cityDetails =
    { cityName: "Mumbai", population: 12500000 };

// Assigning cityDetails to a property
// within the region object
region.subregions.maharashtra = cityDetails;

// Output
console.log(region);

Output

{
  name: 'Western Region',
  subregions: { maharashtra: { cityName: 'Mumbai', population: 12500000 } }
}

Using the spread operator (…)

The spread operator (…) is used to create a shallow copy of the target object. Properties from the source object are added or overwritten in the target object. It ensures that changes to the source object after the operation do not affect the target object.

Example: To demonstrate pushing the information about a person and their address inside the user profile using the spread operator() method.

Javascript

// Initial person information

let person = { name: "XYZ", age: 30 };
let address = { city: "Mumbai", state: "Maharashtra" };

// Creating a shallow copy of the
// user profile by spreading properties
let userProfile = { ...person, ...address };

// Output
console.log(userProfile);

Output

{ name: 'XYZ', age: 30, city: 'Mumbai', state: 'Maharashtra' }

Using Object.assign ()

Object.assign is used to copy properties from one or more source objects into the target object. It makes a shallow copy, and modifications to the source object after the assignment that do not affect the target object.

Example: To demonstrate pushing the information about a person and their address inside the user profile using the object.assign() method.

Javascript

// Initial person information

let person = { name: "XYZ", age: 30 };
let address = { city: "Mumbai", state: "Maharashtra" };

// Creating an user profile
//using the Object.assign()
let userProfile = Object.assign(person, address);

// Output
console.log(userProfile);

Output

{ name: 'XYZ', age: 30, city: 'Mumbai', state: 'Maharashtra' }