Arrow V Regular - Functions in JavaScript

JavaScript is an ever evolving programming language that newer features and functionalities are being added to the language with each new release. It is also one of the top programming languages in the world right now. In one of my previous blog posts, I discussed the use of "this" keyword in JavaScript and how the results differ depending on the contexts for which "this" is used. In this blog, I want to look into a new feature that was introduced in ES6, the arrow functions, and the differences between the regular functions and the arrow functions.

Syntax
In terms of syntax, arrow function is more compact in comparison to the regular function.

    () => {} //Arrow Function

    function test() { //Regular Function

    }

In an arrow function expression, you can even write it without parentheses.

    const test = params => { return params };

However, if there are no parameters on the left side of the arrow then parentheses or an underscore needs to be in place of the empty params. If there are more than one parameters, parentheses are also required.

Return
In a regular function declaration or expression, a return statement needs to be present if something needs to be returned by the function. In the case of an arrow function, there does not need to be a return statement for a one line function due to the nature of implicit return that arrow functions have.

   //Regular function declaration
   function test(a, b) { 
     return a + b; //a + b is returned explicitly
   }

   //Arrow function expression
   const temp = (a, b) => a + b; //a + b is returned implicitly

However, implicit returns for arrow functions only apply to one line functions. If the function is written as the one below, the result won't be returned.

    const temp = (a, b) => {
       a + b;
    }

"this" and "new"
"Arrow function expressions are ill suited as methods, and they cannot be used as constructors." is a direct quote from the MDN web doc and what it is stating is that arrow functions are not suitable to be used in objects and can't be called with the keyword "new." Arrow function does not have its own binding to "this" so when it is included in an object, it is not going to be bound to that particular object. Below is an example of an object having two methods. One is an arrow function and the other one is a regular function.

    let person = {
        name: "John",
        speak: () => {
            return "My name is " + this.name;
        },
        speaking: function() {
            return "My name is " + this.name;
        }

    }

    person.speak(); //My name is

    person.speaking(); //My name is John

If you input this into your browser console and call these two methods, you should see only one of them is going to print out the name "John." The method that prints out the right name is speaking which is a regular function which demonstrates the fact that arrow function doesn't really bind "this" thus not ideal to be used as method inside an object.

In the case of the "new" keyword, regular functions are both constructible and callable so you can use regular functions as constructor. However, arrow functions are only callable but not constructible, they can't be used as constructors.

   let test = () => {}; 

   let temp = new test(); //TypeError: test is not a constructor

Conclusion
Arrow function is one of the most popular new features introduced in ES6 with variety of use cases. Shorter syntax and implicit return are some of the strengths that arrow functions have. However, there are also some drawbacks in choosing arrow functions over the regular functions. It really just depends on the situation and the use case to determine when to and when not to use arrow functions.

References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://scotch.io/tutorials/es6-arrow-functions-in-javascript-getting-started
https://www.w3schools.com/js/js_arrow_function.asp