Precedence: Logical or vs. Ternary operator

Question

Consider the following:
(EDIT: I've amended the function slightly to remove the use or braces with the ternary operator)

function someFunction(start,end,step){
  var start = start || 1,
      end = end || 100,
      boolEndBigger = (start < end);   // define Boolean here
      step = step || boolEndBigger ? 1:-1;
  console.log(step); 
}

someFunction()
// step isn't defined so expect (1<10) ? 1:-1  to evaluate to 1

someFunction(1,10)  
// again step isn't defined so expect to log 1 as before

The problem:

someFunction(1,10,2) 
//step IS defined, shortcut logical OR || should kick in, 
//step should return 2 BUT it returns 1

---

I'm aware that this is easily fixed by using braces:

function range(start,end,step){
  var start = start || 1,
      end = end || 100,
      step = step || ((start < end) ? 1:-1);
  console.log(step); 
}

---

The question: Why doesn't the || operator get short-cut in this case?

I'm aware that the Logical OR has the lowest precedence among binary logical conditional operators but thought that it has higher precedence than the conditional Ternary operator?

Am I misreading the MDN docs for Operator precedence?

Answer 1

Yes, the || operator has higher precedence than the conditional ?: operator. This means that it is executed first. From the page you link:

Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first. (MDN)enter link description here

Let's have a look at all the operations here:

step = step || (start < end) ? 1:-1;

The operator with the highest precedence is the () grouping operation. Here it results in false:

step = step || false ? 1 : -1;

The next highest precedence is the logical OR operator. step is truthy, so it results in step.

step = step ? 1 : -1;

Now we do the ternary operation, which is the only one left. Again, step is truthy, so the first of the options is executed.

step = 1;

Answer 2

JavaScript is loosely typed which means that whenever an operator or statement is expecting a particular data-type, JavaScript will automatically convert the data to that type.

Let's see some scenarios how it converts to other type

example 1.

if() statement expects a boolean value, therefore whatever you define in the brackets will be converted to a boolean.

JavaScript values are often referred to as being "truthy" or "falsey", according to what the result of such a conversion would be (i.e. true or false).

Remember if a value is truthy unless it’s known to be falsey.

Fortunately there are only six falsey -

1. false (of course!)
2. undefined
3. null
4. 0 (numeric zero)
5. "" (empty string)
6. NaN (Not A Number)

example 2.

var x = zoo || star ;

If zoo evaluates to true then the value of zoo is returned, otherwise the value of star is returned

example 3.

var str = '1' || '2';

'1' is not falsey so '1' will be returned result : str = '1';

example 4.

var str = '1' || (true) ? '2' : '3';

first of all precedence of ||(Logical OR) operator is greater than ?(Conditional) operator

so first ( '1' || (true) ) will be evaluated first

'1' is not falsey so '1' will be returned

Intermediate result : str = '1' ?' 2' : '3'

'1' is not truthy so '2' will be returned

Final result : str = '2'

example 5.

var str = '1' || (false) ? '2' : '3';

first of all precedence of ||(Logical OR) operator is greater than ?(Conditional) operator

so first ( '1' || (false) ) will be evaluated first

'1' is not falsey so '1' will be returned

Intermediate result : str = '1' ?' 2' : '3'

'1' is not truthy so '2' will be returned

Final result : str = '2'

Now it will be very easy to figure out in your scenario :)