Object.create(null)

By  on  

One of the funnest parts of JavaScript, or any programming language really, is that there are loads of tiny tricks and quirks that make the language that much more interesting.  I recently learned a nice fact about Object.create:  using null as the only argument to create an ultra-vanilla dictionary!

Object.create has been an awesome utility for prototype creation.  While that's nice, objects created with Object.create have __proto__ and inherited Object properties which can be manipulated.  What if you simply want a dictionary not prone to manipulation from the outside?  You can have that with Object.create(null):

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

Since there's no prototype your Object can't be manipulated from the outside -- it remains as vanilla of a dictionary as possible!  Compare that to Object.create({}):

let obj = Object.create({});

// obj.__proto__ === {}
// obj.hasOwnProperty === function

Object.prototype.someFunction = () => {};

// obj.someFunction === () => {};
// dict.someFunction === undefined

Passing Object.create an empty object allows for properties to be added via Object.prototype.customPropName, something you may not always want.

I hadn't known of this trick until recently but will be using it quite a bit going forward!

Recent Features

Incredible Demos

  • By
    Fancy Navigation with MooTools JavaScript

    Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect. The XHTML Just some simple...

  • By
    TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel...

Discussion

  1. Steve

    Great article David. Thanks for taking tge time to write it. You may already be aware, but you can also use Map for this. And it comes with some advantages over using a plain object. For example you have functions that allows you to check if an item exists with a specified key, remove all items, etc. Additionally keys themselves can be of any type, with a plain object you can’t use objects as keys.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

  2. That’s cool but what about the next guy who works on an object created by that? This would, more often than not, be a case where an object would have unexpected behavior.

  3. Alex

    Bear in mind that you might have to iterate over objects created this way differently as they don’t have the hasOwnProperty method.

    • Orebakada

      I ran into this very issue as I was unaware that a module I was using (query-string) returned Object.create(null). My opinion is that Object.create(Object.freeze({})) should have been used instead.

  4. shadow

    funny thing, bumped into this in a douglas crockford talk:
    https://youtu.be/dkZFtimgAcM?t=19m10s

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!