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?

Ionia

"higher precedence" means that your code is being evaluated as (step || (start < end)) ? 1 : -1 – Furie

“Higher precedence” means || is evaluated first, i.e. step || (start < end) is evaluated first. – Tufthunter

@NiettheDarkAbsol: that would mean that the ternary has greater precedence, right? MDN docs say otherwise... – Ionia

@Xufox: if that was the case then the 3rd call would return 2. It doesn't... – Ionia

@Ionia No… step || (start < end) ? 1 : -1 evaluates to step ? 1 : -1 because || is evaluated first and step is truthy. Then, step ? 1 : -1 is evaluated to 1 because step is truthy. – Tufthunter

I've edited my question to clarify what I'm asking... – Ionia

You're not reading our comments though. – Furie

@NiettheDarkAbsol: I realised, I hadn't ask the main question: why the || operator doesn't shortcut, see @lonesomeday answer. I've edited it now to clarify. – Ionia

It doesn't shortcut because it ends up being the input to the ternary, but it looks like you figured that out in the end. – Chalybeate

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.

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;

Condor

I get this. What I don't get is why the || doesn't shortcut when the left condition is true in this case? – Ionia

@Ionia It does. Its left operand is step and its right operand is false. false is never executed. – Condor

step = step || false ? 1 : -1; why does false ? 1:-1 get executed here then, isn't it equivalent to step = step || (false ? 1 : -1); – Ionia

ah wait... I think I'm getting it, my assumption was that: false ? 1 : -1 counted as the 2nd condition of the ||, rather than just false – Ionia

@Ionia Yes, the right-hand side up to the next operator is the operand, not everything to the right. Think of how 5 + 2 * 3 + 4 is executed. * has higher priority than + so 2*3 is executed first. – Condor

Thanks. I get that. I've amending my question to remove the brackets. With the brackets removed from the ternary operator the flow of precedence changes but I still get the error – Ionia

Oh wait. I see, up to the next operator. Fair enough and many thanks! – Ionia

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 :)

Councilor