JavaScript Syntax: Inline Ifs in String Assignment Statements

Question

I came across this recently and thought it would make a great SO question.

Suppose you are assigning a string to a local variable and you want to vary it by a simple condition. So you insert an inline if statement into the string:

var someCondition = true;
var url = "beginning-" + (someCondition)?('middle'):('other_middle') + "-end";

But this doesn't work as expected, the value of url will be "middle", not beginning-middle-end. This statement yields the expected result:

var url = "beginning-" + ((someCondition)?('middle'):('other_middle')) + "-end";

Best explanation of why this is wins the coveted answer flag!

Answer 1

It is of course to do with precedence.

var url = "beginning-" + (someCondition)?('middle'):('other_middle') + "-end";

is interpreted as:

var url = ("beginning-" + (someCondition)) ? ('middle') : (('other_middle') + "-end";)

Answer 2

That's because of precedence of operators.

The first example evaluates to:

if ("beginning-" + someCondition) {
  url = 'middle';
} else {
  url = 'other_middle' + "-end";
}

because the ? operator has precedence over +