Understanding Object.assign() Method in JavaScript

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

Object.assign(target, ...sources)

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

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

console.log(moreFruits);

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

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'
// }

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'
// }

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

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

console.log(obj);

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

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript