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?
Add a comment
|
5 Answers
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 }
1 Comment
almazmusic
So, can we say that "create" is sort of for creating an instance of parent class, while "assign" is just for coping properties?
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
Comments
you can also combine them Object.assign(Object.create(object)) for both shallow and deep copy, they are perfectly valid pattern in ES6.
3 Comments
Paulito.Bandito
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
const Cat = Object.assign(Object.create(Animal.prototype), { takeANap: ()=>{ /*Napping code*/ } }
Paulito.Bandito
The resulting
Cat variable will show up as Cat type in the debugger and you can also use instanceof with it.As @emekaokoli mentioned, you can combine
Like this:
const el = Object.assign(document.createElement("div"), {
className: "hello",
innerHTML:`
<i>hello world</i>
`,
myProp:1
});
document.body.append(el);
console.log(el.myProp);
1 Comment
Pouria Rezaei
I loved the idea 💡
we can also create deep copy of object like this
var obj = {id:1, fname:'sajid', lname: 'imtiaz'};
var deepObj = Object.assign({},obj)
`
