7 Differences between arrow functions and regular functions in JavaScript

This article discusses the major differences between the regular and arrow functions.

In JavaScript, a function is a block of code designed to perform a particular task. Functions allow programmers can break up a large program into multiple smaller, more manageable components using functions. As a result, there is no longer a need to write the same code repeatedly.

There are two types of functions in JavaScript:

1. Regular Functions
2. Arrow Functions (Introduced in ES6)

Regular Functions

We can write the regular function in two ways, i.e. Function declaration and Function expression.

The major difference between Function declaration and Function expression is we can invoke the function add(2,3) before its declaration also, but the function sum (2,3) needs to invoke after it is defined.

Arrow Functions

The arrow function — also called the fat arrow function — is a new feature introduced in ES6 that is a more concise syntax for writing function expressions. It allows you to create functions more cleanly compared to regular functions. There is no declaration approach here, we can write by using Function expressions on

y.

There are certain differences between Arrow and Regular function, i.e

1. Syntax
2. No arguments (arguments are array-like objects)
3. No prototype object for the Arrow function
4. Cannot be invoked with a new keyword (Not a constructor function)
5. No own this (call, apply & bind won't work as expected)
6. It cannot be used as a generator function
7. Duplicate-named parameters are not allowed

Let’s discuss each one

Syntax

Curly brackets aren’t required if only one expression is present, and it will implicitly return this result from the function. Which makes the code clearer.

No arguments object in Arrow Functions

If the number of arguments to our function is unknown, we can get all the parameters as a single variable, i.e. arguments. The arguments object looks like this:

arguments are an array-like object. The similarity between array-like objects and array objects is that they have a length property. The difference is that array-like objects do not have built-in methods on arrays, but we can use Array.from or spread operatorto convert an array-like object into an array object.

In the arrow function, there are no arguments. If we access arguments in the arrow function will throw an error like Uncaught Reference error: arguments is not defined.

But we can use the rest parameters instead, which get a normal array object.

No prototype object for Arrow Functions

There is no prototype object for Arrow functions like regular functions, If you try to access the prototype of arrow functions, it will return undefined .

Cannot be invoked with a new keyword

We cannot invoke the arrow function with the new keyword, because arrow functions don’t have a constructor. If you try to instantiate with a new keyword, it will throw an error.

No own this (call, apply & bind won’t work as expected)

In a traditional function, its internal this value is dynamic, it depends on how the function is invoked. For example:

Unlike regular functions, arrow functions don’t have their own this binding. If we access this in the arrow function it will return the this of the closest non-arrow parent function.

The value of this in the arrow function is determined at the time of declaration and never changes. So call, apply, bind cannot change the value of the arrow function this.

It cannot be used as a Generator function

According to MDN

The function* statement (function keyword followed by an asterisk) defines a generator function.

The yield keyword may not be used in an arrow function’s body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.

Note that generators without yield don't make sense.

Duplicate-named parameters are not allowed

In non-restrict mode, regular functions allow us to use duplicate named parameters. But in strict mode, it is not allowed.

Unlike regular functions, arrow functions do not allow duplicate parameters, whether in strict or non-strict mode. Duplicate parameters will cause a Syntax Error to be thrown.

Conclusion

In this article, I have discussed some significant differences between regular functions and arrow functions in JavaScript.

Understanding the differences between regular and arrow functions helps choose the right syntax for specific needs.

Thank you for reading :)