Implicit vs Explicit arrow functions in ES6

JavaScript

Introduction:

In JavaScript ES6 there are various ways to declare functions, each with its own unique characteristics and use cases. Two commonly used methods of declaring functions are implicit functions (sometimes referred to as an anonymous function) and explicit functions (also known as a named function). In this article, we are going to explore the difference between implicit vs. explicit functions, their use cases, as well as how they contribute to code clarity and maintainability. Additionally, we will also dive a bit into what arrow functions are in general and how we can use them to make clear and concise code. However, I want to mention that in this article we will only be focusing on standalone implicit and explicit functions and will not cover implicit functions related to arrays and objects. Let’s begin.

Arrow Functions:

Arrow functions are functions in which we declare/define our function using an arrow (=>) or to be exact an equal sign combined with the greater than symbol instead of our typical “function” keyword.
Here’s an example:

Explicit Functions:

Now let’s quickly mention what an explicit function is. An explicit function is when we explicitly declare a value with a function’s “return” keyword or curly braces in the function.
Here’s an example:

In our example above we are declaring a named function and a named arrow function. Notice in both our functions we are using the “return” keyword. This means that we are using an explicit function because we are explicitly returning our value.
Implicit function:
Implicit functions are functions where we return a value, but without using the return keyword.
Here are a few examples:

In our example above we have 3 different examples of converting explicit (regular or named functions) into implicit functions. Something I want to point out is the different syntactic structures of our implicit arrow functions.

In our first example, we are passing multiple parameters inside our function. When passing multiple parameters into a function we use our equal sign (=) then our parentheses ( ) and then our two parameters inside our parentheses (a, b) followed with our arrow (=>) and then passing our value “a + b” finally it should look like this (const sum = (a, b) => a + b; In our next example, we have 1 parameter.
Example:

In our 1 parameter example, we have const eatPie = r => Math.PI*r*r. With 1 parameter we can keep our parameter, but we can remove the parentheses () Next we add our arrow => and then pass our value.
Last Example:

In our last example we have no parameter so we can keep our parentheses (), next we use our arrow => and then pass our value.

Conclusion:

And there we have it. In this article, we’ve discussed the fascinating world of JavaScript arrow functions. Just a quick recap. We’ve covered a few fundamental concepts, explicit functions, implicit functions, and arrow functions. We’ve mentioned how explicit functions are functions that use the “return” keyword to call/pass a value. Implicit functions are functions that utilize an arrow “=>” as our “return” to call/pass our value through. Finally, we’ve also discussed what arrow functions are and how instead of using the “function” keyword we declare our functions using an “=>”. By understanding these fundamental concepts I’m confident that you’ll be able to write clear and concise code. So go out, put these concepts into practice, and Happy Coding.