Normal Function Vs Arrow function.


1. Syntax difference
2. There is no access to the 'arguments' parameter in arrow function
3. Own this binding not avaiable inside arrow function. It has the this binding of
the parent.

class NormalFunction {

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

    greeting () {
        return `Hi ${this.name}, welcome !!`
    }
}

//The below lines are fine to execute.
const objNF = new NormalFunction();
console.log(objNF.greeting())


//But if we break the this, by keeping the function reference.
const getGreeting = objNF.greeting;
console.log(getGreeting()) // here will get undefined name error, as there is no
access to this.name in greeting().

//And for this situation Arrow function comes into action, as the this binding of
the parent scope remain available.

class ArrowFunction {
    name = "John";

    greeting = () => {
        return `Hi ${this.name}, welcome !!`
    }
}

const objAF = new ArrowFunction();
console.log(objAF.greeting())

const getAFGreeting = objAF.greeting;
console.log(getAFGreeting()) //Remain working