Copying Object Properties

Open the project folder

Different ways to copy object properties

We have gone deep into objects with things like object constructors and copying prototypes. But sometimes we just simply want to copy the properties of one object over to another.

And there are a multiple ways to do this:

In the starter file we have two objects:

let baseCharacter = {
  show: 'The Simpsons',
  location: 'Springfield',
  animated: true,
  established: 1989,
};

let homer = {
  name: 'Homer Simpson',
  children: ['Bart', 'Lisa', 'Maggie'],
  gender: 'Male',
  occupation: 'Springfield Power Plant Safety Inspector',
};

console.log(homer);

We have a baseCharacter with information which should apply to all new characters we create.

Then a homer object which has properties specific to Homer. For Homer and all other characters we create, we need to merge in all the properties from the baseCharacter.

A simple way to do this is just to reference the baseCharacter object inside of homer:

let homer = {
  name: 'Homer Simpson',
  children: ['Bart', 'Lisa', 'Maggie'],
  gender: 'Male',
  occupation: 'Springfield Power Plant Safety Inspector',
  baseCharacter,
};

This works fine, but this does create a baseCharacter object which we need to open to find the information we want. For this example, I want to pull out all the properties such as the show, and place them alongside what we already have, rather than having to go deeper into a different object,

The spread syntax

One way to do this is by using the spread syntax, which we looked at earlier. This was the three dots:

let homer = {
  name: 'Homer Simpson',
  children: ['Bart', 'Lisa', 'Maggie'],
  gender: 'Male',
  occupation: 'Springfield Power Plant Safety Inspector',
  ...baseCharacter,
};

This will copy all of the properties from baseCharacter and spread them into this new object. The console will now show all the properties merged into the homer object:

animated: true
children: (3) ['Bart', 'Lisa', 'Maggie']
established: 1989
gender: "Male"
location: "Springfield"
name: "Homer Simpson"
occupation: "Springfield Power Plant Safety Inspector"
show: "The Simpsons"
[[Prototype]]: Object

We can spread in as many objects into a new object as we want to. For example, if we had Homer Simpson with superpowers for an episode, we could do this:

let superHomer = {
  ...baseCharacter,
  ...homer,
  powers: true,
};
console.log(superHomer);

The assign() method

Another way to copy over an objects properties is an object method called assign():

let baseCharacter = {
  show: 'The Simpsons',
  location: 'Springfield',
  animated: true,
  established: 1989,
};

let homer = {
  name: 'Homer Simpson',
  children: ['Bart', 'Lisa', 'Maggie'],
  gender: 'Male',
  occupation: 'Springfield Power Plant Safety Inspector',
};

// target object to copy to / object to copy
Object.assign(homer, baseCharacter);
console.log(homer);

This has the same result as when we used object spread. And if needed, we can store the new merged object into a variable:

let mergedHomer = Object.assign(homer, baseCharacter);

This is useful and something which you will probably use often in JavaScript.

It has lots of uses such as if we have a user and an order, we may want to attach the user to that order object before saving to the database, so we know who placed the order. And you will probably come across lots of other use cases too.