JavaScript Arrow Function

Posted in /  

JavaScript Arrow Function

Vinay Khatri
Last updated on June 9, 2022

    An arrow function is another way of defining the function compactly. Still, there are some differences between defining a function using an arrow function and the traditional normal function that we have been using so far. To define an arrow function we do not use the traditional function keyword. Here are some different syntaxes we can use to define an arrow function. Basic Arrow syntax parameters = > expression Example

    <script>
        // arrow function
        let func = () => document.write("Hello World");
    
        func();
    </script>

    Output

    Hello World

    Arrow function with multiple parameters

    (para1, para2)  => function body

    Example

    <script>
        let add = (a,b) => document.write(a+b);
    
        add(1,2);
    </script>
    Output
    3

    Arrow function with the multiline function body

    paras => {
              // function body
              }
    
    
    Example
    <script>
        let add = (a,b) => {
                        total = a+b;
                        document.write(total);
                        }
        add(1,2);
    </script>

    Output

    3

    In the above syntaxes and examples, you can see that we are using the => symbol to define the arrow function are here we are not using the traditional function keyword and function name. Instead, we are using the variable names for the arrow function expression. And calling the function using the variable name followed by the parenthesis. Now let's discuss how the arrow functions are different from JavaScript's normal traditional functions. Difference between JavaScript Arrow and traditional function 1. To define a traditional function we use the function keyword but in arrow function, we do not require the function keyword instead we use the => symbol.

    Traditional function Arrow function
    function add(a,b)
        {
          return a+b
        }
    let add = (a,b) =>
                  {
                    return a+b
                  }

    2. In the arrow function we do not need to write the return keyword if the function body contains a single expression, whereas in the traditional function we have to write the return statement if we wish to return a value.

    Traditional function Arrow function
    function add(a,b)
    {
        return a+b
    }
    let add = (a,b) => a+b

    3. Arrow function does not have binding to the this and super keywords that we will discuss in the upcoming tutorials.

    var data = {
        name: "Rahul",
        arrow: () => console.log(this.name, this),
        traditional: function() {
               console.log(this.name, this);
                               }
                 }
    
    data.arrow(); // prints undefined, Window {...} (or the global object)
    data.traditional(); // prints Rahul, Object {...}

    4. A arrow function is a function expression and it will not be hoisted at the top of the script whereas the traditional function will be hoisted at the top of the script.

    Traditional function Arrow function
    add(2,3); //5
     function add(a,b){
            console.log(a+b)
        }
    add(2,3); //error
    let add =  (a,b)=> {console.log(a+b)}

    Summary

    • Arrow functions are alternative to write functions in JavaScript.
    • To define an arrow function we use the => operator.
    • Arrow function has limited usages in JavaScript and they can't be used everywhere.
    • An arrow function does not have binding to its own this and super keywords.
    • It also does not support the argument keyword.

    People are also reading:

    Leave a Comment on this Post

    0 Comments