Explicit Vs Implicit Returns In Javascript

Often when reading through javascript examples you will find some arrow functions use parentheses () while others use braces {}. This key difference is that parentheses will implicitly return the last statement while braces require an explicit return statement. It is important to understand the difference between them because it is likely that you will find code examples of both and trying to edit code written differently than you're used to may have unintended consequences.

Arrow functions are one-liner functions in javascript that have two main syntactical ways to create the code block. with parentheses and braces. Let's take a look at both ways of creating arrow functions so that when we come accross them in the wild it will all make sense.

Here is an example of an arrow function that will implicitly return the last statement without the return keyword. I believe that these are a bit more restricted in that you cannot set variables inside them. They are a little bit more concise and great for one-liners.

        
const implicit = thing => (thing)
undefined
implicit('hi')
"hi"

Note that the parentheses are not required for this example and not having parentheses or braces are implicitly returned as well.

        
// same as above
const implicit = thing => thing
undefined
implicit('hi')
"hi"

In the following example, the curly braces create an arrow function that must explicitly return anything that you want to return from the function. Since the return keyword is never used the function returns undefined by default.

        
// missing return statement
const explicit = thing => {thing}
undefined
explicit('hi')
undefined

In this example using the return keyword will cause the function to return thing and behave similarly to our implicit return.

        
// same as original
const explicit_return = thing => {return thing}
undefined
explicit_return('hi')
"hi"

Until writing this article I was unaware that you could not have a multiline arrow function with an implicit return statement. I tried myself and ran into some issues. I also tried to find examples online and could not find one. If it is possible to write something like below, let me know.

        
// more complex example
// only possible with an explicit return
const sayHello = who => {
    const greeting = 'Hello '
    const message = greeting + who
    return message
    }
undefined
sayHello('Waylon')
"Hello Waylon"