Why Arrow Function?

Before knowing why to go with arrow functions. let us know what is arrow functions. Below is an example of normal function

//Normal Function

myfunction(){
    return 'I am a Normal Function';
}

Now We can write the above function in arrow function as shown below

//Arrow Function

const myfunction = ()=>{
    return 'I am Arrow Function';
}

Suppose we want to send parameter in an arrow function then we can pass as

const myfunction = (name,age)=>{
    return 'My Name is'+name+','+age+'years old';
}

Now if we have a single parameter to pass then we can also write the function as

const myfunction = name =>{
    return 'My Name is'+name+','+age+'years old';
}

Now the question is why this arrow function what's the use of arrow functions.
Let's take an example we have a class person which as a function personName() which in return console logs the name with a delay of 100 ms.

class Person{

constructor(name){
   this.name = name;
}

personName(){
    return setTimeout(function(){

        console.log('Name is '+this.name);
    },100);
}
}

per =new Person('Peter');

per.person();

//Output 'Name is Undefined';

So the output is not what we expected .. this says that this is now no more accessible in inner functions.
To solve this there is a solution we can simply bind this function to current objects as

personName(){
    return setTimeout(function(){

        console.log('Name is '+this.name);
    }.bind(this),100);
}

****OR****

personName(){

    var that = this;
    return setTimeout(function(){

        console.log('Name is '+that.name);
    },100);
}

But this solution doesn't seem to a good solution ... so to solve this javascript came with an arrow function which knows from which context it has been called.
Below code shows that now this is accessible in the inner function

class Person{

constructor(name){
   this.name = name;
}

personName(){
    return setTimeout(()=>{

        console.log('Name is '+this.name);
    },100);
}
}

per =new Person('Peter');

per.person();

//Output 'Name is Peter';

Comments

[Edvinas Pranka]

Good explanation. Advice for you:

I suggest to use the Capital letter for the class names and small letters for their instances:

class Person {

}

const person = new Person();

Good luck!

[Prathamesh Patil]

Thanks :)