ES6 For Beginners : Arrow Functions And Scope

ES6 Arrows functions ()=> sometimes called the “fat arrow functions” gives us a short syntax to work with functions also they handle scope very well. Arrow functions use the equals sign along with the greater-than sign => this is not to be confused with the comparison operator which uses the grater-than sign and equals sign >= .

Let’s jump right into some sample code and take a look, first we will see how we used functions in ES5.

1

2

3

4

5

varshowValue=function(a){

console.log(a);

}

showValue(10);

Nothing t0o fancy here, we just have a function called showValue that gets called on line 5 and the function just prints the value passed to the console.

Now let’s convert the above function to the new ES6 arrow function syntax.

1

2

3

4

5

varshowValue=(a)=>{

console.log(a);

}

showValue(10);

Notice that we are no longer using the function keyword. We have the variable a in parenthesis like so (a), parenthesis are only needed if we have more than one variable so we can take them out here if we want, also in our function we have only one line so we can take out the curly braces as well {}. So the function can further be shortened as follows.

1

2

3

varshowValue=a=>console.log(a);

showValue(10);

Arrow functions are not only provide a cleaner way to write functions but they incredibly efficient when it comes to managing scopes.

Arrow Functions And Scope

We all have been there (at least I have) when we are using a function inside an object and referencing properties with the this keyword and we realize that the this keyword falls out of scope. Let’s look at this with an example,

1

2

3

4

5

6

7

8

9

10

11

12

varmyObj={

name:"John Doe",

languages:["HTML","Css","Javascript","php"],

printLanguages:function(){

this.languages.forEach(function(language){

vartemp=this.name+" Knows "+language;

console.log(temp);

});

}

}

myObj.printLanguages();

Here we are calling the printLanguages() method of myObj object on line 12. Note that on line 5 we have this.languages which is referencing the languages property using the this keyword, up to this point the scope of this is the entire object.

On line 6 we are again using this to access the name property by this.name but note that the scope of this has now changed as we are using it inside the forEach() loop which has a function that executes for each item in the languages array. As this is now out of the scope of the object this.name will be undefined.

Now let’s solve this issue by using ES6 arrow functions, we convert the above code as follows.

1

2

3

4

5

6

7

8

9

10

11

12

varmyObj={

name:"John Doe",

languages:["HTML","Css","Javascript","php"],

printLanguages:function(){

this.languages.forEach(language=>{

vartemp=this.name+" Knows "+language;

console.log(temp);

});

}

}

myObj.printLanguages();

We only made changes in line 5 inside of the forEach() loop we are now using arrow functions. This will take care of the scope of this and we will see now that this.name will have the appropriate value. Note that as we are only passing one value to the function we do not need parenthesis around language variable inside forEach loop.

Conclusion

Arrow functions in ES6 not only provide a better syntax but they take care of scope so we don’t have to worry about issues with scope anymore.

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy