The return statement in Javascript looks innocent and intuitive, but it hides a caveat that can break the logic of your code and lead to undefined behavior. The best way to illustrate this is to use a simple example, so let’s consider this function:

function greeter(name) {
    return 'Hello ' + name;
}
greeter('Hugo');  // works as expected

The function above works as expected and you don’t have to worry much about it. Now let’s imagine that you have to concatenate more strings inside the greeter function and you end up with a much longer line of code like this:

function greeter(name) {
   return 'Hello, ' + name + ',\nThis is a long long long sentence.\nThis is another long sentence.';
}
console.log(greeter('Hugo'));

The code above also works fine if you keep it exactly as it is. You can notice that the string is too long to fit the width of the screen, so any decent developer would care about that and try to break that long line into smaller readable chunks. One possibility is:

function greeter(name) {
   return 
       'Hello, ' + name + ',\n' +
       'This is a long long long sentence.\n' + 
       'This is another long sentence.';
}
console.log(greeter('Hugo'));

B-I-N-G-O! The code above does NOT work as expected. This function returns undefined because the return statement is actually empty and Javascript doesn’t consider the next lines to be part of the return statement. There are some ways to fix this issue. One of them is to remove the line break after the return keyword, like this:

function greeter(name) {
   return 'Hello, ' + name + ',\n' +
       'This is a long long long sentence.\n' + 
       'This is another long sentence.';
}
console.log(greeter('Hugo'));

You can notice that the code above is a bit unaligned. A perfectionist (like me) would add the line break after the return in order to fix the alignment problem, but this actually creates the other (much bigger) problem. Sigh.

Another way of fixing the code is to use parenthesis around the return value. In this case the alignment isn’t a problem:

function greeter(name) {
   return (
       'Hello, ' + name + ',\n' +
       'This is a long long long sentence.\n' + 
       'This is another long sentence.'
   );
}

Parentheses are valid in this case because the return statement can be followed by an expression. It is quite uncommon to see such syntax, but in this case it plays an important role. This is one of the many details about the language that you have to be aware of in order to play it safe. If you develop code in other languages — like Java or C++ — you know that such code without the parentheses would work perfectly fine in those languages, so it would be fairly easy to forget to use them when you switch back to Javascript.

Typescript is better

In Typescript we could have some similar code like this:

function greeter(name: string): string {
   return 
       'Hello, ' + name + ',\n'
       'This is a long long long sentence.\n' + 
       'This is another long sentence.';
}
console.log(greeter('Hugo'));

If you try to compile this code with Typescript you get the following error message:

code.ts(3,8): error TS7027: Unreachable code detected.

So it basically says that line 3 has unreachable code and now you have to fix it. This is a much better world compared to pure javascript development since you know that this issue will not waste your time later.

If you use Typescript, make sure you have the compiler option “allowUnreachableCode” enabled (otherwise you will not see the error above). Read more about this flag on the compiler options page.

One question may come to your mind at this point: should Typescript fix the code automatically by generating JS code that doesn’t contain the line break after the return statement? Nope. The number of scenarios that this issue could happen is huge, so it is much safer to just warn the developer instead of trying to fix the code silently. I think Typescript is doing a good job here (kudos to Microsoft).

Conclusion

The return statement issue described in this post is just one of many caveats of the Javascript language. It should remind you that Javascript alone can be a treacherous path and you should definitely consider better alternatives like Typescript in your development. Javascript alone can make the software maintenance a nightmare in the long run, so serious developers must look for better alternatives in order to detect and fix mistakes as early as possible. Be productive and stay safe.