not boolean value but use ||

Question

the below code get the window size in different browsers.

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    var x = document.getElementById("demo");
    x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
    </script>

</body>
</html>

I want to ask window.innerWidth OR document.documentElement.clientWidth etc.. they are not Boolean values, how can I use || to declare a variable? w/h are numbers, it's like if I do the following:

var k = aaa || bbb || 45;

k is supposed to be a number, this is illegal, right? How can the first piece of code work then? Thanks~

score 2 · Answer 1 · answered Oct 23 '17 at 11:46

It's because of the concept of falsy and truthy values in Javascript.

0, null and undefined all evaluate to false if you use them in a boolean context. So that allows you to make assignments like the above- the value of var k will be the first variable that is truthy.

var k = aaa || bbb || 45;

If aaa is truthy(so, a number, or some defined value), then k becomes that, OR it becomes b if that is truthy, otherwise it becomes the number 45.

Point of note: empty strings are also falsy. – Mitya Oct 23 '17 at 11:49 — Mitya, Oct 23 '17 at 11:49

doubleOrt · Answer 2 · 2017-12-06T03:54:18.840

I realize that you most probably have your answer now, but I am posting an answer anyways because: a. the question is important and will surely have a sufficient amount of future viewers. b. the other answer does not explain the relationship between ToBoolean and || very well c. I would have to change and add too much if i were to edit the other answer instead, so...

In JavaScript, both the || and && logical operators will coerce their operands to boolean if they aren't booleans already, using the abstract ToBoolean operation.

You can see the effects of this ToBoolean operation using the Boolean constructor or an implicit !! conversion:

Boolean(foo);
!!foo;

Either of the 2 lines above will convert foo to a boolean.

But how do they do it ?

It's much simple: If the variable foo is either null, undefined, NaN, 0, or "" (you could also say false, but that's a tad obvious), it will become false; in all other cases, it will become true.

Values that become false after a ToBoolean coercion (which can be performed by either of the above lines) are called "falsy values". Can you guess what values which become true after a ToBoolean operation are called ?

Here is an example of some ToBoolean operations:

const foo = "abc";

console.log(!!foo); // Prints out "true"
console.log(Boolean(foo)); // Same thing as above

const bar = "";
const baz = undefined;

console.log(Boolean(bar)); // Prints out "false"
console.log(Boolean(baz)); // Prints out "false"

/* Prints out "abc", because both "bar" and "baz" will become "false" after "||" coerces them to "boolean"*/
console.log(bar || baz || foo);

So, in your example, if aaa is either of the "falsy" values I listed above, JavaScript will skip it and go to the next operand of ||, if that operand is not a falsy value, it will be selected by ||.

As a sidenote, || will always stop at the first "truthy" value, if there are no truthy values, it will select the last operand.

Here is a link to ToBoolean in the specs.

not boolean value but use ||

2 Answers2

Linked