Unable to correctly write ternary operator in JavaScript

Question

I have an undefined variable and I check it in a string concat:

var undefinedVariable = undefined;
console.log("foo" + undefinedVariable === undefined ? "bar" : undefinedVariable.toString() );

Considering that undefinedVariable is undefined, undefinedVariable.toString() is an unreachable code. However, I get this error:

Uncaught TypeError: Cannot read property 'toString' of undefined(…)

The strange thing is if I remove "foo" at the start of console.log, then the code works fine.

console.log(undefinedVariable === undefined ? "bar" : undefinedVariable.toString() );

I have tested in chrome and firefox and I get the same result so probably it is not a bug. Is there any explanation why JS engines try to run the unreachable part?

^ The title is poorly worded for that question but if you read the accepted answer, it will explain this behavior. — Mike Cluck, Jun 07 '16 at 17:36
@MikeC Nopes... Not a dupe of that / Wrong dupe target. `:)` — Praveen Kumar Purushothaman, Jun 07 '16 at 17:39
@PraveenKumar Like I said, it's not an exact dupe but the bug is the same. Ternary conditions are evaluated *after* concatenation which means that `undefinedVariable.toString()` is executed regardless of if `undefinedVariable === undefined`. — Mike Cluck, Jun 07 '16 at 17:40
@MikeC, thank you for the help. The issue in your suggested dupe has the same solution. But, I do not think we can consider it as a duplicate. — Arashsoft, Jun 07 '16 at 17:56
Possible duplicate of [Concatenate string with ternary operator in javascript](http://stackoverflow.com/questions/29444009/concatenate-string-with-ternary-operator-in-javascript) - the question is also being discussed on [Meta](http://meta.stackoverflow.com/questions/325854/using-duplicate-report-to-increase-the-answer-votes-what-should-we-do). — Glorfindel, Jun 09 '16 at 14:06

Praveen Kumar Purushothaman · Accepted Answer · 2016-06-07T17:41:34.107

3

It is because of the Operator Precedence. The + (concatenation operator) has a greater precedence than the ?: (ternary operator). So, you need to enclose the ternary condition inside () because, it takes it along with the + (concatenation operator) and no more the left side is undefined. Use:

console.log("foo" + (undefinedVariable === undefined ? "bar" : undefinedVariable.toString()) );

You need to tell the JavaScript engine to evaluate the undefinedVariable separately and don't join both the "foo" and undefinedVariable and evaluate.

var undefinedVariable = undefined;
console.log("foo" + (undefinedVariable === undefined ? "bar" : undefinedVariable.toString()) );

The above gives me: foobar.

edited Jun 07 '16 at 17:41

answered Jun 07 '16 at 17:34

Praveen Kumar Purushothaman

164,888
24
203
252

2

To note - this is because of operator operator precedence - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Operator_Precedence – SergeS Jun 07 '16 at 17:37
@SergeS Thanks, but how does that come into play here. Will `?` or `===` be considered as operator or what? – Praveen Kumar Purushothaman Jun 07 '16 at 17:37
1

@PraveenKumar If you read that resource you'll see that `+` has higher precedence than `?:` which in this case means that concatenation takes place before the ternary condition is evaluated. – Mike Cluck Jun 07 '16 at 17:39
@MikeC He he... Sorry. `:P` So `?:` is also an operator. Thanks. – Praveen Kumar Purushothaman Jun 07 '16 at 17:39
I will add that as a reason and correct my answer now. – Praveen Kumar Purushothaman Jun 07 '16 at 17:40
@MikeC Check the updated answer. Now does it make sense? – Praveen Kumar Purushothaman Jun 07 '16 at 17:41
@SergeS Check the updated answer. Now does it make sense? Thanks for the link and clarification buddy. `:)` – Praveen Kumar Purushothaman Jun 07 '16 at 17:42

Unable to correctly write ternary operator in JavaScript

1 Answers1