This post will give you introduction about arrow function.

JavaScript version ES6 introduced another way to write function that is arrow function.

What is arrow function?

An arrow function allows shortest way to define function. In arrow function it is not necessary to writing function name in function definition. Usage of arrow function is limited, it can not be used all types of scenario.

JavaScript arrow function

Arrow function basic syntax

variable_name = (parameters) => expression;

You can declare variable with var, let or const keyword. In parentheses zero to multiple parameters can be declared. In expression statement one line or multiple lines can be written. For single line statement no need to define curly brackets. Multiple statements need to written in between curly brackets. With single statement return statement is not required.

Arrow function with one parameter

Example :-

let text=(val)=>"hello "+val;
document.write(text("world"));
Output:- hello word

Explanation :-

This is single statement arrow function without function name. In example, arrow function defined by only one parameter and by default it return value (return statement is not necessary). The function is called by preceding variable name before function.

Arrow function with two parameters

Example:- calculate remainder using arrow function.

let a=(n1,n2)=>n1%n2;
document.write(a(15,4));
Output:- 3

Above example returns remainder '3’ of division calculation 15 by 3. The modulo operator used to find remainder.

Arrow function with multiple parameters

Example:- calculate volume of cuboid using arrow function.

let vol_cub=(l,b,h)=>l*b*h;
document.write(vol_cub(10,20,30));
Output:- 3600

In example 3 parameters are taken, l represent length of cuboid, b represent breadth of cuboid and h represent height of cuboid.

Arrow function without any parameters

Example

let greet=()=>"Good afternoon";
alert(greet());
Output:- Good morning

Arrow function returns “Good afternoon” string.

Multiline arrow function

Multiline arrow function required two things: (1) All statements should written in between curly brackets and (2) A return statement is compulsory.

Example:- merge character and number using '+' operator

let join=(x,y)=>{
let string=x+y;
return string;
}
document.write(join("i",10));
Output:- i10

Above example merged one number and character in arrow function. In example one extra line added that returns merged string.

This is simple example let’s take another example, that includes for loop in arrow function.

Example:-

Display Fibonacci sequence up to entered value using arrow function.

<!DOCTYPE html>
<html>
<head>
<title>Fibonacci sequence using Arrow function</title>
</head>
<body>
<h1 id="f"></h1>
<script>
let fibbo=(a,b)=>
{
let i;
let n=prompt("enter number :-");
for(i=1;i<=n;i++)
{
let c=a+b;
//swaping varible values
a=b;
b=c;
document.write("&nbsp",a);
}
document.getElementById("f").innerHTML="Fibonacci series up to "+n+" digit";
return stop();
}
document.write(fibbo(0,1));
</script>
</body>
</html>

Output of Fibonacci sequence using arrow function:-

Above example is the perfect example of multiline arrow function. It includes for loop.

Explanation:-

Function defines with two parameters. This program take input from user using prompt () method. The for loops play role of increment counter. It continues until its value becomes greater than user input.(after addition, second preceding value becomes first and sum value becomes second preceding value.) Next is swapping variable values for generating fibonacci sequence. At last the return statement with stop() method. As name suggests stop() stop script, if return omitted “undefined” return.

About Fibonacci sequence

The Fibonacci series is sequence of numbers in which each number is summation of its preceding two numbers. The 0 and 1 are base.

Arrow function line break

Line break in arrow function after parameters definition and before '=>’ arrow symbol causes syntax error. See in example.

let g=()
=> "Good morning";
document.write(a());

Following example is not display “Good morning” in output and following error message is displayed on console.

Arrow function error:Unexpected token "=>"

Arrow function syntax error

You can put line break between parameters and also between statement.

These are allowed.

Example 1

let mul=
(a,b)=>

Example 2

let mul=(a,
b)=>

Example 3

let 
mul=
(a,
b)=>
{
let 
c
=
a
*
b;
return c;
}
document.write
(mul(7,9));

Note:- you can not put line break in return statement.

Advantages of arrow function

Shortest way to define function, you have not requires to mention function name in function definition.
Curly brackets and return statement is not required for single line statement.
Useful for non-method function.

Limitations of arrow function

Arrow function do not have its own this and super.
Arrow function can not be used as method.
new.target keyword can not be accessible with arrow function.
Arrow function do not support call(), apply() and bind() method.
It can not be used as constructor.

Conclusion

Arrow function is best alternative to normal function with some limited use.

If you mistakenly write function name like normal function, it will return syntax error message: “Uncaught SyntaxError: Malformed arrow function parameter list”.

Points to remember:-

If arrow function have single line statement skip curly brackets and return statement.
If arrow function have multiline statement do not forget to put curly brackets and writing return statement.