What is difference between creating object using Object.create() and Object.assign()?

14,791

Solution 1

Let's compare obj1 and obj2 in this code:

var target1 = {}, target2 = {};
var obj1 = Object.create(target1, {myProp: {value: 1}});
var obj2 = Object.assign(target2, {myProp: 1});

Prototypical chain

Object.create creates a new object with the specified [[Prototype]], and Object.assign assigns the properties directly on the specified object:

obj1 !== target1;
obj2 === target2;

The prototypical chains of obj1 and obj2 look like

obj1 --> target1 -->  Object.prototype --> null
obj2 -------------->  Object.prototype --> null

Properties

Object.create defines properties and Object.assign only assigns them.

When creating a property, assignments will create it as configurable, writable and enumerable. When defining a property, you can specify those flags, but by default it's not configurable, nor writable and not enumerable.

Object.getOwnPropertyDescriptor(obj1, 'myProp');
  // { value: 1, writable: false, enumerable: false, configurable: false }
Object.getOwnPropertyDescriptor(obj2, 'myProp');
  // { value: 1, writable: true, enumerable: true, configurable: true }

Solution 2

Object.assign() provides shallow copying (Only properties and methods) and it will override the method and property declared.

while Object.create() provides Deep copying provides prototype chain.

I have created a whole medium page on exactly how each data type reacts on Shallow copy and Deep copy.

Here is the link: https://siddharthsunchu1.medium.com/copies-of-javascript-shallow-and-deep-copy-ac7f8dcd1dd0

Solution 3

you can also combine them Object.assign(Object.create(object)) for both shallow and deep copy, they are perfectly valid pattern in ES6.

Share:
14,791
madox2
Author by

madox2

Web developer focusing on Java and JavaScript technologies.

Updated on June 13, 2022

Comments

  • madox2
    madox2 about 2 years

    Considering following code:

    var obj1 = Object.create({}, {myProp: {value: 1}});
    var obj2 = Object.assign({}, {myProp: 1});
    

    Is there any difference between obj1 and obj2 since each object has been created in a different way?

  • almazmusic
    almazmusic over 5 years
    So, can we say that "create" is sort of for creating an instance of parent class, while "assign" is just for coping properties?
  • Paulito.Bandito
    Paulito.Bandito about 3 years
    Sounds weird but, as an alternative to the new operator, I like this technique because it will "type" the resulting JS object. Example:
  • Paulito.Bandito
    Paulito.Bandito about 3 years
    const Cat = Object.assign(Object.create(Animal.prototype), { takeANap: ()=>{ /*Napping code*/ } }
  • Paulito.Bandito
    Paulito.Bandito about 3 years
    The resulting Cat variable will show up as Cat type in the debugger and you can also use instanceof with it.