Differences between Regular Function and Arrow Function!

In JavaScript, you can write functions in a few ways. People sometimes get confused by the differences in them. So I will talk about the differences between Regular function and Arrow function in this blog.

Here are the list of differences:

1. Syntax

In the picture above, you can see the differences in syntax between the two functions. The arrow function example above allows to accomplish the same result with fewer lines of code and approximately half the typing.

2. This keyword

Unlike regular functions, arrow functions do not have their own this. The value of this inside an arrow function remains the same throughout the life cycle of the function and is always bound to the value of this in the closest non-arrow parent function. No matter how or where being executed, this value inside of an arrow function always equals this value from the outer function. The arrow function doesn’t define its own execution context.

3. Constructors

The regular function can easily construct objects. A consequence of this resolved lexically is that an arrow function cannot be used as a constructor.

4. Arguments binding

Arrow functions do not have an arguments binding. However, they have access to the arguments object of the closest non-arrow parent function. Named and rest parameters are heavily relied upon to capture the arguments passed to arrow functions.

5. Arguments Objects

Inside the body of a regular function, arguments is a special array-like object containing the list of arguments with which the function has been invoked. On the other side, no arguments special keyword is defined inside an arrow function. Again (same as with this value), the arguments object is resolved lexically: the arrow function accesses arguments from the outer function.