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:

![JavaScript traditional function arguments object example showing array-like object usage](https://img.upweb.dev/content/99a1fce1-778x324.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.

![JavaScript arrow function arguments example showing reference to parent function arguments](https://img.upweb.dev/content/256b1491-978x468.png)

But we can use [**rest parameters**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) instead, which get a normal array object.

![JavaScript arrow function rest parameters example showing array-based argument handling](https://img.upweb.dev/content/cf2d9110-832x324.png)

### 2. Return value can omit the curly brackets

![JavaScript arrow function implicit return example showing concise single-expression syntax](https://img.upweb.dev/content/b0cff61f-854x252.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.

![JavaScript traditional function duplicate parameters example showing non-strict mode behavior](https://img.upweb.dev/content/39f91243-1117x396.png)

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

![JavaScript arrow function duplicate parameters error showing strict mode requirement](https://img.upweb.dev/content/adc5f945-1117x199.png)

### 4. No prototype

![JavaScript arrow function prototype example showing no prototype property](https://img.upweb.dev/content/9195be31-1117x424.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:

![JavaScript arrow function constructor example showing TypeError when used as constructor](https://img.upweb.dev/content/b1d2f500-786x468.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.

![JavaScript arrow function hoisting example showing temporal dead zone behavior](https://img.upweb.dev/content/882594f3-826x576.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.

![JavaScript arrow function this binding example showing lexical this context](https://img.upweb.dev/content/b0bf65dc-826x360.png)

But arrow functions cannot be called with `new`.

![JavaScript arrow function this binding comparison showing traditional function vs arrow function behavior](https://img.upweb.dev/content/2afcb6a3-838x324.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:

![JavaScript arrow function vs traditional function complete comparison chart](https://img.upweb.dev/content/28e87fec-1094x396.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 found this helpful, consider [subscribing to my newsletter](https://upweb.dev) for weekly web development insights and updates. Thanks for reading!_