JavaScript Arrow Function

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>

3

Arrow function with the multiline function body

paras => {
          // function body
          }

<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.

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.

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.

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:

• JavaScript Function Expression & Literals
• For Loop in JavaScript
• JavaScript if….else Statement
• Function Parameters & Arguments in JavaScript
• JavaScript vs PHP
• Best JavaScript IDEs & Text Editors
• JavaScript Property Accessors
• Page Redirect in JavaScript
• JavaScript Object Methods
• Arrays in JavaScript