Implicit and explicit returns in JavaScript

Today, we'll look at the difference between implicit and explicit returns in JavaScript, dive into a few examples of these in action and explain what they do and how they work.

What is a return statement?
Explicit returns
Implicit returns
Mistakes
Conclusion

What is a return statement?

The return statement ends function execution and specifies a value to be returned to the function caller.

A basic example of a return is one used to stop function execution.

1const greet = () => {
2  console.log("Hello");
3
4  return;
5
6  console.log("World");
7};
8
9greet();

Note: This return statement renders the code beneath it unreachable and is solely for example purposes.

This function will only log "Hello" to the console because the return prevents it from getting any further.

Explicit returns

An explicit return is one which uses the return keyword explicitly, hence its name.

Explicit returns are used within the body of a function like so:

1const greet = () => {
2  console.log("Hello");
3
4  return; // We can only use an explicit return here.
5
6  console.log("World");
7};
8
9greet();

Let's see what an explicit return looks like with a simple arrow function.

1const greet = () => {
2  return "Hello World";
3};

Note: This can be written on a single line, but we'll use multiple lines for this example.

And now let's look at what an explicit return looks like within a map.

1const numbers = [1, 2, 3];
2
3const multipliedNumbers = numbers.map((number) => {
4  return number * 2;
5});
6
7console.log(multipliedNumbers); // [4, 2, 6]

Now, let's take a look at these same examples using implicit returns.

Implicit returns

Our first example can be rewritten to omit the curly braces and the return statement.

This is called an implicit return (because it returns without explicitly using a return statement) and looks like this:

1const greet = () => "Hello World";

Now, let's look at how we can clean up our map callback using an implicit return:

1const numbers = [1, 2, 3];
2
3const multipliedNumbers = numbers.map((number) => number * 2);
4
5console.log(multipliedNumbers); // [4, 2, 6]

You may be wondering how to implicitly return an object as curly braces are also used to surround function bodies.

We can do this by wrapping our object in parenthesis:

1const foo = () => ({ bar: "Bar" });
2
3console.log(foo()); // {bar: "Bar"}

Mistakes

A common mistake for people who are new to React and JavaScript is forgetting to return components from a map in the return statement of their function component.

Here's an example of this:

1return (
2  <ul>
3    {items.map((item) => {
4      <Component />;
5    })}
6  </ul>
7);

Note that as the component is inside a function body, so this will not work. If you are inside a function body, it must be explicitly returned like so:

1return (
2  <ul>
3    {items.map((item) => {
4      return <Component />;
5    })}
6  </ul>
7);

Or implicitly returned by replacing the curly braces with parenthesis:

1return (
2  <ul>
3    {items.map((item) => (
4      <Component />
5    ))}
6  </ul>
7);

Conclusion