29

I saw this line in the jQuery.form.js source code:

g && $.event.trigger("ajaxComplete", [xhr, s]);

My first thought was wtf??

My next thought was, I can't decide if that's ugly or elegant.

I'm not a Javascript guru by any means so my question is 2-fold. First I want to confirm I understand it properly. Is the above line equivalent to:

if (g) {
    $.event.trigger("ajaxComplete", [xhr, s]);
}

And secondly is this common / accepted practice in Javascript? On the one hand it's succinct, but on the other it can be a bit cryptic if you haven't seen it before.

3
  • Considering that those braces aren't even required in the second case, I'd vote unclear and ugly, although I am not a JavaScript guru either.
    – cst1992
    Commented Mar 22, 2016 at 11:49
  • 1
    Related Does JavaScript have short-circuit evaluation? Commented May 9, 2019 at 9:28
  • For details (especially how it works with truthy/falsy objects), consider these examples!
    – Cadoiz
    Commented Mar 29, 2023 at 7:18

6 Answers 6

19

Yes, your two examples are equivalent. It works like this in pretty much all languages, but it's become rather idiomatic in Javascript. Personally I think it's good in some situations but can be abused in others. It's definitely shorter though, which can be important to minimize Javascript load times.

Also see Can somebody explain how John Resig's pretty.js JavaScript works?

4
  • There's no short circuiting in VBA, which I learned the hard way after 4 hours of debugging. Commented Apr 24, 2015 at 22:02
  • I've tried to shortcircuit like this with java and it seems the language doesn't allow it. Am I correct?
    – MaxG
    Commented May 9, 2016 at 22:38
  • 3
    @DarylBennett there is---"AndAlso" and "OrElse". I'd say kill me now, but having no pulse is already a prerequisite for programming VB.
    – hraban
    Commented Nov 19, 2016 at 19:31
  • @MaxG Java definitely has short-circuiting of boolean operators, it just doesn't let you use them as a statement.
    – user229044
    Commented Apr 12, 2019 at 15:09
10

It's standard, but neither JSLint nor JSHint like it:

Expected an assignment or function call and instead saw an expression.

0
6

You must be careful because this short-circuiting can be bypassed if there is an || in the conditional:

false && true || true
> true

To avoid this, be sure to group the conditionals:

false && (true || true)
> false
2
  • 3
    That's because ANDs take precedence on ORs when they're side-by-side. Equivalent maths situation would be 2*3+2 = 8 when 2*(3+2) = 10. This is way too easy to miss...
    – Alex
    Commented May 26, 2014 at 15:03
  • Be explicit rather than claver and use an if statement...your brain will thank you. Commented Apr 12, 2019 at 15:05
4

Yes, it's equivalent to an if as you wrote. It's certainly not an uncommon practice. Whether it's accepted depends on who is (or isn't) doing the accepting...

0
2

Yes, you understand it (in that context); yes, it is standard practice in JavaScript.

14
  • It most certainly is not standard practice in C#. In fact it won't even compile "Only assignment, call, increment, decrement, and new object expressions can be used as a statement"
    – Davy8
    Commented Feb 19, 2011 at 5:22
  • And that's only if the 2nd half returns bool otherwise you get "&& operator cannot be applied to arguments of type 'bool' and '[whatever type the 2nd half returns]`"
    – Davy8
    Commented Feb 19, 2011 at 5:25
  • you need to put it in brackets and assign. Just for you, I'll remove the bit about C# because the question is specifically about JavaScript.
    – Phil Helix
    Commented Feb 19, 2011 at 5:26
  • Chap the whole point is that shortcircuiting is to replace if statements - What exactly can an if return other than bool?
    – Phil Helix
    Commented Feb 19, 2011 at 5:28
  • The question wasn't about how short-circuiting works though. It's specifically about using a short-circuited boolean operator for the side-effects and not for boolean logic. There is no assignment happening in the sample I gave above.
    – Davy8
    Commented Feb 19, 2011 at 5:29
-1

By default, it will trigger a jshint warning:

[jshint] Expected an assignment or function call and instead saw an expression. (W030) [W030]

However personally, I prefer the short-circuit version, it looks more declarative and has "less control logic", might be a misconception though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.