arrow function in JavaScript

4 min readFeb 10, 2019

Arrow function and its syntax

Arrow functions helps you to create anonymous functions and methods. That leads to more shorter syntax. For example, below is a simple “Add” function which returns addition of two numbers.

function Add(num1 , num2 ){
return num1 + num2;
}

The above function becomes shorter by using “Arrow” syntax as shown below.

Arrow function has two parts as shown in the above diagram: -

Input: — This section specifies the input parameters to the anonymous function.
Logic: — This section comes after the symbol “=>”. This section has the logic of the actual function.

To invoke the anonymous function you can call the variable to which the anonymous is pointing as shown in the below code.

var Add = (num1,num2) => num1+num2;
alert(Add(10,10));

Myth about Arrow function

Many developers think that arrow function makes your syntax shorter, simpler and thus makes your code readable.

If you believe the above sentence, then let me assure you it’s a myth and the coming section will talk more about it. If you think for a moment a properly written function with name is much readable than cryptic functions created in one line using an arrow symbol.

The main use of arrow function is to ensure that code runs in the callers context.

As a developer we expect that code should always run in the current callers context. So lets try to understand the how JavaScript context works and what are those situations in which JavaScript does not follow the callers context.

Scenario 1: — Code running in the main browser ( Follows Callers Context)

Let’s take the first scenario. You code is running directly inside the body (window DOM) of browser as shown in the below code. We have also defined a variable by name “context”, you can access this variable using the “this” keyword and the variable has a global scope.

And if you run the below code it will display “global context” in the alert box. This is a normal behaviour now issues.

<body>
<Script>
var context = “global context”;
alert(this.context);
</Script>
</body>

Scenario 2: — Code running from an inside function ( Follows Callers Context)

Now let’s take a second scenario you have a function and from that function you are access the variable of the main window. In this case also alert box will display “global context”. In other words when you create a variable on the main windows its global on the main window and functions inside it. This is also a normal expected behavior.

var context = “global context”;
function SomeMethod(){
alert(this.context);
}
SomeMethod();

Scenario 3: — Code running from an instance of a function ( Follows Callers Context)

In this scenario we are creating instance of the function. So the code is running from a instance of a function. In this alert will display “undefined”.

That looks logical there is a global instance for the window and for the instance of “SomeMethod” there is another this or another context

So the global variable “context” is not accessible and so its undefined. This is also as per our expectation

var instance = new SomeMethod();

Scenario 4: — Code running from a function with local variables (Follows Callers Context)

This scenario is same as scenario 3 but with a local variable with the same name as global variable. Below code will display “local context”. This also respects callers context, so if you have global instance you will access global, but if you have something local defined it will override the global context.

var context = “global context”;
function SomeMethod(){this.context = “local context”;alert(this.context);}
var instance = new SomeMethod();

Scenario 5: — Code running from multiple function calls (Does not follow Callers Context)

Now consider the below scenario in this from the main window “SomeMethod ” instance is created è and from “SomeMethod” , “SomeOtherMethod” is called.

Now here we expect that code in “SomeOtherMethod” should follow the callers instance i.e “SomeMethod”. We expect it to display “local context” , but the alert displays “global context”. This is where Arrow function works.

var context = “global context”;function SomeOtherMethod(){alert(this.context);}function SomeMethod(){this.context = “local context”;SomeOtherMethod();}var instance = new SomeMethod();

If you create an anonymous function “SomeOtherMethod” using the arrow keyword and call the same from “SomeMethod” , it will display “local context”.

var context = “global context”;function SomeMethod(){this.context = “local context”;SomeOtherMethod = () => {alert(this.context);}SomeOtherMethod();}var instance = new SomeMethod();

So repeat with me three times:- 😊

“Arrow functions main goal is not about making code simpler , it’s to ensure that code run the current caller context”.

You can also watch the below youtube video which explains arrow function in more detail and practical way.