7 Differences Between Arrow Functions and Traditional Functions
Tags: webdev, javascript, programming, frontend
Published: 2024-06-03 05:12:49

The arrow function that appeared in ES6 has brought us great convenience, but it is still different from the traditional function. A little carelessness in development may cause problems, so follow me to see the 7 differences between arrow function and traditional function!

# 1. No arguments

In a traditional function, there is an `arguments` local variable. If the number of arguments to our function is dynamic, using `arguments` allows us to easily do things like calculating the maximum number of passed arguments:

 ![](https://cdn-images-1.medium.com/max/1117/1*M_KRr5a6nA9TkHxteRV-NA.png)

`arguments` is an array-like object. The similarities between array-like objects and array objects are that they can both use subscripts to access corresponding elements and 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` converts 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 return the arguments of the closest non-arrow parent function.

 ![](https://cdn-images-1.medium.com/max/1117/1*X9m4miI_kN-z-NEzTJVwng.png)

But we can use **[rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters?utm_source=webdeveloper.beehiiv.com&utm_medium=newsletter&utm_campaign=7-differences-between-arrow-functions-and-traditional-functions)** instead, which get a normal array object.

 ![](https://cdn-images-1.medium.com/max/1117/1*K_pQCIJLGhyEL9miFToikQ.png)

# 2. Return value can omit the curly brackets

 ![](https://cdn-images-1.medium.com/max/1117/1*oIltmulOScuCd_BRYv01nw.png)

You can see that in an inline arrow function that contains only one expression, we can omit the curly braces to return the value, which makes the code clearer.

# 3. Duplicate named parameters are not allowed

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

 ![](https://cdn-images-1.medium.com/max/1117/1*UYD6gGh5lgx5wVw5_Wb5_w.png)

In arrow functions, parameters with the same name are not allowed whether the strict mode is enabled or not.

 ![](https://cdn-images-1.medium.com/max/1117/1*RBmP-pMfoxUbtGLoExqCqw.png)

# 4. No prototype

 ![](https://cdn-images-1.medium.com/max/1117/1*3Pf9rzFGUYv7_OwuE_04-A.png)

We can get `prototype` for traditional function, but the arrow function does not have `prototype` .

# 5. No this

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

 ![](https://cdn-images-1.medium.com/max/1117/1*G-op3ZNKq1xN42UL9IxOYA.png)

In the arrow function, there are no `this`, if we access this in the arrow function it will return the `this` of the closest non-arrow parent function.

 ![](https://cdn-images-1.medium.com/max/1117/1*dcACJUZr67Wv1EIPFFmnGw.png)

Note that the `this` of an arrow function is determined at the time of declaration and never changes. So `call`, `apply`, `bind` cannot change the value of arrow function `this`.

# 6. Cannot be invoked with new

We can use the `new` keyword on the traditional function to create a new object.

 ![](https://cdn-images-1.medium.com/max/1117/1*KpcSOQt5GXoMY0qMPEruDA.png)

But arrow functions cannot be called with `new`.

 ![](https://cdn-images-1.medium.com/max/1117/1*oy5vykFLrV4jymV-MVeeZg.png)

This is because when calling `new`, we go through the following four steps:

1. Create a new object

2. Point the ` __proto__ ` of the new object to the `prototype` of the constructor

3. Call the constructor with the new object as `this`

4. If the result of the call is an object, return the object, if not, return the new object created in the first step.

We can implement a mock new function:

 ![](https://cdn-images-1.medium.com/max/1117/1*NbaIJ9Ck93UMpZ8guAUvLQ.png)

So you can see that the arrow function cannot be called by the new keyword because it has **no prototype** and **no this**.

# 7. Cannot be used as a Generator function

For historical reasons, the specification does not allow the use of the **yield** command in the arrow function, so the arrow function cannot be used as a Generator function.

To sum up, arrow functions avoid a lot of code scenarios that can lead to misunderstandings, it makes our code clearer and more controllable.

*If you find this helpful, [**please consider subscribing**](https://webdeveloper.beehiiv.com/) to my newsletter for more insights on web development. Thank you for reading!*