7

On HTML5 Boilerplate they use this code for jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-...

What's more readable:

if (!window.jQuery) document.write(...);

or

window.jQuery || document.write(...);
5
  • 3
    Another thing we sometimes do in H5BP is introduce clever tricks like this that lead to a better understanding of code. I think this is a good example. The if statement is almost TOO obvious; it can afford to teach you something at the same time. Commented Apr 10, 2012 at 4:40
  • 3
    Any javascript programmer worth their salt will be able to read both forms equally well. When it comes to inline code, I typically prefer the shortest reasonable form, so I would use window.jQuery||document.write... for sake of brevity. Commented Apr 10, 2012 at 14:41
  • 3
    @PaulIrish I can't tell whether it's sarcasm or not. Commented Apr 10, 2012 at 19:41
  • So the idea is to teach a trick. -legitimate- but H5BP puts a stamp on everything saying essentially this ok, often probably being interpreted as the recommended way. (For H5BP) it's a matter of what's most valued - I say K.I.S.S. I vouch for stupid simple code that is really obvious. Either way developers are learning how to do a local fallback, eliminating clutter around how to do that I think would be best. Local fallback is a good trick. Short circuit statements, bad trick. Teach only good tricks? Commented Apr 10, 2012 at 19:43
  • Doesn't directly address this, but see javascript.crockford.com/style2.html Commented Jan 16, 2013 at 22:30

4 Answers 4

18

I prefer

if (!window.jQuery) 
    document.write( -local jQuery- );

because it makes it obvious that the document.write() depends on some condition. With the second option, you are abusing short-circuit evaluation, so most developers will have to think harder to understand what you are doing.

I generally don't expect to see code that creates output to be used with a boolean operator like that.

4
  • 3
    This code will throw an error without the presence of window. in the if condition. See my comment on the question as for why I think it's okay our logic is backwards. Commented Apr 10, 2012 at 17:04
  • 6
    Use brackets you whitespace devil Commented Apr 10, 2012 at 19:41
  • Also noticed we can flip the boolean statement logic to be !window.jQuery && document.write( -local jQuery- ); Commented Apr 10, 2012 at 19:57
  • 1
    @DevinGRhode The final two characters in that code line seem surprisingly appropriate... Commented Apr 10, 2012 at 20:15
3

The if-statement is a statement and as such does not have a result. The or-expression has a result which is immediately thrown away. Therefore, the if-statement is less complex and should be preferred.

2
  • 2
    Not so. In this idiom, the short-circuiting term (e.g., window.jQuery) is used, negated, as the if condition. There is no reason to choose one over the other except style preferences. Commented Apr 10, 2012 at 18:23
  • Semantically, there is no difference. However, the expression '!a || b' has a type (boolean), whereas 'if (a) b' has no type (or void). Therefore, the expression '!a || b' could be seen as having more grammatical complexity. Then again, I've made and seen languages where 'if' constructs are expressions themselves. Commented Apr 11, 2012 at 6:33
1

It is a shell idiom imported in JavaScript (perhaps through perl where it is also idiomatic). If you have a team used to it, it doesn't hinter the readability (some may even find it is an improvement), but I'm far from sure that it is known by people without a perl or shell background.

2
  • 3
    I've never been at all keen on associating “readability” with either Perl or Shell. (“Gesundheit” OTOH…) Commented Apr 10, 2012 at 14:01
  • @DonalFellows, in general yes. For that use of || and &&, I don't mind. Perhaps it is the contrast with the rest of the features of those languages which make it so :-) Commented Apr 10, 2012 at 14:02
1

As with others I think the if version is more readable, I certainly wouldn't want to see logic like that strewn about a program. Having said that I think there is one idiomatic usage which is common in Perl that I personally rather like: when checking for a fatal return value, e.g. open(filename) || die. It seems to me this is a clear, compact way of expressing it that keeps the unlikely check out of the main logic of the code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.