JavaScript Object.assign() is a built-in static method that copies all enumerable own properties from one or more source objects to a target object. It facilitates object merging, shallow cloning, and property copying in a concise manner.

const target_obj = { mobile: 'iPhone17' };
const source_obj = { ios: 26, chip: 'A19' };

Object.assign(target_obj, source_obj);

console.log(target_obj);

// Output: { mobile: 'iPhone17', ios: 26, chip: 'A19' }

In this code, we defined two objects: source_obj and target_obj. We want to modify the target_obj by cloning the properties of the source_obj.

We merged the target_obj with the source_obj using the assign() method, and after merging, the target_obj now has three properties.

Syntax

Object.assign(target_obj, ...source_obj)

Parameters

Merging multiple sources

We can merge as many objects as we want using the .assign() method.

const target_obj = { mobile: 'iPhone17' };
const source_one = { ios: 26, chip: 'A19' };
const source_two = { camera: '48px', feature: 'AI' }

Object.assign(target_obj, source_one, source_two);

console.log(target_obj);

// Output:
// {
//   mobile: 'iPhone17',
//   ios: 26,
//   chip: 'A19',
//   camera: '48px',
//   feature: 'AI'
// }

In this code, we merged the target_obj with the source_one and source_two objects. Properties are copied sequentially. Ideal for combining multiple configurations into a single one.

Overwriting properties

When merging multiple objects, if multiple source objects contain the same property key, the value from the last source object will overwrite earlier ones in the target object.

const target_obj = { mobile: 'iPhone17' };
const source_one = { ios: 26, chip: 'A19' };
const source_two = { camera: '48px', ios: 27 } // Overwrites 'ios' from source_one

Object.assign(target_obj, source_one, source_two);

console.log(target_obj);

// Output:
// {
//   mobile: 'iPhone17',
//   ios: 27,
//   chip: 'A19',
//   camera: '48px',
// }

In this code, source_one has a property called ios: 26. 

Similarly, source_two also has the same property, ios: 27, with a value of 27.

That means when you merge objects, property ios: 27 will win because it will overwrite the ios: 26. And hence, the output object contains ios: 27.

Shallow cloning (Nested objects are not cloned)

The Object.assign() method creates a shallow copy of the specified object.

Nested objects are not deeply cloned; instead, their references are shared between the original and the clone, so mutations in the nested structure affect both.

In other words, if you change the nested object of the cloned object, the nested object of the original object will be changed too due to the shared reference.

const original = { a: 1, nested: { b: 2 } };

console.log(original.nested.b)

// Output: 2

const clone = Object.assign({}, original);

clone.nested.b = 3;

console.log(clone.nested.b)

// Output: 3

console.log(original.nested.b);

// Output: 3 (Original object's "b" property is also changed to 3)

In this code, we first cloned the original object, and now we have a clone object.

Then, we modified the clone object’s nested “b” property. Ideally, it should not affect the original object’s “b” property, but in this case, even the original object’s “b” property is changed too! This is called shallow copying.

To deep clone an object, use JSON.parse(JSON.stringify()) (with limitations) or the structuredClone() method.

Deep Clone with structuredClone() (Modern approach)

JavaScript structuredClone() method of the Window interface creates a deep clone of a given value using the structured clone algorithm.

const original = { a: 1, nested: { b: 2 } };

console.log(original.nested.b);

// Output: 2

const deepClone = structuredClone(original);

deepClone.nested.b = 3;

console.log(deepClone.nested.b)

// Output: 3 (Cloned object's nested value)

console.log(original.nested.b);

// Output: 2 (Original object's nested b's value is unchanged)

As you can see, it maintains the object structure more accurately.

This is the most preferred method for cloning an object in JavaScript.

That’s all!

Krunal Lathiya

With a career spanning over eight years in the field of Computer Science, Krunal’s expertise is rooted in a solid foundation of hands-on experience, complemented by a continuous pursuit of knowledge.