Logical OR condition interpretation

Using JavaScript code below it should print the same result, but it doesn't. Using logical OR for both of the statements, the interpreter -according to my experience- it should return immediately after checking the 1st condition as soon as it finds it true. This is not the case in the example below.

Can someone explain this? Y works as expected but X does not. So, how JavaScript interpreter "decode" the X statement?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function test() {
  var x = 5 || true ? 100 : 1000;
  var y = 5 || (true ? 100 : 1000);

  console.log(x); //returns 100
  console.log(y); //returns 5
};

test();

<!-- end snippet -->

The logical or operator has higher precedence than the conditional operator. So the expression for x is equivalent to

var x = (5 || true) ? 100 : 1000;

Since (5 || true) is truthy, the conditional operator returns 100.

In the first one, it's checking "is 5 || true? If so, the ternary evaluates to true, producing 100. You can learn more about this by researching "operator precedence".

The first line is also bad practice, you should include the parenthesis, to make it more clear what your intent is.

Said another way, the first one is doing var x = (5 || true) ? 100 : 1000;, and 5 || true evaluates to 5 which is truthy.

it will run as (5 || true) ? 100 : 1000;

you can find here that operator || has precedence greater than conditional ?.