Using && or || in CDN fallback - is there a difference?

Question

This is a quick question, that will probably immediately mark me as a newbie, but here goes :-)

When looking at code samples, that include a fallback for using a jquery cdn, I see too very similar approaches using either && or ||:

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

and

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Now, my question is simply: Is there a difference (other than personal preference and sense of readability) between the two?

Answer 1

Essentially these two scripts perform the same function. They check if jQuery was loaded by the CDN and if not they fall back to a local copy. The only difference is the way the check is performed.

First Script

window.jQuery || 
  document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')

If jQuery fails to load then window.jQuery will be undefined or false causing the second portion of the boolean expression to be evaluated since an || (or operator) is used, making the local copy of the script load. This is basic or logic, since an || operator will evaluate each condition when the preceding condition is false.

Second Script

!window.jQuery && 
       document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')

This script is just negating the check for jQuery, !window.jQuery, so if jQuery is undefined, which is equivalent to false(and when negated == to true) it will evaluate the second portion of the boolean expression, causing the local copy to be loaded. If jQuery is loaded the first part of the boolean expression is equivalent to false when negated, causing the second portion of the expression not be evaluated.

Here is a small script example of how the boolean logic plays out:

!false && alert("First condition is true evaluate me");

false || alert("First condition is false evaluate me");

false && alert("I am never evaluated since first condition is false, entire condition is false.");

true || alert("I am never evaluated since first condition is true, entire condition is true");

Boolean Script Example: http://jsfiddle.net/kbLfB/

Answer 2

I hope you can understand the explanation below:

|| searches for true (it stops searching if it finds true, else false)

true  || false   --> true  (runs first  statement)
false || true    --> true  (runs second statement)
true  || true    --> true  (runs first  statement)
false || false   --> false (runs second statement)

---

&& goes to next statement if the current statement is true (in sequence)

true  && false   --> false (runs  second   statement)
false && true    --> false (stops at first statement)
true  && true    --> true  (runs  second   statement)
false && false   --> false (stops at first statement)

PS: null and undefined also comes in to account of false.