Is creating JS object with Object.create(null) the same as {}?

Javascript

Javascript Problem Overview


I know a lot of ways to create JS objects but I didn't know the Object.create(null)'s one.

Question:

is it exactly the same as:

var p = {}

vs

var p2 = Object.create(null);

?

Javascript Solutions


Solution 1 - Javascript

They are not equivalent. {}.constructor.prototype == Object.prototype while Object.create(null) doesn't inherit from anything and thus has no properties at all.

In other words: A javascript object inherits from Object by default, unless you explicitly create it with null as its prototype, like: Object.create(null).

{} would instead be equivalent to Object.create(Object.prototype).


In Chrome Devtool you can see that Object.create(null) has no __proto__ property, while {} does.

enter image description here

Solution 2 - Javascript

They are definitely not equivalent. I'm writing this answer to more fully explain why it makes a difference.

  1. var p = {};

    Creates an object that inherits the properties and methods from Object.

  2. var p2 = Object.create(null);

    Creates an object that doesn't inherit anything.

If you are using an object as a map, and you create an object using method 1 above, then you have to be extra careful when doing lookups in the map. Because the properties and methods from Object are inherited, your code may run into a case where there are keys in the map that you never inserted. For example, if you did a lookup on toString, you would find a function, even though you never put that value there. You can work around that like this:

if (Object.prototype.hasOwnProperty.call(p, 'toString')) {
    // we actually inserted a 'toString' key into p
}

Note that it is fine to assign something to p.toString, it will simply override the inherited toString function on p.

Note that you can't just do p.hasOwnProperty('toString') because you may have inserted a key "hasOwnProperty" into p, so we force it to use the implementation in Object.

On the other hand, if you use method 2 above, then you won't have to worry about things from Object appearing in the map.

You can't check for the existence of a property with a simple if like this:

// Unreliable:
if (p[someKey]) {
    // ...
}

The value might be an empty string, might be false, or null, or undefined, or 0, or NaN, etc. To check whether a property exists at all, you would still need to use Object.prototype.hasOwnProperty.call(p, someKey).

Solution 3 - Javascript

Creating objects by using {} will create an object whose prototype is Object.prototype which inherits the basic functions from Object prototype while creating objects by using Object.create(null) will create an empty object whose prototype is null.

Solution 4 - Javascript

If someone is looking for implementing Object.create(null), just to know how it works. It is written using __proto__ which is non-standard and hence, I do not recommend it.

function objectCreateMimic()
{
  /*optional parameters: prototype_object, own_properties*/
  var P = arguments.length>0?arguments[0]:-1;
  var Q = arguments.length>1?arguments[1]:null;
  var o = {};
  if(P!==null && typeof P === "object")
  {
    o.__proto__ = P;
  }
  else if(P===null)
  {
    o.__proto__ = null;
  }
  if(Q!==null && typeof Q === "object")
  {
   for(var key in Q)
   {
     o[key] = Q[key];
   }
  }
  return o;
}

Note: I wrote this, out of curiosity, and it is only written in simple terms, for instance, I am not transferring the property descriptors from the second object to the return object.

Solution 5 - Javascript

When you create an Object with Object.create(null) that means you are creating an Object with no prototype.null here means end of prototype chain. Nevertheless when you create an object like {} Object prototype will be added. Hence these are two different objects, one with prototype another without prototype.Hope this helps

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRoyi NamirView Question on Stackoverflow
Solution 1 - JavascriptPeter HerdenborgView Answer on Stackoverflow
Solution 2 - Javascriptdoug65536View Answer on Stackoverflow
Solution 3 - JavascriptPraveen KishorView Answer on Stackoverflow
Solution 4 - JavascriptAravindView Answer on Stackoverflow
Solution 5 - Javascriptuser13624607View Answer on Stackoverflow