Shaving Bytes with JavaScript Booleans

By  on  

Developers are always search for ultimate way to create something with the least amount of code.  This, of course, is one of the reasons we use minifiers: to serve code as small as possible.  Of course this practice has numerous benefits, like faster download time, less storage consumption, etc.  One way that minifiers are able to shave bytes off of JavaScript code is changing the way booleans are used.

true === !0 // Save 2 chars

false === !1 // Save 3 chars

A few bytes of every true and false go away with the ! evaluation.  If you set one-letter variables names to those values, you may end up saving more.  Keep in mind I'm not telling you to do this in your source code -- minifiers like Uglify JS will do this for you.  Just something neat to know about though!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    WebKit-Specific Style:  -webkit-appearance

    I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I'm Feeling Lucky" buttons had a style definition I hadn't seen before:  -webkit-appearance.  The value assigned to the style was "push-button."  They are buttons so that...

  • 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. Glad you aren’t advocating coding like this directly. Can’t beat true/false for readability.

  2. Roman

    Coercions like Number to Boolean doesn’t affect performance?

  3. Maybe too simple of a test: http://jsperf.com/bool-num-test

    Looks like using !0 and !1 may be faster (in Chrome 35) but only marginally.

    • MaxArt

      Even if that’s true, and it’s not due to some statistical error, the gain is so small it’s not really worth it.

    • Those are noops anyway. I would be surprised if the JS engine just optimise them away at compile time.

    • didn’t just*

  4. Still prefer true/false for readability. As you said, it is better to let the Minifier to do this for us. It is better to keep the true/false in our code.

  5. I expect the gain to be lost as soon as the file gets gzipped. I am wrong?

  6. oresh

    You should also remember the bitwise operations like
    !~number, that returns true only for -1

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