Traditional vs Arrow function

In JavaScript, you can write functions in a couple of ways. One way is by using the function keyword, which I will be referring to as a traditional function. And another way is by using the following syntax const func = () => {} which is known as the arrow function.

In this blog, we will try to uncover the differences between them and hopefully, by the end, you will be able to pick the right function for your needs.

arguments object

The regular function has an arguments array-like object which holds all the arguments with which the function has been called.

function printNum() {
  console.log(arguments);
}
printNum(1,2,3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

Arrow functions similar to that of this (discussed below) gets the value of arguments from its parent as it doesn't have the arguments object.

function traditionalFunction() {
  const printNum = () => {
    console.log(arguments);
  }
  printNum();
}
traditionalFunction(1,2,3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

What if we want to access all the arguments in the case of an arrow function. Well for that, we can use the rest operator which was introduced in ES6.

const printNum = (...args) => {
console.log(args);
}
printNum(1,2,3); //[1,2,3]

this value

The arrow function doesn't have its own this. It always resolves this lexically, in other words, the value of this depends on where it is defined. For eg, if it is defined inside a regular function the value of this would be the same as that of the parent i.e the outer function.

Let's look into an example,

const user = {
    firstName: 'Jason',
    greet: () => {
           console.log(this.firstName);
    }
};

user.greet(); //undefined

In the above example, this refers to the window object. And since it doesn't have any firstName property we get undefined.

Now, let's see the result when we wrap the arrow function with a traditional function.

const user = {
    firstName: 'Jason',
    greet: function () { 
        const arrowFunc = () => console.log(this.firstName);
        arrowFunc();
    }
};

user.greet(); //Jason

Since the arrow function is inside a traditional function, the value of this is that of the outer i.e the traditional function. And hence, we get Jason on the console.

Constructor

Unlike the regular functions, we cannot use arrow functions as constructors. If we try to use the latter as a constructor, javascript will throw an error stating that - the function is not a constructor.

const Person = () => {
    this.name = 'Peter'
}

const p = new Person(); //type error

Hoisting

In the case of the traditional functions, the whole function is allocated memory and can be called even before the declaration on the other hand if we try to call arrow functions before the declaration it will throw an error.

print("working")

function print(param) {
  console.log(param)   // working
}

printArrowFunc('working');  //type error: not a function

var printArrowFunc = param => console.log(param);

That's it for now. Please share your thoughts in the comments section. And, stay tuned for more such blogs.