Javascript function definitions- traditional, anonymous and arrow approach 18th Nov 2019

In this blog we will see various function definitions possible in Javascript. I recommend this blog to be read on desktop (or a laptop) as i have included comparisons of the approaches using a table format

Let me jump right into it.Like you be aware there are few ways you can write functions in Javascript.Initially,I used to get confused between the syntaxes.Having said that I still used to manage it to make the code work.And then one day I spent some time to understand these syntaxes and that helped a lot. I came up wtih quick notes as well so that i remember the syntax without actually going to google everytime. I am sharing the way i understood it and hope it helps you as well in some way

I have compared the ways and put it in a table format (below) so that it becomes easier for you to compare( no need to scroll down etc)

Using Function keyword

The most traditional way to declare a function. If you have coded in Java,C# etc this syntax would come naturally to you.Lets take a scenario where we are trying to add two numbers.I have written a function called addSum

              function addSum(a, b) {
                              return a + b
              var z = addSum(2, 3);
              console.log(x);//prints 5 ofcourse
Using Function with a variable

Declare a variable and assign the function to this variable.Function can be invoked using the variable name as shown below I have written a function called subtractSum

                        const subtractSum = function (a, b) {
                        return a - b
                        var z = subtractSum(2, 3);
                        $("#resultSubtract").text(z);//will print -1

Quick point to note here is that we still use the function keyword. Other point to note is that there is no name given to the function and therefore we also call it anonymous function

Using Arrow functions

These functions were introduced in ES6.Helps us to write functions in more concise way.These are also called fat arrow functions

Below function takes two nummbers and multiplies them using arrow syntax

                        var multiplySum = (a, b) => {
                        return a * b;
                        var z = multiplySum(2, 3);
                        $("#resultMultiply").text(z);//prints 6 

I would dwell little more into arrow functions because they are kind of new and somewhat confusing for new comers.When I started I was not sure how to write an arrow function. If you are familiar with C#, then its similar to what's lambda expressions there.So if you a C# guy,you must be familiar with below code.


Above is exactly what we are achieving through Arrow functions in JavaScript world.Just for the benefits of those who don't understand C#, what is happening above is that we have a addNum function which is supposed to take two Int parameters,sum them and return an Integer. The returned integer is printed on the console..Easyyy :-)

If you are unable to remember the syntax of arrow functions(ofcourse you can Google but I personally don't prefer googling for syntax everytime.Why not remember,saves time) ,followed 3 steps and it should help you get going the way it helped me.(Just print it and put it on your wall). Given a normal function expression,follow below steps to convert it into an arrow function

  • Remove the function keyword and just take the parameters with you if any
  • After the parameters, immediately put arrow which is represented as => There has to be an arrow somewhere isnt it. After all we are talking about arrow functions
  • After arrow is the body which is represented as {...}

and that's it.It should get you started. Ofcourse there are more variations to it which i have discussed below.But my suggestion is not to get overwhelmed with so many variations of arrow functions and options (to write even shorter syntaxes). I would suggest start with above 3 steps and learn other variations slowly.
I have provided a JSfiddle link to my above eg for you guys to play with Link to jsfiddle

Now lets look at the variations of arrow functions


I will explain variations and approaches to write arrow function under different circumstances.Again, I will use a table format so that you can quickly compare the result set

    When function takes No Parameters

Traditional Approach
                        function display()
                                return 42;
                            console.log(display()); //prints 42
Arrow Approach
                        var  display2 = ()=> 44
                        var  display2 = _ => 44
                        var  display2 = ()=> {
                        return 44
                        console.log(display2()); //prints 44
Point to Note

Remember the three steps i mentioned earlier to convert traditional function into arrow function.That comes to use here

You see three variations in arrow function approach. All gives the same result. One point to remember is that if arrow function has single line like "44' here,then it returns the result of the expression by default. Therefore no need of explicit return statement. However, if you use the block syntax, you need to specify the return keyword

    When function takes Single Parameter
Traditional Approach
                         function display(x) 
                            return "hello"+ x;
                         console.log(display("manju"));//prints hellomanju 
Arrow Approach
                          var display2 = (x) => "hello"+ x
                          var display2 = x => "hello"+ x
                           console.log(display("manju"));//prints hellomanju 
Point to Note

If there is a single parameter no need to have paranthesis(highlighted) around the parameter( here for x ). Paranthesis is optional

    When function takes Multiple Parameters
Traditional Approach
                         function display(x,y) 
                            return "hello "+ x +" and "+y;
                          //prints hello manju and s 
Arrow Approach
                           var display2 = (x,y) => "hello " + x + " and " + y;
                           //prints hello manju and s 
Point to Note

Parenthesis are mandatory since we have two parameters here i.e x and y

    When function is Returning object literals
Traditional Approach
                        function returnObjLiterals(x, y)
                            return {[x]:y}
                        var obj = returnObjLiterals("key", "value5");
                        console.log(obj.key);//prints value5
Arrow Approach
                         var returnObjLiteralsArrow2 = (x, y) => ({ [x]: y })           
                         var objArrow = returnObjLiteralsArrow2("key", "value4");
                         console.log(objArrow.key);//prints value4
Point to Note

If you want the body to fit in one line then a parenthesis is required.Below will give an error

                     var returnObjLiteralsArrow2 = (x, y) => { [x]: y }    

That's because,both block and object literal use curly brackets, therefore Javascript engine won't be able to differntiate between a block and an object.Therefore, parenthesis are important and a must have in this case

PS [x] syntax in both eg on left.
This is a ES6 feature.The square brackets allow you to use the string literals and variables as the property names.So what it means is that without [] around x ( i.e [x]), I wouldn't have been able to use "key" when printing to console.

Advantages of Arrow functions

I will keep this more practical and include as many eg as I can for clarity

this keyword-Enclosing Scope Context

First thing to remember is that arrow functions do not have their own execution context. What that means is that in case of arrow functions, both "this" and "arguments" are inherited from their parent function.Lets look at an eg below

                              var key = "Outside";
                              let obj = {
                                key: "Inside",
                                printkey: () => {
                                    console.log("where am i declared?? answer is**** " + this.key); // no 'this' binding here
                                printkey1() {
                                    console.log("where am i declared?? answer is**** " + this.key); // 'this' binding works here
                            obj.printkey(); //where am i declared?? answer is****  Outside
                            obj.printkey1(); //where am i declared?? answer is**** Inside

In the eg you see on left, we have an arrowfuncton called "printkey()" and a normal traditional function with "function" keyword called "printkey1()".
OUTPUT: printkey (arrow fn) prints "Outside" while printkey1 prints "Inside"

The reason for above is simple.In classic/traditional function expressions, the this keyword is bound to different values based on the "context" in which the function is called. Whereas arrow functions use the value of this in their lexical scope

You may be wondering difference between context and scope.Context, more or less is the object that calls the function.In our eg,printkey1() is called by obj so the context inside printkey1() will be of obj.On the other hand,scope is all the variables visible to a function based on where it is defied..yes where it is defined is important.In printkey this is bound to the global window object

Eg 2:
                         const obj2 = {
                                    key: 'test object',
                                   tradFn: function () {
                                       console.log("inside tradFn this is "+this);
                                        return function innerFunction() {
                                            console.log("inside tradFn's return fn this is"+this);
                                            console.log("inside tradFn's return fn arguments are "+ arguments);

                                   arrowFn: function () {
                                        console.log("inside arrowFn this is "+this);
                                        return () => {
                                            console.log("inside arrowFn's return fn this is "+this);
                                            console.log("inside arrowFn's return fn arguments are "+ arguments);
                                const traditionaWay = obj2.tradFn('hello', 'manju');
                                const newArrowWay = obj2.arrowFn('hello', 'manju');

In the eg you see on left,we see that there is an object called obj2. It has a property called key, and it has two functions called tradFn which returns a traditional function (marked in chocolate) and arrowFn which returns a arrow function(marked again in chocolate).When you run above you get below output

                              1.inside tradFn this is [object Object]
                              2.inside arrowFn this is [object Object]
                              3.inside tradFn's return fn this is [object Window]
                              4.inside tradFn's return fn arguments are [object Arguments]
                              5.inside arrowFn's return fn this is [object Object]
                              6.inside arrowFn's return fn arguments are [object Arguments]

If you notice above output,3rd and 5th one are to be noted.3rd output prints [object Window] which means that if you would have done this.key there,it would have returned undefined.JavaScript loses scope of this when it is inside of a function that is contained inside of another function. When it is lost, by default, this is bound to global window object.

However,5th output where arrow function is returned, it is bound to obj2.Same is the case with arguments. Output at line 4 wont have access to arguments while output at at lin 6 will print both the arguments i.e hello and manju

If you are keen and extend or play with the above egamples, i have provided the JSFiddle link below
Eg 1 - Link to jsfiddle
Eg 2 - Link to jsfiddle

Use with map,reduce functions

Arrow functions is also useful with methods such as map and reduce, because I think it makes my code more readable. I will cover map and reduce in a separate blog

Disadvantages of Arrow functions
  • Its hardet to get hold of syntax for new comers
  • Since arrow functions are anonymous functions,which also means that there are no names associated with them,it becomes little challenging to debug,as when we get an error, we can't track the name of the function or the exact line number where it occurred.
  • Won't work in cases where self-referencing is required ,eg recursion
  • Cannot be used as a constructor.JavaScript implicitly prevents from doing that by throwing an exception.Eg below
                                    const obj3 = (text) => {
                                              this.text = text;
                                    // Throws "TypeError: obj3 is not a constructor"
                                    const helloWorld = new obj3('Hello World!');

And that's it. Hope you undertood the ways to define Javascript Functions now.Email me at "" incase you have queries or feedback. Alternatively, you can fill the "CONTACT" form or drop a comment below

Did you like the blog or have questions, please add your comments