As we have repeatedly mentioned, JavaScript is not a traditional object-oriented language in the way of how this definition is usually understood. Classes in JS are different from the classes in other programming languages; however it still has objects and consequently constructors, which work almost in the same way as in other languages.

Topic for today is the Object.assign() method, one of the so-called “object constructor methods”. Like other methods of this type, it allows you to modify the object, specifically, copies properties of given objects to a single object and then returns it. So, let’s take a closer look.

Basics of the object.assign() method

First of all, let’s focus on making a clear definition. Object.assign() copies all own enumerable properties of one or several source objects to a given target object, and returns the target object that was previously modified (the entire operation of copying is made by a reference).

The obj.assign() is a static method, which means that it is called using the Object class name. It is one of the basic methods to copy the properties from one object to another. Based on it, we see that it has straightforward syntax.

Syntax:

Object.assign(target, ...source)

Parameters:

  • target is the target object; i.e. what the method is applied to (where the source properties are copied to). It is returned after it was previously modified using the method.

  • source is the source object; i.e. an object, which contains properties that you want to apply to the target. Pay attention it is possible to have one or several source objects, while target can be only one.

Return value: the method returns the modified target object.

Take into account that the method is not compatible with some browsers. Object.assign() is the ECMAScript 2015 (ES 6) feature, making it work in most modern browsers, like Google Chrome v. 51.0 or newer, or Safari 10 or newer. However, the method will not work correctly in the case of Internet Explorer of any version or some other old browsers, released chiefly before 2015.

How to use the method?

The method can be used for a number of operations and as soon as it belongs to the object.methods, it is a valuable tool used by advanced developers. It is mostly used for extending settings from default objects, not the complicated ones being a basic method.

In turn, we will highlight two essential and most common ways to use it:

  1. Cloning (copying) an object

  2. Merging objects

// the example of cloning the object
const firstObj = { number: 3 };
const copiedObj = Object.assign({}, firstObj);
console.log(copiedObj);
// expected output is { number: 3 }

// merging objects
let thirdObj = { animal: 'cat' };
let fourthObj = { name: 'Oliver' };
let pet = Object.assign(thirdObj, fourthObj);
console.log(pet);
// expected output is { animal: "cat", name: "Oliver"}

There is an important note, especially in regards to merging objects. The properties in the target object are overwritten by properties taken from source objects (in case they have the same key). The later source object itself overwrites the earlier one.

let obj1 = { x: 38, y: 111, z: 12 };
let obj2 = { y: 39, z: 128 };
let obj3 = { z: 40 };
// the keys from earlier sources will be overwritten by the later ones
let obj4 = Object.assign({}, obj1, obj2, obj3);
console.log(obj4);
// expected output is { x:38, y:39, z:40 }

As previously said, the method only copies enumerable and own properties, while it can’t be applied to prototype chain and non-enumerable properties:

let obj1 = Object.create(
{ x: 38 },
{
// x is on obj1's prototype chain.
y: {
value: 39, // y is not an enumerable property, so it can't be copied.
},
z: {
value: 40,
enumerable: true, // z is an own enumerable property, so you can apply object.assign method
},
}
);


let copiedObj = Object.assign({}, obj1);
console.log(copiedObj);
// expected output is { z: 40 }

This method can be applied to strings since they have enumerable properties and also to symbols.

The method assigns properties, meaning that it neither copies nor defines new properties. If you go deeper, you can see that Object.assign() uses the get on the sources and set on the target.

In case the value of the source object is a reference to another object, the method will copy the reference value. Therefore, the method makes shallow copies, not deep copies or clones.

If Object.assign() can not be applied in the particular case, you should prefer to use alternative ways to copy values. For example, object.getOwnPropertyDescriptor() and object.defineProperty() to copy property definitions into prototypes, or even accessors, as soon as the method itself can’t copy accessors.

Potential issues

The first thing we shall note is that in case the method is applied to null or undefined sources, it will not throw the error, while the values will be perceived as empty. You can also match a TypeError if the property is non-writable; however, it will be modified by values added before you face the error. Also, be especially careful with the source objects. Any source object can’t be a reference to an object; otherwise, only the reference values will be copied.