Why `("" || "word") == true` returns false?

Question

I'm currently learning JavaScript and I am really confused about this.

Can anyone explain how this is possible :

"" || "word" // -> "word"

("word") && true // -> true

("" || "word") == true // -> false

I have tried to search online but can't find the proper words to describe my problem.

Answer 1

1. Question 1

"" || "word"  // -> "word"

As described in the documentation on ||:

Logical OR (||)
expr1 || expr2
Returns expr1 if it can be converted to true; otherwise, returns expr2.

In this case, the first expression "" is falsy, so the second term is the outcome of the expression. If the first expression would have been truthy, the second term would not have been evaluated, and the first one would be returned.

2. Question 2

("word") && true // -> true

As described in the documentation on &&:

Logical AND (&&)
expr1 && expr2
Returns expr1 if it can be converted to false; otherwise, returns expr2.

Here the first expression is truthy and so JavaScript returns the last one. If the first one would have been falsy, the return value would have been the first term.

3. Question 3

("" || "word") == true // -> false

As per the first expression outcome, this is equivalent to:

"word" == true // -> false

With the == operator the coercion happens differently. true is coerced into a string value, i.e. "1", which evidently is not the same as "word". If the first term would have been "1" or just 1, it would have yielded true:

"1" == true // -> true
1 == true // -> true

Practical use

If you have a condition like the last one, just write it without the comparison:

if ("" || "word") {
    console.log('it is truthy!');
}

Or if you really need true as the result, convert it explicitly to boolean with !!:

result = !!("" || "word");

Answer 2

There's more to truth in JavaScript than true or false.

There are also truthy values and falsey values, and everything is either truthy or falsey.

false, 0, "", null, undefined, and NaN are falsey.
Everything else is truthy.

The logical operators operate on truthy and falsey things;

a && b

is

• a, if a is falsey
• otherwise, it is b

and

a || b

is

• a, if a is truthy
• otherwise, it is b

(If you're familiar with Lisp or Python, this is perfectly natural. If you're not, you're probably thinking "WAT?!".)

Hence,

"" || "word"  -> "word"

because "" is falsey,

"word" && true  -> true

because "word" is truthy, and

("" || "word") == true  -> false

because "" || "word" is "word", and "word" is not the same object as true.

Answer 3

I assume you understand the first two boolean, and have some confusion in the last one.

Your question is, if first 2 are true, why the last one is not true.

There is a concept of thruthy and falsey values in Javascript. A thruthy value may or may not be a Boolean, but still satisfies the if conditions.

For example, in case of string, an empty string is a falsey value, and a string with even a single character is thruthy.

A truthy value is equivalent to true, but not equals to true. Same for falsey.

In the last case, ("" || "word") == true, the left part equals word, and the operator used, == checks if the left value equals right value. So word is not equal to true, hence returns false.

("" || "word") == true // lets simplify
"word" == true // false, "word" is not equal to true

But if you use word in an if condition, it will satisfy the condition since it's a thruthy value.

if ("word") { /* condition will be satisfied */ }
if ("") { /* condition will NOT be satisfied */ }

To check whether a value is truthy or not, use !! before the value.

// String
!!"word" // true
!!""     // false
// Number
!!5      // true
!!0      // false
// Boolean
!!true   // true
!!false  // false