Mastering Implicit Return and Bound ‘this’ in Nested Arrow Functions of JavaScript

Nesting arrow functions, discovering implicit returns and bound ‘this’, and learn how to leverage them effectively in your codebase

Photo by Mika Baumeister on Unsplash

Nested arrow functions in JavaScript offer a sleek, concise syntax perfect for writing clean, easy-to-read code. However, along with their convenience comes an important caveat: understanding the implications of implicit returns and bound ‘this’. These nuances can dramatically impact program behavior, especially when chaining multiple nested functions together.

In this comprehensive guide, we’ll demystify these concepts and showcase practical uses for optimizing your codebase.

Examining Implicit Returns in Nested Arrow Functions

Implicit returns occur naturally within arrow functions when they consist of a single expression. Instead of explicitly declaring a return statement, the result is automatically returned once evaluated. Observe the following example:

const greeting = name => `Hello, ${name}`;

console.log(greeting('John')); // Output: Hello, John

By removing the curly braces and adding backticks, we enabled implicit return functionality. Now, let’s investigate what happens when we introduce nesting: