Skip to content

Add object to object JavaScript

  • by

To add an object to another object in JavaScript, you can use the dot notation or square bracket notation to create a new property on the object. This can be done by assigning the object you want to add as a value to a new or existing property of the original object.

Dot notation:

object1.newProperty = object2;

Square bracket notation:

object1['newProperty'] = object2;

Both dot notation and square bracket notation achieve the same result, and the choice of which to use is a matter of personal preference.

Add the object to object JavaScript example

Simple example code adds an object to another object in JavaScript using either dot notation or square bracket notation.

const person = {
  name: 'John',
  age: 30
};

const address = {
  street: '123 Main St',
  city: 'New York',
  state: 'NY'
};

person.address = address; // Using dot notation

person['phone'] = '555-555-5555'; // Using square bracket notation

console.log(person);

Output:

Add object to object JavaScript

Using square bracket notation, the code would look like this:

let obj1 = { name: "John", age: 30 };
let obj2 = { city: "New York" };

obj1["address"] = obj2;

console.log(obj1); // { name: "John", age: 30, address: { city: "New York" } }

and using dot notation:

let obj1 = { name: "John", age: 30 };
let obj2 = { city: "New York" };

obj1.address = obj2;

console.log(obj1); // { name: "John", age: 30, address: { city: "New York" } }

Add Multiple objects

You can add multiple objects to an existing object in JavaScript by creating new properties on the existing object and setting their values to the new objects.

const person = {
  name: 'John',
  age: 30
};

const address = {
  street: '123 Main St',
  city: 'New York',
  state: 'NY'
};

const job = {
  title: 'Software Engineer',
  company: 'Acme Inc.'
};

person.address = address;
person.job = job;

console.log(person);

Using a loop

const person = {
  name: 'John',
  age: 30
};

const addresses = [  {    street: '123 Main St',    city: 'New York',    state: 'NY'  },  {    street: '456 Maple Ave',    city: 'Los Angeles',    state: 'CA'  }];

for (let i = 0; i < addresses.length; i++) {
  person[`address${i+1}`] = addresses[i];
}

console.log(person);

Add object to object Using dot vs bracket notation in JavaScript

Both dot notation and bracket notation have their advantages and disadvantages, and which one is “better” depends on the specific situation and context. Here are some factors to consider when choosing between dot notation and bracket notation:

FeatureDot NotationBracket Notation
Accessing a propertyobjectName.propertyNameobjectName["propertyName"]
Setting a propertyobjectName.propertyName = propertyValueobjectName["propertyName"] = propertyValue
Property nameMust be a valid identifier (no spaces, reserved keywords)Can be any string or expression (including variables)
ReadabilityMore readable and easier to understandSlightly less readable and can be more verbose
CompatibilityWidely supported in all modern browsers and environmentsWidely supported, but may be required for compatibility
Examplesperson.firstNameperson["firstName"]
car.color = "red"car["color"] = "red"
obj[myVariable] = "value"obj.myVariable = "value" (invalid syntax)

Comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading