Shaving Bytes on JavaScript Conditionals
Whenever you work with JavaScript code, it's as though there's always a shorter way to code something. You thought that a code set was basic until you found out that something was basic...er. One of those code shortcuts can be found with conditions, specifically short if clauses.
A typical short if clause would look something like this:
if(callback) {
callback();
}
Oddly enough this conditional can be made shorter:
callback && callback();
The && is less code than the if(){}; of course only by a few characters but does the same job. You could argue that readability suffers but that's up to individual developers.
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Create a Context Menu with Dojo and Dijit]()
Context menus, used in the right type of web application, can be invaluable. They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available. Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...
![Duplicate the jQuery Homepage Tooltips Using MooTools]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using MooTools.
The XHTML
The above XHTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...
It’s worth noting that JS minifiers like Google’s Closure Compiler will do this for you, so the first option is probably better so you get the readability without sacrificing performance. The Closure Compiler outputs it as this:
callback&&callback();
http://closure-compiler.appspot.com/home
and also jshint might shout about the shorter version (depending on the settings of course).
No one writes code for JSHint :)
It’s bad practice though because the code is hard to maintain, debug and extend. I could write a whole blog on why doing this is bad. I see zero benefits.
Agree with comments above. I recently realized that there is no benefits of having expressions in my code so changed jshint settings and now it disallows to use them.
IMO the expression below is pretty readable and it also takes one line:
if (callback) callback();
Agree with the “bad practice” comments.
Sometimes you seem to post stuff just for the sake of it, or to impress beginners.
I appreciate your honesty but impressing people isn’t something that entertains me.
What if I also need to have an else branch?
There’s only “if”, I suppose. Otherwise it’s something like:
While I agree with people’s comments on code readability, I still appreciate posts like this.
I’ve come across the ‘callback && callback();’ syntax before and had to look up wtf was going on. Had I read this post earlier, I would’ve known :)
@Dan i agree with you, posts like this are handy so you understand when you come across it in a project. Sadly, this is clearly lost on a couple of the previous commenters who already know everything there is to know.
I’m not worried about them.
What setting will make jsHint happy?
Code is better than anything, 2 JsPerf :
– http://jsperf.com/if-statement-verses-and-operator
– http://jsperf.com/ternary-vs-and-or-vs-if-else
Readability is important, but for those who like to hyper-optimize their code, this is a great tip.