Arrow functions | Shakti Tanwar

Shakti Tanwar

September 20, 2017

Arrow functions provide lot of new enhancement apart from providing syntactic sugar to already existing JavaScript functions.
As you might already be aware, JavaScript is prototypical in nature and there are many ways you can add a function to a class. A JavaScript function itself can act like a class or a function. Here is how we can define a function

A normal function in JavaScript

  <script type="text/javascript">
            //A normal function in javascript
            function myFunc(i){
                console.log(i);
            }

            myFunc();

         </script>

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">

An IIFE in Javascript

  <script type="text/javascript">
            //An IIFE function in Javascript

           var myIIFEFunc =(function myFunc(i){
                return function(){
                console.log(i);
            }

            })();
            myIIFEFunc(1);

         </script>

Function Acting like a class using Module Pattern. In module pattern function is declared in object returned via the class

<script type="text/javascript">
            
            //Function acting like a class using Module Pattern

            function myClassFunction(){
                var i =10; //class level variable

                return{
			//Function declaration goes here
                add :  function add(j){
                            return i+j;
                        }
                    }
            }

            var objMyclassFunction = new  myClassFunction();
            console.log( objMyclassFunction.add(2));

         </script>

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">

Function Acting like a class using Revealing Module Pattern. In revealing module pattern we just return a reference to already existing method.

<script type="text/javascript">
            
            //Function acting like a class using Module Pattern

            function myClassFunctionRevealingModule(){
                var i =10; //class level variable
                function scopedAdd(j){
                            return i+j;
                        };
                return{
//Return a reference to already defined function
                add :  scopedAdd                  
                }
            }

            var objMyClassFunctionRevealingModule = new  myClassFunctionRevealingModule();
            console.log( objMyClassFunctionRevealingModule.add(2));

         </script>

As you are now familiar with functions as well as some of the patterns associated with functions when they act like a class we can move to arrow function syntax.
In below example, we will take a normal method and try to convert the same to arrow method and also try to discuss what features can be used and what not, compared to normal functions.

<script type="text/javascript">
            function add(i,j){ return i + j; }

            //Step 1
            // Remove function keyword and function name from above method
            //And we are left with (i,j){ return i + j; }
            // Add => after the parenthesis
            // And it becomes (i,j)=>{ return i + j; }
            // since it becomes an anonymous code block it need to be assigned
                //so first version becomes

            var addFunction = (i,j)=>{ return i + j; };

            //For single statement block we dont need curly braces and return keyword
            var addFunctionRefactor = (i,j)=>  i + j;

            console.log(addFunction(1,2));
            console.log(addFunctionRefactor(1,2));
		//Some more examples
		var increment = (i)=> i++;
      var incrementRefactored = i=> i++;
	      //Return objects
		var someObject = i=> { num: i , num2 = i+1 };

        </script>

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">

Difference between Arrow and normal functions
1.) Use of this keyword

Let’s try to run below code snippet containing a normal function using this keyword and an arrow function using this keyword

<script type="text/javascript">
        
        'use strict';
        function ClickMe(){console.log(this);}

        document.addEventListener('click',ClickMe);
    
        document.addEventListener('click',()=>console.log(this));
        
        </script>

And here is the output in chrome when you click anywhere in window

As you can see this keyword refers to HtmlDocument in case of normal functions and to Window object in case of arrow functions.
2.) No direct access to arguments

Unlike other programming languages, you don’t need to overload a method by creating multiple definitions. This is because JavaScript has the concept of optional arguments by default. Consider below example

  <script type="text/javascript">
        
        function parameterDemo(i,j,k)
        {
            console.log("i is " + i);
            console.log("j is " + j);
            console.log("k is " + k);
        }

        //Above function can be called as 
        parameterDemo();
            // output:
            //i is undefined
            //j is undefined
            //k is undefined
        parameterDemo(1);
            // output:
            //i is 1
            //j is undefined
            //k is undefined
        parameterDemo(1,2);
            // output:
            //i is 1
            //j is 2
            //k is undefined
        parameterDemo(1,2,3);
            // output:
            //i is 1
            //j is 2
            //k is 3
        parameterDemo(1,2,3,4);
            // output: last parameter is just ignored if there are not enough names arguments
            //i is 1
            //j is 2
            //k is 3

        </script>

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">

JavaScript also support arguments keywords with which you can get access to all parameters passed to function even if there are no named arguments.

<script type="text/javascript">
        
        function parameterDemo()
        {
            for (var index = 0; index < arguments.length; index++) {
                console.log(arguments[index]);
                
            }
        }
       
        parameterDemo(1,2,3,4);
            // output: 
            //1
            //2
            //3
            //4

        </script>

Let’s try to access arguments using Arrow functions

<script type="text/javascript">
        
        function argumentDemoUsingNormalFunction()
        {
           return arguments[0];
        }
       

        function argumentDemoUsingArrowFunction()
        {
           return () => arguments[0];
        }
       
       var pureArrowFunction = () => console.log(arguments[0]);

        var objargumentDemoUsingNormalFunction = argumentDemoUsingNormalFunction(5);
        console.log(objargumentDemoUsingNormalFunction); //Prints 1

        var objargumentDemoUsingArrowFunction = argumentDemoUsingArrowFunction(5);
        console.log(objargumentDemoUsingArrowFunction());
        
        pureArrowFunction();
        </script>

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">

Output:
5
5
SCRIPT5009: ‘arguments’ is undefined
As we can infer from above example, arrow functions though do not have direct access to arguments keyword (as demonstrated by pureArrowFunction )but they can access the arguments variable passed to a function scope (as demonstrated by objargumentDemoUsingArrowFunction)

Shakti Tanwar

Leave a Reply Cancel reply