Question

I saw this construction in order to get the browser viewport width:

function () { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; }

I understand the browser quirks involved. What I don’t understand is why || returns the value. So I tried this alert(undefined || 0 || 3); and sure enough, it alerts 3. I find this bizarre, because I expect true or false. Could anyone explain what’s going on?

Answer 1

Take a look at the ECMAScript standards section 11.11 Binary Logical Operators

The production LogicalORExpression :
LogicalORExpression ||
LogicalANDExpression is evaluated as
follows:

1.Evaluate LogicalORExpression.

2.Call GetValue(Result(1)).

3.Call ToBoolean(Result(2)).

4.If Result(3) is true, return Result(2).

5.Evaluate LogicalANDExpression.

6.Call GetValue(Result(5)).

7.Return Result(6).

So it evaluates the boolean conversion of each operand, but returns the actual value of the operand.

If you want to know how Javascript converts values to a boolean, see section 9.2 ToBoolean