# Understanding Object.assign() Method in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jul 10, 2020, updated Jul 11, 2020. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-object-assign

> A complete guide to JavaScript Object.assign() method. Learn how to use to create new objects from existing objects as well as merge multiple objects.

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](https://attacomsian.com/blog/objects-prototypes-classes-javascript#objects). 

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:

```javascript
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](https://attacomsian.com/blog/javascript-clone-objects) in JavaScript.

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

```javascript
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](https://attacomsian.com/blog/javascript-deep-clone-array#json-methods) or a 3rd-party library like [Lodash](https://attacomsian.com/blog/javascript-deep-clone-array#lodash-clone-deep).

## Merging objects

The `Object.assign()` method can also [merge multiple source objects](https://attacomsian.com/blog/javascript-merge-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:

```javascript
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:

```javascript
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](https://attacomsian.com/blog/javascript-convert-array-to-object#objectassign-method) in JavaScript. The [array](https://attacomsian.com/blog/javascript-arrays) indexes are converted to object keys, and array values are converted to object values:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill) available on MDN.

To learn more about JavaScript objects, prototypes, and classes, take a look at [this guide](https://attacomsian.com/blog/objects-prototypes-classes-javascript).

**Read Next:** [Understanding Array.from() Method in JavaScript](https://attacomsian.com/blog/javascript-array-from)