loading...

JavaScript: Object.assign()

anthonygedeon profile image Anthony Gedeon ・2 min read

Definition

Object.assign() allows you to combine or merge multiple objects into an object that you specified

Object.assign(target, ...sources);

Syntax

Say that you wanted to clone an object, it's as simple as the following code

const dog = {
    sound: 'Woof',
    hungry: true,
};

const copyDog = Object.assign({}, dog);

copyDog // -> { sound: 'Woof', hungry: true, }

Taking multiple objects

const circle = {
    radius: 4,
    diameter: this.radius * 2,
};

const rectangle = {
    height: 5,
    width: 4 ,
};

const triangle = {
    equilateral: false,
};

const shapes = Object.assign({}, circle, rectangle, triangle);

shapes // -> { radius: 4, diameter: this.radius * 2, height: 5, width: 4, equilateral: false } 

Precedence

If two objects that are specified after the target have the same property, the last object will overwrite it. It's like CSS, whatever comes last will get the styles.

// Defaults
function settingDefaults(obj) {

    const defaultName = Object.assign({
        first: 'John',
        last: 'Doe'
    }, obj);

    return `${defaultName.first} ${defaultName.last}`;
}

settingDefaults({
    first: 'Steve',
    last: 'Woah'
}); // Steve Woah -> it overwrites John Doe


settingDefaults({
    first: 'Steve',
}); // Steve Doe -> It overwrites John

settingDefaults({
    // empty object literal
}); // Doesn't overwrite anything so the default is John Doe

I've only shown you examples of the target parameter having just an empty object of some specified properties, but what if we have two objects that have properties.

It's similar to what happened in the settingDefaults function.

const player = {
    jump: false,
    move: true,
    backpack: [],
    health: 100,
};

const enemy = {
    jump: true,
    move: true,
    weapon: 'knife'
};

const vigilante = Object.assign(player, enemy);
vigilante /* -> { 
    jump: true,
  move: true,
  backpack: [],
  health: 100,
  weapon: 'knife' 
}
*/

It modified the player object! It literally modified the jump value to true, gave the player a weapon of a knife, and so forth.

Analogy

A great analogy would be someone that has the power to clone himself. This person could create multiple clones of himself, and he could even specify what he wanted the clone to do. He was able to give the clone certain characteristics or even give it nothing. However, there was a problem with his superhuman ability; each time he made a clone, he would lose some of the characteristics that defined him. It was like being "modified" in place.

Unexpectedly, the superhuman could never find his true self because he changed so much by giving the same characteristics to his clones with a different value.

Analogy explanation

hopefully, you do not need an explanation for the analogy that was provided but to make sure you actually get what's going on here's an explanation:

The superhuman was an Object.assign(), he alway had some properties of his own

superhuman = {
    happy: true,
    boxing: true,
    name: 'Kyle',
    likesRunning: true,
    fit: true,
    canClone: true
};

clone1 = {
    happy: false,
    fit: false,
    canClone: true
};

Object.assign(superHuman, clone1);

Now, he won't be happy, and he's not eager to workout anymore.

The outcome of the superhuman is that his personality or the properties that made him was changed because of clone creation.

Conclusion

Object.assign can be useful for cloning an object and merging multiple objects together. The target argument for Object.assign() is where you specify what you want this object to have; it can even be an empty object literal, or it can have some defined properties.

Try using Object.create and Object.assign together!

✌️

Discussion

pic
Editor guide