JavaScript Methods: Object.assign()

JavaScript has an Object class that has all sorts of methods we can use to manipulate those objects. In this article, we’ll take a look at the Object.assign() method and demonstrate how it’s used.

A Little Background

As a reminder an object is a data type in JavaScript, similar to dictionaries in Python, that have what we call key:value pairs. Let’s say we have an object, let’s call it Harry. It might have key:value pairs that look like this:

let Harry = {
 	firstName: 'Harry',
 	lastName: 'Potter',
 	age: 11,
 	house: 'Gryffindor',
 	pet: {
   	  name: 'Hedwig',
        animal: 'owl'
 	}
};

The basic rule of theme in this situation is that the property name to the left of the colon is the key, and the stuff to the right is the value. Most of the keys and values are fairly straightforward – the only one that might be a little dicey is the very last property: pet. Pet is still the key in this instance. The value, however, is an object that has two more key:value pairs. This is what we call a nested object.

Object.assign(target, …sourceObjs);

There is an Object method called assign() that can be used to take one or more source objects and copy them to a target object. Let’s go straight to the code to see what it does:

let hpChar = {
 firstName: 'Harry',
 lastName: 'Potter',
 age: 11,
 house: 'Gryffindor',
 pet: {
   name: 'Hedwig',
   animal: 'owl'
 }
}
 
Object.assign({}, hpChar);
console.log(hpChar, '\n');
Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);
 
console.log(hpChar)

Let’s walk through the code together. We start with an object literal called hpChar. This hpChar has a firstName, lastName, age, house, and pet property. That pet property is an object itself and has some keys and values on its own.

Next, we have our first instance of our method that we’re here to talk about. Object.assign takes two or more parameters. The first is always the target object you want to assign values to. In this instance, it’s an empty object.

The second parameter is our object defined above. This is the source material we are going to take from to assign to the target object (our first parameter). 

The following line logs the result into the console:

{ firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' } }

Nothing too terribly different, right? That’s because we assigned hpChar to an empty object – we essentially cloned the object. What if we were to do it again, but change some values? Instead of the empty object this time, let’s replace that with the hpChar object – this will be our target this time. Let’s change some values on the second parameter. Feel free to play around with the values as long as you keep the keys the same.

Here are the values I’m going to replace. If the value in the target object doesn’t need to be changed, you don’t have to explicitly call out it’s value in the source object.

Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);

The second time we logged the result in the console, it returned the target object, overwriting the properties with new values. Now our console looks like this:

{ firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' } }

This is what merging two objects with the same properties looks like. Now what if we were to merge three objects with different properties? What do you expect to happen? 

var obj1 = {
 foo: 1
}
 
var obj2 = {
 bar: 2
}
 
var obj3 = {
 baz: 3
}
 
Object.assign(obj1, obj2, obj3)
 
console.log(obj1);

Obj1 is our target obj. Obj2 and obj3 are our source objects. Those will be merging into our target object. Because no properties overlap, all properties will be merged into obj1 with their respective values. 

{ foo: 1, bar: 2, baz: 3 }

There you have it! A working implementation of Object.assign(). Once you understand the concepts here, you’re one step closer to learning a JavaScript framework! 

Ready for more?

Take a look at these tutorials to further your study…

JavaScript Object.keys()

A Step-By-Step Guide to JavaScript Let

JavaScript typeof

JavaScript String Contains: Step-By-Step Guide

JavaScript Variables