All about arrow functions...

Arrow functions provide alternative solutions for the traditional way of writing functions. Arrow functions are introduced in ES6. Traditionally we write a function in javascript as follows:

function sayHello(){
    console.log("Hello World");
}

We can write the same code in the arrow function as follows:

const greetUser = () => {
    console.log("Hello World");
}

The syntax for arrow function:

 functionName = (arguments) => {
    function body ; 
    return statement (if any);
}

Special points about arrow function:

• Parameters:
  If there is only one argument to function then we can vomit parenthesis around the argument.

// For single arugment
functionName = argument => { 
    function body
}
//For multiple arguments
functionName = (arg1, arg2,...,argn) => {
    function body;
}

• Function body:
  If the function body is of a single line then we can skip curly brackets around the function body. If the function body is multi-line then we have to wrap all function-body inside curly brackets;

//for single line function-body
functionName = (arguments) => expression
// for mult-line function body
functionName = (arguments) => {
    function body
}

• Implicit return:
  A function is returning values without using the return keyword, it’s called an implicit return.

// Single-line
const implicitReturn = (value) => value;

// Multi-line
const implicitReturn = (value) => (
  value
);

• Explicit return:
  A function is returning values using the return keyword, it’s called an explicit return.

// Single-line
const explicitReturn = (value) => { return value; }

// Multi-line
const explicitReturn = (value) => {
  return value;
}

• Returning objects:
  When using implicit returns, object literals must be wrapped in parenthesis so that the curly braces are not mistaken for the opening of the function’s body.

const implicitObjectReturn = () => { value: 1 };
implicit(); // undefined

const implicitObjectReturn = () => ({ value: 1 });
implicit(); // { value: 1 }

• Arrow function don't have this :
  Unlike normal functions, arrow function arrow functions do not have their own this. Instead arrow function retains the scope of the method they were declared in.

const user = {
    sport: "Cricket",
    play: function () {
        return () => {
            return `Playing ${this.sport}`;
        };
    },
};

console.log(user.play()());
//output: Playing Cricket

• Arrow functions don't have argument binding:
  The arguments binding does not exist for arrow functions. It only exists for regular function. However, the arrow function has access to the arguments object of a non-arrow parent function.

// Below code works fine
function greetUser() {
    console.log(arguments[0]);
}
greetUser("nikhil");

//But this gives  *ReferenceError: arguments is not defined*
const greetUser = () => {
    console.log(arguments[0]);
};
greetUser("Nikhil");

- Hoisting in arrow function:
Like traditional function expressions, arrow functions are not hoisted, and so you cannot call them before you declare them.

//Below code works fine
    sayHello();
    var username= "Nikhil";
    function sayHello() {
        console.log("Welcome")
    }
// But below code give error: Uncaught TypeError sayHello is not a function
    sayHello();    
     var sayHello = () => {
        console.log("Welcome");
    }

• Arrow functions are best to use when anything that requires this to bound to context, not the function. We can use arrow functions to manipulate arrays, to make API calls, etc.

• Arrow functions are not good to use with object methods, event handlers, etc.