When Should I Use a Return Statement in ES6 Arrow Functions?

Javascript Ecmascript 6 Arrow Functions

ES6 arrow functions introduced a concise syntax for writing functions in JavaScript. One of the features of arrow functions is that the return keyword is implicit under certain circumstances. This means that the expression in an arrow function is also the implicit return value of that function. However, there are cases where you still need to use the return statement in arrow functions. In this article, we will explore when and how to use the return statement in ES6 arrow functions.

1. Implicit Return in Arrow Functions

Before we dive into the cases where we need to use the return statement, let's first understand the concept of implicit return in arrow functions. In simple terms, when an arrow function body consists of a single expression, that expression is implicitly returned without the need for the return keyword. Let's see a few examples to illustrate this:


// Example 1
const add = (a, b) => a + b;

console.log(add(2, 3)); // Output: 5

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

console.log(multiply(2, 3)); // Output: 6

In Example 1, the arrow function add takes two parameters a and b. The expression a + b is implicitly returned as the result of the function.

In Example 2, we have an arrow function multiply with a block body. Inside the block, we use the return statement to explicitly return the result of the expression a * b.

Both examples show how the return statement is implicit when the arrow function body consists of a single expression. However, there are scenarios where we still need to use the return statement explicitly. Let's explore those scenarios now.

2. Arrow Functions with Multiple Expressions

If an arrow function body contains multiple expressions or statements, you need to use the return statement to explicitly specify the return value. Here's an example to demonstrate this:


const calculate = (a, b) => {
  const sum = a + b;
  const difference = a - b;
  return sum * difference;
};

console.log(calculate(5, 3)); // Output: 16

In this example, the arrow function calculate takes two parameters a and b. Inside the function body, we have multiple expressions: const sum = a + b; and const difference = a - b;. We then use the return statement to explicitly return the result of the expression sum * difference.

3. Arrow Functions as Object Methods

Arrow functions used as methods of objects have a different behavior when it comes to the this keyword. Unlike regular functions, arrow functions do not bind their own this value. Instead, they inherit the this value from the enclosing scope. This can lead to unexpected results if you need to use the this keyword within the function body.

Consider the following example:


const person = {
  name: "John",
  sayHello: () => {
    return "Hello, " + this.name;
  }
};

console.log(person.sayHello()); // Output: Hello, undefined

In this example, we have an object person with a property name and a method sayHello. The method uses an arrow function with the intent to return a greeting using the this.name property. However, since arrow functions do not bind their own this value, the this.name expression will evaluate to undefined. To fix this issue, you need to use a regular function instead:


const person = {
  name: "John",
  sayHello: function() {
    return "Hello, " + this.name;
  }
};

console.log(person.sayHello()); // Output: Hello, John

By using a regular function, the method now correctly references the this.name property of the object.

4. Conclusion

ES6 arrow functions provide a concise and expressive way to write functions in JavaScript. The return statement is implicit when the arrow function body consists of a single expression. However, if the function body contains multiple expressions or if it needs to access the this keyword, you need to use the return keyword explicitly or opt for a regular function instead.

Understanding when to use the return statement in arrow functions is important for writing clean and maintainable code. By following the guidelines provided in this article, you can make informed decisions on when to use the return statement in ES6 arrow functions.

Related Questions