How can jquery || "OR" be used outside of an if statement?

Question

I've never seen the OR paramater || used outside of an if statement.

What does this line of code do?

var doc = ($iframe[0].contentWindow || $iframe[0].contentDocument).document

Is it saying making it equal to either one of those???

Answer 1

A || B

evaluates A first. If it is true, A is returned, and B never needs to be looked at. If A is false, B is evaluated and returned.

For example, if you write

function (x)
{ x = x || 50
...

This would make x=50, if x is nil (or some kind of false value). Otherwise, x would not be changed.

It is like having a default value, or a failsafe protection. If you know that the answer should never be false, then if A is false, you provide a backup value of B.

Answer 2

A way to get a DOM reference to the iframe's window object is to use:

contentWindow.document

Now, cause IE<8 has problems with it, a small polyfill is to use

var doc = ($iframe[0].contentWindow || $iframe[0].contentDocument).document;
// Browser you get this one ^^^ ?  NO? Sh** you're IE7, go with^^

So earlyer versions of IE will skip the contentWindow cause not recognized, and thanks to the || (or) operator will follow up with the next contentDocument.

I don't have to repeat what's the OR operator cause other smart people already explained it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Answer 3

This is just a short form of the ternary operator, which always returns a value depending to a statement. So, e. g.:

var fruit = "apple";
var test = fruit === "apple" ? fruit : "banana";

This sets the variable test to the value of fruit, when fruit is set to "apple". Otherwise, test will be initialized with "banana".