Have you come across a requirement to merge two or more object in another object? Most simply, you can achieve it by using JavaScript Spread syntax (…).

Due to its multi functionalities purpose, JavaScript Spread Syntax is one of the most useful operators. You can use it,

  • Rest parameters to a function
  • To merge two and more arrays
  • To copy objects etc.

The primary purpose of Spread syntax is to expand the iterable such as arrays or strings. Starting ECMAScript 2018, it can also be used with object literals, so you can use it to merge or copy objects.

You can shallow copy an object using the spread syntax as below,


let Product = {

  Id:1,
  Price : 100,
  Title : "pen"
}

let produtDto = {
    ...Product
}

console.log(JSON.stringify(produtDto));

To merge, let us say you have two objects,


let Product = {
  Id: 1,
  Price: 100,
  Title: "pen"
}

let Suppliers = {
  Sid: 1,
  Name: 'ABC LIC',
  City: "Mumbai"
}

You have a requirement to create another object using the properties of these two objects. Using the spread syntax, you can do it as below,


let produtDto = {
  ...Product,
  ...Suppliers
}

console.log(JSON.stringify(produtDto));

It is as simple as this. So, spread syntax copies own enumerable properties of an object onto a new object. And keep in mind that it creates a shallow copy of the object.

The spread syntax copies own enumerable properties of an object onto a new object

Let us tweak the requirement a bit, and now you want to exclude the Sid property of Supplier object from the merging.  

As you just saw the definition, that spread syntax only copies enumerable properties, so to exclude Sid from being copying makes it non-enumerable.


Object.defineProperty(Suppliers, 'Sid', { enumerable: false });

let produtDto = {
  ...Product,
  ...Suppliers,

}

console.log(JSON.stringify(produtDto));

As you notice in the output, as Sid property is non-enumerable, the spread syntax won’t copy it.

Now suppose that you are merging objects, and they have the same properties. In that case, spread syntax considers the property of the object added in the last.


let Owner = {
  Name:'DJ'
}

let Suppliers = {
  Sid:1,
  Name :'ABC LIC',
  City :"Mumbai"
}

let produtDto = {
      ...Suppliers,
      ...Owner,

}

console.log(JSON.stringify(produtDto));

As you see in the output, spread syntax has taken the Name property of the Owner object and ignored the Name property of the Suppliers object.

Another essential feature of merging with spread syntax is that it does not copy properties of the object’s prototype chain.  It only copies objects’ own enumerable properties.

In the below code listing, the Owner object is linked to Suppliers object using the __proto__, hence it creates a prototype chain between Suppliers and Owner objects.


let Owner = {
  PAN:'192929'
}

let Suppliers = {
  Sid:1,
  Name :'ABC LIC',
  City :"Mumbai"
}

Suppliers.__proto__ = Owner;

let produtDto = {
    ...Product,
      ...Suppliers
}

console.log(JSON.stringify(produtDto));

As you see in the output, spread syntax has not copied the property of the Owner object.  So, it would be best if you kept in mind the following characteristics of spread syntax with object literals.

  • It merges two or more objects
  • It creates a shallow copy
  • It only copies the object’s own enumerable properties
  • It does not copy the properties of the object’s prototypes.
  • For objects with the same properties, it copies properties of objects added in last.

I hope you find this post useful. Thanks for reading.