Shivprasad Koirala
Feb 10 · 4 min read

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;
}
Arrow function syntax explanation
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.

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.

The global window object
<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”.

Instance has a different context
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.

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade