In this article, we will try to understand when should one use Arrow functions in ES6 instead of the traditional function’s syntax with the help of some examples.
Before analyzing why we should use arrow functions, let us first understand the basic details which are associated with the arrow functions (including the syntax of arrow functions and many more details).
Arrow Functions: With the help of the following pictorial representation, we will try to understand the basic details which are associated with the arrow functions.
As we may able to visualize that the traditional function syntax, the use of curly braces are there, followed by function keyword and also requires more number of executable lines, but as we may see the fact that arrow functions allow any user to shorten the syntax of writing the traditional function in a much more compact way.
Syntax for writing an Arrow Function: Following is the simple syntax of writing an arrow function:
let name_of_function = (parameters) => ...
We may also include any number of parameters inside the round braces (way to show that the variable is treated as a function).
Advantages of using Arrow Function: The following points will describe the list of advantages which are associated with using Arrow functions instead of normal functions –
- This arrow function reduces lots of code and makes the code more readable.
- Arrow function syntax automatically binds “this” to the surrounding code’s context.
- Writing the arrow => is more flexible as compared with the writing function keyword.
When one should use the Arrow function: Since in previous sections, we have discussed the syntax, advantages, and flexibility associated with the arrow function syntax, here we will see and analyze when and when we should use arrow functions instead of normal functions.
- We may use arrow function syntax with our method associated with the array, like map(), reduce(), filter() since by using arrow function syntax instead of using normal function syntax one could easily read and understand as well as write the code more effectively.
- If we may use arrow functions while declaring promises and callbacks then it would be much easier for any user to understand the concept behind them otherwise by using traditional function syntax concepts like callback hells, promise chaining would eventually become more difficult to understand, or even writing would become a little complex.
Let us see some examples where we will use only arrow function syntax and further we will the good readable effect associated with the arrow functions.
Example 1: In this example, we will be using the arrow function to check whether a number entered by the user is greater than 10 or not.
Javascript
<script> let checkNumber = (num) => num > 10 ? console.log("Yes") : console.log("No"); checkNumber(5); checkNumber(10); checkNumber(20); checkNumber(32);</script> |
Output: The output of the above code snippet is as follows:
No No Yes Yes
Example 2: In this example, we will use array methods (like map, reduce and filter) for performing different operations on array elements.
Javascript
<script> let array = [1, 3, 5, 8, 9, 7, 6, 2]; let sumOfElements = array.reduce((a, b) => a + b); console.log(sumOfElements); let multiplyElements = array.map((element) => element * 10); console.log(multiplyElements); let filterElements = array.filter( (element) => element % 2 === 0); console.log(filterElements);</script> |
Output: The output of the above code snippet is as follows:
41 [ 10, 30, 50, 80, 90, 70, 60, 20 ] [ 8, 6, 2 ]
Limitations of using Arrow functions: Following are the certain limitations of using an arrow function:
- An arrow function doesn’t have its own bindings with this or super.
- An Arrow function should not be used as methods.
- An arrow function can not be used as constructors.
- An arrow function can not use yield within its body.
- Arrow function cannot be suitable for call apply and bind methods.
