Arrow Function ( ES6)

Introduction

The 2015 edition of the ECMAScript specification (ES6) added arrow function expressions to the JavaScript language. Arrow functions are a new way to write anonymous function expressions, and are similar to lambda functions in some other programming languages, such as Python.

Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed. Because of this, arrow functions are particularly useful when passing a function as a parameter to a higher-order function, such as when you are looping over an array with built-in iterator methods. Their syntactic abbreviation can also allow you to improve the readability of your code.

In this article, you will review function declarations and expressions, learn about the differences between traditional function expressions and arrow function expressions, learn about lexical scope as it pertains to arrow functions, and explore some of the syntactic shorthand permitted with arrow functions.

Defining General Functions

Before delving into the specifics of arrow function expressions, this tutorial will briefly review traditional JavaScript functions in order to better show the unique aspects of arrow functions later on.

The How To Define Functions in JavaScript tutorial earlier in this series introduced the concept of function declarations and function expressions. A function declaration is a named function written with the function keyword. Function declarations load into the execution context before any code runs. This is known as hoisting, meaning you can use the function before you declare it.

Here is an example of a sum function that returns the sum of two parameters:

function sum(a, b) { return a + b }

Writing Arrow Functions

An arrow function expression is an anonymous function expression written with the “fat arrow” syntax (=>).

Rewrite the sum function with arrow function syntax:

const sum = (a, b) => { return a + b }

Like traditional function expressions, arrow functions are not hoisted, and so you cannot call them before you declare them. They are also always anonymous—there is no way to name an arrow function. In the next section, you will explore more of the syntactical and practical differences between arrow functions and traditional functions.

Disadvantage of arrow functions

Behaviour Of this keyword in Arrow Functions

In normal functions ie function which is defined using the function keyword the behavior of this keyword is different, that is this binding occurs depending on how we call the function
```
 //example
 window.test()
 //the test function has a binding of this referring to the window object
```
However in the arrow function this is not true,then how is the behaviour of this keyword
this keyword in the arrow function takes the behavior of the parent scope where it is present
When this is declared anywhere in the global space then it will always refer to the global object
If an object is made without using the new keyword still it does not get the this binding
So then how to control the behaviour of this the way we want to
On of the important ways to do this is to make use of closures
Arrow functions create closures over the this value of the enclosing execution context. In the following example, we create obj with a method getThisGetter that returns a function that returns the value of this.
The returned function is created as an arrow function, so its this is permanently bound to the this of its enclosing function. The value of this inside getThisGetter can be set in the call, which in turn sets the return value of the returned function.
It inherits the scope from the parent,hence while dealing with this keyword and closures we need to be careful

const obj = {
  getThisGetter() {
    const getter = () => this;
    return getter;
  },
};