An arrow function is, at first glance, just a fancy way to create regular JavaScript functions (however, there are some surprises). Using arrow functions, you can create concise one-liner functions that actually work!
The following example demonstrates how to create an arrow function:
let circumference = (pi, r) => {
let ans = 2 * pi * r;
return ans;
}
let result = circumference(3.141592, 3);
console.log(result); // Outputs 18.849552Here, circumference is a variable, referencing to the anonymous arrow function. The previous code is similar to the following code in ES5:
var circumference = function(pi, r) {
var area = 2 * pi * r;
return area;
}
var result = circumference(3.141592, 3);
console.log(result); //Output 18.849552If your function contains just a single statement (and you want to return the result of that statement), then you don't have to use the {} brackets to wrap the code. This makes it a one-liner. The following example demonstrates this:
let circumference = (pi, r) => 2 * pi * r; let result = circumference(3.141592, 3); console.log(result); //Output 18.849552
When {} brackets are not used then the value of the statement in the body is automatically returned. The preceding code is equivalent to the following:
let circumference = function(pi, r) { return 2 * pi * r; }
let result = circumference(3.14, 3);
console.log(result); //Output 18.84Also, if there's only a single argument, you can omit the brackets to make the code even shorter. Consider the following example:
let areaOfSquare = side => side * side;
let result = areaOfSquare(10);
console.log(result); //Output 100Since there is only one argument, side, we can omit the circular brackets for this.
In arrow functions, the value of the this keyword is the same as the value of the this keyword of the enclosing scope (the global or function scope, whichever the arrow function is defined inside). That means, instead of referring to the context object (that is, the object inside which the function is a property), which is the value of this in traditional functions, this instead refers to global or function scope, in which the function is called.
Consider this example to understand the difference between the traditional functions and the arrow functions, this value:
var car = {
name: 'Bugatti',
fuel: 0,
// site A
addFuel: function() {
// site B
setInterval(function() {
// site C
this.fuel++;
console.log("The fuel is now " + this.fuel);
}, 1000)
}
}
What do you think will happen when you call the car.addFuel() method? If you guessed The fuel is now undefined will appear forever, then you are right! But why?!
When you define the addFuel method inside the function() {} (above site B), your this keyword refers to the current object. However, once you go another level deeper into functions (site C), your this now points to that particular function and its prototypes. Hence, you cannot access the parent object's property with the this keyword.
How do we fix this? Take a look at these arrow functions!
var car = {
name: 'Bugatti',
fuel: 0,
// site A
addFuel: function() {
// site B
setInterval(() => { // notice!
// site C
this.fuel++;
console.log("The fuel is now " + this.fuel);
}, 1000)
}
}Now, inside site C, the this keyword refers to the parent object. Hence, we're able to access the fuel property using the this keyword only.