Javascript || operator behavior

Question

How can this be explained

These two are as expected

"x" || "y"
=> "x"

"x" || "y" == "y"
=> "x"

But this?

"x" || "y" == "y" ? "a" : "b"
=> "a"

Edit: I was expecting "x" for the last expression. Now got the answer. I was not clear with the operator precedence of ? and ||

Answer 1

Take a look in operator precedence: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

"x" || "y" == "y"

is "x" and it is truthy (Understanding JavaScript Truthy and Falsy), so ... ? ... : ... returns first expression

Answer 2

Let's break it down.

//Your original question
"x" || "y" == "y" ? "a" : "b"

//Changing ternary to standard "if"
if ("x" || "y" == "y") then "a" else "b"

//Grouping the conditionals
if ( ("x") || ("y" == "y") ) then "a" else "b"

//Evaluating the conditionals
if ( true || true ) then "a" else "b"

//End result
if (true) then "a" else "b"

• "x" evaluates to true because non-empty strings are truthy.

• The expression is grouped as such because the Logical OR operator (||) has an operator precedence of 5, whereas the Conditional operator (... ? ... : ...) has an operator precedence of 4. (More on operator precedence)

It's hard to know exactly what you were expecting, however I'd imagine it might be this:

var result = "x" || ("y" == "y" ? "a" : "b");
console.log(result);

Answer 3

"x" || "y" == "y" ? "a" : "b"

According to the operator precedence rules, in this expression the evaluation happens in the following order:

1. == - equality check: "y" == "y" this evaluates to true so you have the following expression left to solve "x" || true ? "a" : "b"

console.log("y" == "y")

2. || - boolean OR: "x" || true this evaluates to "x" - the first expression is truthy, so the OR is short circuited and it returns the value of the expression.

console.log("x" || true)

3. ? - ternary conditional: "x" ? "a" : "b" - since "x" is truthy, as we already saw, then this passes the ternary test and returns the left value "a".

console.log("x" ? "a" : "b")

So, for clarity the original statement can be re-written as

("x" || ("y" == "y")) ? "a" : "b"

Answer 4

|| operator is evaluated left-to-right, and is short-circuited. Therefore first time it encounters a true condition, it returns without evaluating others. Since "x" is not an empty string, it returns true, and all behind is never evaluated. The latter syntax is the conditionnal ternary operaor

condition ? exprT : exprF 

which returns exprT if condition is true and exprF if condition is false

Answer 5

OR Condition (||) : Whenever the first condition is True. It will execute that block of code. It will not check the other condition After || Operator .

AND Condition (&&) : Whenever the first condition is False. It will execute that block of code. It will not check the other condition After && Operator.