Difference between Regular functions and Arrow functions

This article discusses the major differences between regular functions and arrow functions. Arrow functions – a new feature introduced in ES6 – enable writing concise functions in JavaScript. While both regular and arrow functions work in a similar manner, there are certain interesting differences between them, as discussed below.

Syntax: Regular function.

let x = function function_name(parameters){
   // body of the function
};

Example: In this example, we will use a regular function.

javascript

<script>
    let square = function(x){
      return (x*x);
    };
    console.log(square(9));
</script>

Output:

81

Syntax: Arrow function.

let x = (parameters) => {
    // body of the function
};

Example: In this example, we will use an arrow function.

javascript

<script>
    var square = (x) => {
        return (x*x);
    };
    console.log(square(9));
</script>

Output:

81

Use of this keyword: Unlike regular functions, arrow functions do not have their own this. 

Example: In this example, we will try to use this keyword with the arrow functions.

javascript

<script>
    let user = {
        name: "GFG",
        gfg1:() => {
            console.log("hello " + this.name); // no 'this' binding here
        },
        gfg2(){
            console.log("Welcome to " + this.name); // 'this' binding works here
        }
    };
    user.gfg1();
    user.gfg2();
</script>

Output:

hello
Welcome to GFG

Availability of arguments objects: Arguments objects are not available in arrow functions, but are available in regular functions. Example using regular (): 

javascript

<script>
    let user = {
        show(){
            console.log(arguments);
        }
    };
    user.show(1, 2, 3);
</script>

Output: Example using arrow():

javascript

<script>
    let user = {
            show_ar : () => {
            console.log(...arguments);
        }
    };
    user.show_ar(1, 2, 3);
</script>

Output:

Using new keyword: Regular functions created using function declarations or expressions are ‘constructible’ and ‘callable’. Since regular functions are constructible, they can be called using the ‘new’ keyword. However, the arrow functions are only ‘callable’ and not constructible. Thus, we will get a run-time error on trying to construct a non-constructible arrow function using the new keyword.

Example using the regular functions:

javascript

<script>
    let x = function(){
    console.log(arguments);
    };
    var y= new x(1,2,3);
</script>

Output: Example using arrow function:

javascript

<script>
    let x = ()=> {
        console.log(arguments);
    };
    new x(1,2,3);
</script>

Output: For more information on arrow functions, refer to this link.