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.
Table of Content
- Using pushedObject property
- Using the spread operator (…)
- Using Object.assign ()
- Using Object.defineProperty()
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);
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.
// 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.
// 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' }
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);
Output
{
type: 'Car',
details: { brand: 'Toyota', model: 'Corolla', year: 2020 }
}
Contact Us