How to Push an Object into Another Object in JavaScript ?

In JavaScript, the concept of pushing an object into another object involves embedding one object within another as a property. This technique is useful for organizing data structures where related information is grouped, enhancing the ability to manage and manipulate complex data sets effectively.

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.

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

{
  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.

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

{ 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.

// Initial person information

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

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

// Output
console.log(userProfile);

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

Using Object.defineProperty()

The Object.defineProperty() method defines a new property directly on an object or modifies an existing property on an object, and returns the object. This method is useful when you need to control the behavior of the new property, such as making it read-only or non-enumerable.

Example: To demonstrate pushing a car's details inside a vehicle object using the Object.defineProperty() method.

// Initial vehicle information
let vehicle = { type: "Car" };
let carDetails = { brand: "Toyota", model: "Corolla", year: 2020 };

// Adding carDetails to vehicle using Object.defineProperty
Object.defineProperty(vehicle, 'details', {
    value: carDetails,
    writable: true,
    enumerable: true,
    configurable: true
});

// Output
console.log(vehicle);

{
  type: 'Car',
  details: { brand: 'Toyota', model: 'Corolla', year: 2020 }
}

Using dot(.) notation or Direct Assignment

Using dot (.) notation, you can directly add a property to an object if the property name is known and simple. Alternatively, direct assignment with bracket ([]) notation is used for dynamic or complex property names in JavaScript.

Example: In below example we creates a vehicle object and adds carDetails as a details property to it. The vehicle object now contains all the information about the car's brand, model, and year.

let vehicle = { type: "Car" };
let carDetails = { brand: "Toyota", model: "Corolla", year: 2020 };

// Adding carDetails as a property to vehicle
vehicle.details = carDetails;

console.log(vehicle);

{
  type: 'Car',
  details: { brand: 'Toyota', model: 'Corolla', year: 2020 }
}