Understanding Object.assign() Method in JavaScript

The Object.assign() method was introduced in ES6 that copies all enumerable own properties from one or more source objects to a target object, and returns the target object.

The Object.assign() method invokes the getters on the source objects and setters on the target object. It assigns properties only, not copying or defining new properties.

The properties in the target object are overwritten by the properties in source objects if they have the same key. Similarly, the later source objects' properties are overwritten by the earlier ones.

The Object.assign() method handles null and undefined source values gracefully, and doesn't throw any exception.

Syntax

Here is how the syntax of Object.assign() looks like:

Object.assign(target, ...sources)
  • target — The target object that is modified and returned after applying the sources' properties.
  • sources — The source object(s) containing the properties you want to apply to the target object.

Cloning an object

The Object.assign() method is one of the four ways, I explained earlier, to clone an object in JavaScript.

The following example demonstrates how you can use Object.assign() to clone an object:

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    peach: '🍑',
    melon: '🍈',
    banana: '🍌'
};

const moreFruits = Object.assign({}, fruits);

console.log(moreFruits);

// {
//     mango: '🥭️',
//     apple: '🍎',
//     peach: '🍑',
//     melon: '🍈',
//     banana: '🍌'
// }

Remember that Object.assign() only creates a shallow clone of the object and not a deep clone.

To create a deep clone, you can either use JSON methods or a 3rd-party library like Lodash.

Merging objects

The Object.assign() method can also merge multiple source objects into a target object. If you do not want to modify the target object, just pass an empty ({}) object as target as shown below:

const div = {
    width: '45px',
    height: '45px'
};

const style = {
    color: 'blue',
    colorColor: 'black'
};

const divStyles = Object.assign({}, div, style);

console.log(divStyles);

// {
//     width: '45px',
//     height: '45px',
//     color: 'blue',
//     colorColor: 'black'
// }

If the source objects have same properties, they are overwritten by the properties of the objects later in the parameters order:

const div = {
    width: '45px',
    height: '45px',
    color: 'green'
};

const style = {
    color: 'blue',
    colorColor: 'black'
};

const divStyles = Object.assign({}, div, style);

console.log(divStyles);

// The `color` property is overwritten by later object
// {
//     width: '45px',
//     height: '45px',
//     color: 'blue',
//     colorColor: 'black'
// }

Converting an array to an object

Lastly, you could also use the Object.assign() method to convert an array to an object in JavaScript. The array indexes are converted to object keys, and array values are converted to object values:

const foods = ['🍪', '🎂', '🍰', '🍩', '🍨'];

// convert array to an object
const obj = Object.assign({}, foods);

console.log(obj);

// {
//     '0': '🍪',
//     '1': '🎂',
//     '2': '🍰',
//     '3': '🍩',
//     '4': '🍨'
// }

Browser compatibility

As Object.assign() is part of ES6, it only works in modern browsers. To support older browsers like IE, you can use a polyfill available on MDN.

To learn more about JavaScript objects, prototypes, and classes, take a look at this guide.

Read Next: Understanding Array.from() Method in JavaScript

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.