Shaving Bytes with JavaScript Booleans
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!
![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...
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![Resize an Image Using Canvas, Drag and Drop and the File API]()
Recently I was asked to create a user interface that allows someone to upload an image
to a server (among other things) so that it could be used in the various web sites my
company provides to its clients. Normally this would be an easy task—create a...
![Duplicate the jQuery Homepage Tooltips Using Dojo]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using Dojo.
The XHTML
The above HTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...
Cool :-)
Glad you aren’t advocating coding like this directly. Can’t beat true/false for readability.
Coercions like
NumbertoBooleandoesn’t affect performance?Maybe too simple of a test: http://jsperf.com/bool-num-test
Looks like using
!0and!1may be faster (in Chrome 35) but only marginally.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*
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.
I expect the gain to be lost as soon as the file gets gzipped. I am wrong?
You should also remember the bitwise operations like
!~number, that returns true only for -1