What is different

Arrow functions have different logic compared to traditional ones. They have their advantages and disadvantages, and it’s important to understand them. Otherwise they might be very confusing to use.

Let’s go quickly through some points, to make sure you know the difference.

Arguments

Don’t rely on them, they are not exposed. It’s not good practice to rely on them anyway. Just use rest parameters (covered in a future guide).

this

Arrow functions take the context of the surrounding code. It’s inherited from the enclosing scope.

We all know that for traditional functions the context depends on where they are invoked.

For arrow functions the context depends on where they are declared.

call / apply / bind

Since the arrow functions take the surrounding context, these won’t really make a difference. Can still be used to pass parameters, but won’t change the context.

Prototype

Arrow functions don’t have a `prototype` property.

Constructor

Arrow functions cannot be used as constructors. For that just use traditional functions, they’re well known and familiar to everyone. Or better yet, use class.

Can’t be named

You can use arrow functions only as anonymous functions. Or said in a different way, only use as function expressions, not as declarations.

// NO

func() => {} // YES

const func = () => {};

No hoisting

Since arrow functions can be used only as expressions, there is no hoisting. Meaning that you can use it, only after it has been assigned. On the contrary, traditional function declarations are hoisted and can be used before the actual declaration.