JavaScript Arrow Function

What is arrow function?

Arrow function in JavaScript is a compact alternative declaration of a function. It doesn’t follow the tradition syntax for a function. Generally it’s a way to declare a function in a short form.

Difference between traditional function and arrow function declaration:

Traditional function

Traditional function declaration and call that function.

Now see in arrow function how this function looks like.

Arrow function declaration and call

Look it’s compact the function syntax. You don’t need to write function keyword and curly brackets.

Comparing traditional functions and arrow functions

“this” and Arrow Functions

Arrow function reduce the scope complexities and make executing functions much more realizable and intuitive.

“this” in tradition function, Traditional functions default “this” to the window scope:

Traditional function “this ”keyword

“this” in arrow function, Arrow functions do not execute default “this” to the window scope, rather but they do run it in the scope they are created:

arrow function “this ”keyword

In our example above, the arrow function does not have its own “this”. The arrow functions follow the normal variable search rules. So when searching for “this ” is not present in the current scope, an arrow function ends up finding the “this” from it’s enclosing scope.