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!
![Designing for Simplicity]()
Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![NSFW Blocker Using MooTools and CSS]()
One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away.
Since...
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