JavaScript Arrow Functions: Return Values and Implicit Return

In JavaScript, a return value is the result a function sends back to the code that called it. Arrow functions introduced in ES6 provide a concise way to return values using either an explicit return statement or an implicit return.

Understanding these two approaches helps you write cleaner JavaScript code and work effectively with functions, array methods, and modern frameworks such as React.

In this tutorial, you will learn how return values work in arrow functions, how to use the return keyword, and when to use implicit return.

What Is a Return Value in JavaScript?

A return value is the result produced by a function and sent back to the place where the function was called.

The return keyword specifies the value a function should return. It also stops the function’s execution at that point.

Example of a Return Value

const add = (a, b) => {
    return a + b;
};

const result = add(10, 20);

console.log(result);

Output:

In this example, the add() function receives two parameters, a and b. It adds them together and returns the result.

The expression add(10, 20) evaluates to 30, which is stored in the result variable.

You can learn more about the fundamentals of functions in the JavaScript Functions tutorial.

Using the return Keyword in Arrow Functions

When an arrow function uses curly braces {} around its body, you must explicitly use return to return a value.

Example: Returning a Number

const square = (number) => {
    return number * number;
};

console.log(square(5));
console.log(square(8));

Output:

25
64

The function multiplies the supplied number by itself and returns the result.

Example: Returning a String

Arrow functions can also return strings.

const greet = (name) => {
    return `Hello, ${name}!`;
};

console.log(greet("Alex"));

Output:

Hello, Alex!

The function returns a string containing the supplied name. The result can then be displayed, stored in a variable, or passed to another function.

Learn more about inserting variables into strings in the JavaScript Template Literals tutorial.

What Happens When an Arrow Function Does Not Return a Value?

If an arrow function uses a block body with curly braces but does not execute a return statement, it returns undefined.

const add = (a, b) => {
    const result = a + b;
};

console.log(add(5, 10));

Output:

undefined

Although the function calculates the sum, it does not return that value. The variable result is local to the function and cannot be accessed outside it.

To return the calculated value, add the return keyword:

const add = (a, b) => {
    const result = a + b;
    return result;
};

console.log(add(5, 10));

Output:

Remember that calculating a value and returning a value are two different things.

What Is Implicit Return in JavaScript?

Implicit return occurs when an arrow function automatically returns the result of an expression without requiring the return keyword.

This works when the arrow function has an expression body, meaning the body is written without curly braces.

Example of Implicit Return

const add = (a, b) => a + b;

console.log(add(10, 20));

Output:

In this example, the expression a + b is returned automatically. You do not need curly braces or the return keyword.

Implicit return makes short arrow functions more concise and readable.

Explicit Return vs Implicit Return

Both approaches can return the same result, but their syntax differs.

Explicit Return

const multiply = (a, b) => {
    return a * b;
};

console.log(multiply(4, 5));

Output:

The function uses curly braces and the return keyword to specify the value.

Implicit Return

const multiply = (a, b) => a * b;

console.log(multiply(4, 5));

Output:

The function automatically returns the expression a * b.

Feature	Explicit Return	Implicit Return
Syntax	Uses `return`	Does not require `return`
Curly braces	Required for a block body	Omitted for an expression body
Multiple statements	Supported	Not directly supported in the expression body
Best suited for	Multi-step logic	Short, single-expression functions

Use implicit return for simple expressions. Use explicit return when your function needs multiple statements, conditions, or intermediate variables.

Implicit Return with a Single Parameter

When an arrow function has one simple parameter, you can omit the parentheses around the parameter and use implicit return.

const double = number => number * 2;

console.log(double(6));

Output:

The function accepts one parameter and automatically returns its doubled value.

You can also keep the parentheses if you prefer:

const double = (number) => number * 2;

Both forms are valid.

Implicit Return with Multiple Parameters

When an arrow function has multiple parameters, parentheses are required around the parameter list.

const calculateArea = (width, height) => width * height;

console.log(calculateArea(5, 4));

Output:

The function multiplies width by height and implicitly returns the result.

Returning an Object with an Arrow Function

When you want to implicitly return an object literal, wrap the object in parentheses.

Without parentheses, JavaScript interprets the curly braces as the function body rather than an object to return.

Incorrect example:

const createUser = name => {
    name: name
};

console.log(createUser("Alex"));

Output:

undefined

The function does not return an object.

Correct example:

const createUser = name => ({
    name: name
});

console.log(createUser("Alex"));

Output:

{ name: 'Alex' }

The parentheses tell JavaScript to interpret the braces as an object literal.

You can also use the shorter property syntax when the property name and variable name are identical:

const createUser = name => ({ name });

console.log(createUser("Alex"));

Output:

{ name: 'Alex' }

Implicit Return with Conditional Expressions

You can use a ternary operator inside an arrow function to return a value based on a condition.

const getStatus = age => age >= 18 ? "Adult" : "Minor";

console.log(getStatus(20));
console.log(getStatus(15));

Output:

Adult
Minor

The function checks the age and returns the appropriate string. Because the ternary expression is the function’s expression body, its result is returned automatically.

For more information about conditions, visit the JavaScript Conditional Statements tutorial.

Return Values in JavaScript Array Methods

Implicit return is particularly useful when working with array methods such as map() and filter().

Using map()

The map() method creates a new array by applying a function to each element.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Output:

[2, 4, 6, 8]

The arrow function implicitly returns the doubled value for each element.

Using filter()

The filter() method creates a new array containing elements that satisfy a condition.

const numbers = [10, 15, 20, 25, 30];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Output:

[10, 20, 30]

The arrow function implicitly returns the result of the comparison. The filter() method keeps the elements for which that result is truthy.

Learn more in the JavaScript Array Methods tutorial.

Common Mistakes with Arrow Function Return Values

Forgetting return in a Block Body

Incorrect:

const square = number => {
    number * number;
};

console.log(square(4));

Output:

undefined

Correct:

const square = number => {
    return number * number;
};

console.log(square(4));

Output:

Using return with an Expression Body

An expression body does not need the return keyword.

const square = number => number * number;

This is valid implicit return syntax.

If you need to use return explicitly, add curly braces around the function body.

Returning an Object Without Parentheses

Incorrect:

const getUser = () => {
    name: "Alex"
};

Correct:

const getUser = () => ({
    name: "Alex"
});

The second example implicitly returns an object.

Frequently Asked Questions

What is a return value in JavaScript?

A return value is the result a function sends back to the code that called it. You specify it using the return keyword or, in an arrow function with an expression body, through implicit return.

What is implicit return in an arrow function?

Implicit return occurs when an arrow function automatically returns the result of its expression without using the return keyword.

When should I use explicit return?

Use explicit return when your arrow function contains multiple statements, needs intermediate variables, or requires more complex logic.

Can an arrow function return an object?

Yes. To return an object implicitly, wrap the object literal in parentheses.

What happens if an arrow function has no return statement?

A block-bodied arrow function returns undefined if it finishes without executing a return statement.

Is implicit return available in traditional functions?

No. Implicit return is a feature of arrow functions with expression bodies. Traditional functions require an explicit return statement to return a value.

What to Learn Next

Continue learning JavaScript functions and ES6 features with these topics: