Arrow Function => Return Rules

The functional nature of Javascript meant that I was declaring functions all the time. I soon realized that declaring arrow functions were my preference and it became muscle memory to type out the parenthesis and fat arrow in sequence without taking the opportunity to understand why.

It is important to understand what happens after the arrow and the correct syntax when using the arrow function.

So that leads me to talk about the return rules that come with using an arrow function and the difference between implicit versus explicit return. I also briefly describe which situations require a ‘return’ statement, curly brackets ‘{}’ or parenthesis ‘()’.

When are functions implicitly returned?

Implicit return means that the word ‘return’ is not needed to return the value of the function (sorry, I said the word return so many times in that sentence).

1. Single Expression Return

An arrow function may implicitly return if the function is made up of two parts: the expression, and the return value. For an implicit return to happen an expression is required. An expression is something that results in a single value. See the below examples:

The expression is everything to the left of “Cinnamon Toast Crunch”

It can also be defined on multiple lines:

You can also wrap parenthesis to return the value implicitly:

2. Object literals wrapped in { }

If you’re interested in keeping your code to a single line, or are adamant that you do not want to use the ‘return’ statement, you can wrap object literals inside parenthesis for implicit return.

Parenthesis is used so that the curly brackets of the object are not mistaken for the opening of a function body.

When are functions explicitly returned?

The use of the word ‘return’ is explicit in deriving the value of the function.

1. Function body wrapped in curly brackets require a return statement

Curly brackets wrapped around the function body will no longer return implicitly and requires the ‘return’ statement (i.e. explicit return).

JS Rule — A JavaScript function will always return ‘undefined’ unless explicitly or implicitly told otherwise.

2. Multiple line statement or expressions

Arrow functions with curly brackets are the only way to get multiple statements or expressions inside the function body.

The return statement stops the execution of a function and will return a value from the function.

Example of function body with multi-line statements and expressions

⭐ ️A link to an awesome article on JavaScript’s return statement rules here.