Javascript-Arrow Functions

The Arrow functions are introduced in ES6 and which uses you a more accurate way to write the functions in JavaScript. They allow us to write smaller function syntax. Arrow functions make your code easier to readable and structure.

Arrow functions are anonymous functions. They don’t call any value and can declare without the function keyword. Arrow functions cannot be used as constructors. The context within the arrow functions is lexically / statically defined. They are also called Lambda Functions in different languages.

Arrow functions do not include any prototype property, they cannot be using the new keyword.

Syntax:

const functionName = (arg1, arg2, ?..) => { 
  //body of the function 
}

three parts to an Arrow Function:

• Parameters: Any function may optionally have the parameters.
• Fat arrow notation or lambda notation: It is the notation for the arrow (=>).
• Statements: It provides the instruction set of the function.

Example:

Defining three functions (Function Expression, Anonymous Function, and Arrow Function).

/ function expression 

var myfun1 = function show() { 
  console.log("It is a Function Expression");    
 } 

// Anonymous function 

var myfun2 = function () { 
  console.log("It is an Anonymous Function");    
 } 

//Arrow function 

var myfun3 = () => { 
  console.log("It is an Arrow Function");    
 }; 

myfun1(); 
myfun2(); 
myfun3();

OUTPUT:

It is a Function Expression

It is an Anonymous Function

It is an Arrow Function

Syntactic Variations:

There are different syntactic variations for the arrow functions.

Optional parentheses for the single parameter:

var num = x => { 
  console.log(x); 
} 
num(140);

OUTPUT:

140

Optional braces for a single statement, The empty braces if there is not any parameter required.

var show = () => console.log("Hello World"); 
show();

OUTPUT:

Hello World

Arrow Function with Parameters:

If we require to pass more than one parameter by providing an arrow function, then you have to pass them within the parentheses.

Example:

var show = (a,b,c) => { 
  console.log(a + " " + b + " " + c ); 
} 
show(100,200,300);

OUTPUT:

100 200 300

Arrow function with default parameters:

In ES6, the function allows the initialization of parameters with default values, and if there is no value passed to it, or it is undefined.

example:

var show = (a, b=200) => {
  console.log(a + " " + b);
}
show(100);

OUTPUT:

100 200

Arrow function with Rest parameters:

Rest parameters do not restrict you to pass the number of values in a function, but all the passed values must be of the same type. We can also say that rest parameters act as the placeholders for various arguments of the same type.

Example:

var show = (a, ...args) => { 
  console.log(a + " " + args); 
} 
show(100,200,300,400,500,600,700,800);

OUTPUT:

100 200,300,400,500,600,700,800

Arrow Function without Parentheses:

single parameter to pass and then the parentheses are optional.

example:

var show = x => { 
  console.log(x); 
} 
show("Hello World");

OUTPUT:

Hello World

Advantages of Arrow Functions:

• It reduces the code size.
• Return statement and Functional braces are optional for single-line functions.
• Lexically bind the context.