Javascript function returns undefined when using ternary statement

Question

Given two JS functions which implement the same exact logic, the first (test1) will always return undefined while the second one (test2) will return the expected value. The implementation difference is a single return statement, vs storing the evaluated value in a local variable and then returning it.

Why does test1 return undefined instead of the expected result? Secondary, why storing it in a local variable (test2) makes it work?

Here is the exact example:

function test1(a,b)
{
  return 
    a && a == 1 && b && b.match(/abc/i) ? 
      a + 1 : 
      0;
}

function test2(a,b)
{
  var val = 
    a && a == 1 && b && b.match(/abc/i) ? 
      a + 1 : 
      0;
  return val;
}


alert(test1(1,'abc'));  // returns undefined when it should return 2
alert(test2(1,'abc'));  // returns 2 as expected

Here is a JSFiddle to it: https://jsfiddle.net/8gmn004t/1/

I've confirmed this behavior in Chrome and Edge browsers, as well as in Node JS — Bobby Kotzev, Feb 20 '16 at 01:03
Why would you expect different behavior? It's specified by the Javascript language. — Barmar, Feb 20 '16 at 01:03

score 4 · Accepted Answer · edited May 23 '17 at 11:45

4

JavaScript has semicolon insertion after return. You should put an expression after it so that it can continue.

You can read up on the rules here: What are the rules for JavaScript's automatic semicolon insertion (ASI)?

edited May 23 '17 at 11:45

Community

1
1

answered Feb 20 '16 at 01:00

Daniel A. White

174,715
42
343
413

Thank you Daniel. I was totally unaware of JS's ASI rules. I guess minifies have been quietly mitigating this issue for me by compacting my lavish newline coding style. – Bobby Kotzev Feb 20 '16 at 01:31
@BobbyKotzev i would suggest linting before minifying. – Daniel A. White Feb 20 '16 at 01:32

score 0 · Answer 2 · answered Feb 20 '16 at 01:09

In first case after "return" there is nothing to evaluate on the same line. In this case the function returns "undefined". This is how this language works.

Try this:

function test1(a,b)
{
  return a && a == 1 && b && b.match(/abc/i) ? 
      a + 1 : 
      0;
}

Javascript function returns undefined when using ternary statement

2 Answers2