Fat Arrow Function Modern in JavaScript

In this article, you will learn about JavaScript Fat Arrow Function, what they are, and how to use them effectively.

Function Syntex:

let number = () =>{
return 10;
}
console.log(number());

If Arrow Function Return only one statement the we can also write it in this way

let number = () => console.log(10);
number();

let number = () =>  10;
number();

But there will be create an error if we write return word in single line, javascript is smart enough to understand it

let number = () => return 10;
number();
//this will generate error

for passing parameter it is same as it works in arrow function

let number = (n) =>{
return n;
}
console.log(number(10));

let number = (n) => n;
console.log(number(10));

//or you can write it this way
let number = n => n;
console.log(number(10));

let number = (a,b) => a+b;
console.log(number(10,5));

Another beauty of arrow function it is not concern about this keyword, lets see it

// Previously we did this 
var javascript ={
name : "Javascript",
libraries : ["React","Angular","Vue"],
printLibraries : function (){
    var self = this;
    this.libraries.forEach(function (a){
    console.log(`${self.name} loves ${a}`);
    });
},
};
javascript.printLibraries();

//now convenient way is using arrow
var javascript ={
name : "Javascript",
libraries : ["React","Angular","Vue"],
printLibraries : function (){
    this.libraries.forEach( (a) => console.log(`${this.name} loves ${a}`));
},
};
javascript.printLibraries();

In JavaScript Arrow function is not concern about this keyword

In JavaScript Arrow function is not work in new keyword

Thank you for reading!