What is difference between creating object using Object.create() and Object.assign()?
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.
madox2
Web developer focusing on Java and JavaScript technologies.
Updated on June 13, 2022Comments
-
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
andobj2
since each object has been created in a different way? -
almazmusic over 5 yearsSo, can we say that "create" is sort of for creating an instance of parent class, while "assign" is just for coping properties?
-
Paulito.Bandito about 3 yearsSounds weird but, as an alternative to the
new
operator, I like this technique because it will "type" the resulting JS object. Example: -
Paulito.Bandito about 3 yearsconst Cat = Object.assign(Object.create(Animal.prototype), { takeANap: ()=>{ /*Napping code*/ } }
-
Paulito.Bandito about 3 yearsThe resulting
Cat
variable will show up asCat
type in the debugger and you can also useinstanceof
with it.