Javascript » Arrow Functions

In javascript a normal function is defined using function keyword followed by name of the function,  arguments enclosed in parenthesis and a function body.
Example,

// function definition
const func = function printMessage(message) {
                console.log(message);
             }

// calling function
func('Learning javascript!!!);

Arrow Function syntax
An arrow function simplifies function definition by omitting the function keyword and function name.
Function definition starts with parenthesis with arguments(if any) followed by the function body.

In order to separate arguments(or function start) and body, a fat arrow is put between them.
This fat arrow consists of an equal sign(=) followed by greater than(>) symbol, that is, =>.
It is due to this symbol that these functions are called arrow functions.

Thus, above function can be converted to an arrow function as

(message) => { 
   console.log(message);
}

Further, if there is only one argument, then parenthesis can be removed.
Additionally, if there is only one statement in the function, then curly braces surrounding the body can also be removed.

So, above arrow function can be further reduced to

message => console.log(message);

Example
An arrow function which receives a number as argument and returns square of number can be created as below.

// define a function and assign it to variable
let square = number => return number * number;

// call function
square(4)  // returns 16

Above code assigns arrow function to a variable. This is required in order to call the function.
This is similar to a normal function as shown earlier in this section.

Above arrow function can be further simplified to

let square = number => number * number;

This is because if the arrow function returns some value and there is only one statement in the function, then return keyword can also be omitted.

Callback functions
A callback function is supplied as an argument to another function.
Example,
javascript has a setTimeout function which takes a callback function as argument.
It also takes a number as second argument which is the time in milliseconds and executes the callback function after the specified interval as shown below.

// call function after 1 second
setTimeout(function() {
   console.log('After 1 sec');
}, 1000);

Above callback function can be replaced by an arrow function as below.

setTimeout(() => console.log('After 1 sec'), 1000);

Look, how cleaner and shorter the code becomes.

To summarize,

1. Arrow functions make function definitions simpler.
2. An arrow function does not have a name.
3. Arrow function consists of function arguments inside parenthesis and function body separated by =>
4. If there is only one argument, then parenthesis are not necessary.
5. If there is only one statement in the function body, parenthesis are also not necessary.
6. In order to convert a normal function to an arrow function, remove function keyword and function name and add => between function arguments and body.