Arrow Function in JavaScript

What is the arrow function? How to write an arrow function?

Photo by Tim Mossholder on Unsplash

There are multiple ways you can write a function in JavaScript whereas, in case of the most of the languages, we have one or two ways of writing functions, but in the case of JavaScript, that is Four (for now only though! we don’t will be there any five or not). All These minute awesomeness makes JavaScript so versatile and satisfying.
The arrow function was first to Introduce in ES6. ES6 is the abbreviation of EcmaScript 6, is the second major revision of JavaScript, which happened in 2015. Along with the arrow function, few other handy features were introduced like JavaScript classes, Promise, Symbol Type, etc.
Before getting into the JavaScript arrow function, let’s look at a classical way of writing function in JS:

the classical way of writing javascript function

The classical function starts with the keyword function with parameters list in parentheses and the whole function body enclosed in curly brackets. Let’s have a look at the classical factorial function:

The classical function cfactorial calculates the factorial of a number. The output will be:

output-Classical Function

The arrow function is a way of writing JavaScript functions with much shorter syntax than traditional functions and is pretty handy in coding large and complex scenarios.

syntax of arrow function

Arrow function has no function keyword, sometimes it may look like javaScript variables but the key difference is, the arrow operator ( => ) in the arrow function. Let’s see in a code:

The function afactorial is the same as the function cfactorial but implemented using the arrow function concept. Observe, how the function keyword is removed, place an arrow operator ( => ) after parameters list. The function body is in curly braces. Believe it or not, this type of syntax really helpful in writing complex callback functions.

output- arrow function

Though arrow function is a powerful feature of JavaScript, it lacks some crucial facilities, like:

1. An arrow function cannot be used as a constructor or any method of a class.
2. With this keyword, the arrow functions produce different results than this in regular functions. In classical function, this keyword specifically points to the object that invokes the function. Say, a window, or a button, or a JavaScript object calls the regular function then this will represent the window, the button, or that JS object, whichever calls the function. But in the case of the arrow function this target the object that actually defined the arrow function. Let’s see in code:

Let’s create a helper function that creates two buttons under <div id="show"> tag and add displayThisInClassical() and displayThisInArrow() functions with these two buttons.

The output is here:

The ‘Button 1’ that calls the displayThisInClassical() function shows that this bind with the current object i.e. the button. But in the case of the ‘Button 2’ that calls the arrow function displayThisInArrow() cannot bind with this so, this represent the parent object ( window ) that actually defined the arrow function.

The whole code will be found here:

officialPrasanta/JavaScript-Blog-Codes