Learn ES6 Features : Arrow functions
Arrow function is a new way of declaring a function in Javascript introduced in the ES6 version.
It allows developers to execute the same functionalities with a fewer lines of code and in a simpler way.
Therefore, our code is :
- Concise
- Simple
1- Functions before ES6
Before ES6 came along , we used to declare functions in javascript in two ways. The examples below are implementation of a simple function that takes one number as a parameter and multiplies it by two.
In the first example, we declare a variable with the name double that got assigned a function, using the keyword function, which is mandatory. This variable is now the name of our function. To call the function,we need to call the variable double.
In the second example, we declare a function with the name double directly, which we call later to execute the function.
NB: Notice that in the both examples, our function has a name which means each time we declare a function it must has a name, it can’t be anonymous. Also, the use of the keywords return and function and curly brackets, and parentheses for parameters is mandatory.
=> ES6 introduced Arrow functions to be able to write the same code with less restrictions and less lines of code.
2-Arrow functions
2.1 Arrow functions with one parameter
In the example below, we use the arrow function syntax to write the same code previously mentioned.
In this example we declared a variable named double that got assigned a function, without the use of the keyword function. But the most important part is the use of this symbol =>
In arrow functions we always use the => symbol to seperate the function prototype from its implementation.
But what else special about this function?
As we said before, Arrow functions allow us to write the same code with a fewer lines. This function takes one parameter therefore we can get rid of the parentheses. Also, it has one single line of code so we can get rid of the keyword return and the curly brakcets. The new function is declared this way :
As you see, it is short , simple and very comprehensive.
2.2 Arrow functions with multiple parameters
If you are passing more than one parameter to your function, the parentheses are required.
2.3 Arrow functions with no parameters
If your function has no parameter than the use of parentheses is required.
See the example below
2.4 Anonymous functions with Arrow functions
Arrow functions are very practical when we want to manipulate arrays.
In the example below, we want to multiply each element of our array by 2, therefore we will use the predefined javascript function map.
map : is used to execute the same function on each element of the array and returns an array containing the result. The function is declared inside map()
In our case we will implement a function that multiplies by 2 each element of the array that is passed to it as a parameter:
Before ES6 :
After ES6 :
Notice that in the second example we didn’t need to use the keyword function or to name our function. The curly brackets and return keyword are also deleted, our code is clean and short.
Arrow functions are used as anonymous functions when manipulating arrays. In this example we used array.map() but it is applied the same way if we want to use array.reduce or array.filter, etc.
