Introduction:

In 2015, as part Of ES6 update a new way of writing anonymous functional experssion was added to JS known as Arrow Function or Fat Arrow Operator. Arrow Functions are newer way of writing function which makes writing functions better, precise and more cleaner.

Syntax:

Syntax of arrow function is different as compared to the tradional way of writing functional expression. Arrow function have paranthesis for multiple parameters to be recieved, but these parameters can be avoided in case of a single parameter and also provides us with a feature of implicit return in case of a single line of code to be executed.

Examples:

Traditional Way:

Arrow Function Way:

In the above example, we can see how can see an example of how arrow functions reduces the amount of code that we need to write for a functional expression.

Arrow Functions and This/Prototype:

Arrow Functions do not have their own 'this' binding or prototype and hence cannot be used as constructor with 'new' keyword. The value of 'this' inside arrow function is determined base on the lexical scope. As a result arrow functions are not considered best as Object Methods

Example:

Arrow Functions and This Example:

In the above, 'this' in arrow function printDetails() is lexically bounded to it's scope, so instead of pointing to 'obj' Object the 'this' inside printDetails() is currently poiniting to it's parent's this which happens to be the 'global object'.

Arrow Functions Prototype Example:

The above example clearly indicates absence of prototype in Arrow Functions

Arrow Functions and new keyword Example:

The Above Code snippet would output 'TypeError' which clear indicates that arrow functions cannot be used as 'constructor'.

Arrow Functions and Arguments Object:

Arrow Functions do not have 'arguments object' as part of their inner body. In order to create a function with arrow functions that recieves 'n' number of parameter must needs to use 'rest parameters'.

Example:

With Rest Parameters:

Arrow Functions and Implicit Return:

Traditional Functions used to have body container inside curly braces({}) and used to end when encountered by a return keyword. Arrow Functions introduced implicit return which allowed omission of currly braces and return keyword for single line of operation functions.

In Case of returning Object, Object must be wrapped around pair of paranthesis or the Object body is considered as body of function and won't evaluate the return value.

Example Implicit Return:

Example Implict Return Object:

Arrow Functions and Omitting Paranthesis:

In case of a single parameter one is not required to wrap the parameter around pair of paranthesis. In case if the function doesn't recieves any parameter it is compulsory to have blank pair of paranthesis or an underscore.

Example With Omitted Paranthesis:

Example of No Arguments Function:

Empty Paranthesis:

With Underscore:

Conclusion:

Arrow Functions are a great addition to JS, providing a greater way of creating annoymous functions with minimal syntactic requirements and should be used as per their specific USE-CASE.