5

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?

Pineda
  • 7,435
  • 3
  • 30
  • 45

2 Answers2

12

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;
mrtnrst
  • 41
  • 6
lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • 1
    I get this. What I don't get is why the `||` doesn't shortcut when the left condition is true in this case? – Pineda Feb 03 '17 at 14:22
  • 2
    @Pineda It does. Its left operand is `step` and its right operand is `false`. `false` is never executed. – lonesomeday Feb 03 '17 at 14:24
  • `step = step || false ? 1 : -1;` why does `false ? 1:-1` get executed here then, isn't it equivalent to `step = step || (false ? 1 : -1);` – Pineda Feb 03 '17 at 14:27
  • 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 – Pineda Feb 03 '17 at 14:28
  • 2
    @Pineda 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. – lonesomeday Feb 03 '17 at 14:32
  • 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 – Pineda Feb 03 '17 at 14:33
  • Oh wait. I see, _up to the next operator_. Fair enough and many thanks! – Pineda Feb 03 '17 at 14:41
1

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

dhaker
  • 1,605
  • 18
  • 19