Debugging Implicit Returns in ES6

For the last 3.5 years, I've worked on a AngularJS(1.x) project; so, I haven't had lots of opportunity to use many of the new features in ES6.

Now that I'm doing React Native work, I've been loving all these new features. However, one thing I really haven't enjoyed are implicit returns.

In case you aren't familiar with them, an implicit return allows an ES6 function to retun a value without having to speficially return anything.

Standard JavaScript


The ES6 version takes the arguments and immediately returns the result of the template literal. In the second ES6 version, parenthesis can be used if the implicit return is too long to neatly fit on one line.

So, what's not to like about implicit returns? They are pretty neat and make for very concise code, right? My problem with them has been with trying to troubleshoot functions using console.log. Sometimes, you really need to know what's getting passed into a function. With implicit returns, you seemingly can't add a console.log statement to the code.

So, for React/React Native, I found myself having to rewrite functions just to add some logging

Fortunately, I stumbled acros this tweet from @WesBos:

Wes shows how you can simply inline the console.log to get the desired output.

This has really improved my relationship with implicit returns. Now, if there was a way to add a debugger in there somehow??

Here's a working sample of a simple React app.