The Object.assign() Method

JavaScript is full of nifty methods that make development smoother and more intuitive. One such method is Object.assign(). This static method is incredibly useful for copying properties from one or multiple source objects to a target object. Let's dive straight into how it works.

Syntax

Object.assign(target, ...sources)

Where:

• target is the object that will receive properties.

• sources are the objects from which properties are copied.

Basic Usage

The simplest use case is to copy properties from one object to another:

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 1, b: 2 }

Here, we created a new object obj2 by copying properties from obj1. Notice that Object.assign() returns the modified target object.

Overwriting Properties

If the source objects have properties with the same name, properties in later objects will overwrite those in earlier objects:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const result = Object.assign({}, obj1, obj2);
console.log(result); // { a: 1, b: 3, c: 4 }

Deep Cloning Warning

Object.assign() performs a shallow copy. If the value of a property is an object, only the reference will be copied:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 3

For deep cloning, you might consider alternatives such as structuredClone():

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = structuredClone(obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 2

Merging Objects

Merging objects with Object.assign() is straightforward:

const o1 = { a: 1 };
const o2 = { b: 2 };
const result = Object.assign({}, o1, o2);
console.log(result); // { a: 1, b: 2 }

Copying Symbol-Typed Properties

Both String and Symbol properties are copied. Let's look at an example:

const o1 = { a: 1 };
const o2 = { [Symbol('foo')]: 2 };
const result = Object.assign({}, o1, o2);
console.log(result); // { a: 1, [Symbol('foo')]: 2 }

Accessor Properties

Accessor properties (getters and setters) are handled differently:

const obj = {
  a: 1,
  get b() {
    return 2;
  }
};
const result = Object.assign({}, obj);
console.log(result); // { a: 1, b: 2 }

This assigns the current value returned from the getter to the property.

Handling Non-Enumerable Properties

Non-enumerable properties and properties on the prototype chain cannot be copied:

const proto = { inherited: 5 };
const obj = Object.create(proto);
obj.own = 10;
Object.defineProperty(obj, 'nonEnumerable', {
  value: 20,
  enumerable: false
});

const copy = Object.assign({}, obj);
console.log(copy); // { own: 10 }

Exception Handling

If an error occurs during property assignment (e.g., non-writable property), Object.assign() still proceeds with subsequent properties:

const target = Object.defineProperty({}, 'a', {
  value: 1,
  writable: false
});
try {
  Object.assign(target, { b: 2, a: 2 });
} catch (e) {
  console.log(e); // TypeError: Cannot assign to read only property 'a'
}
console.log(target); // { a: 1, b: 2 }