Description

Arrow functions save time when writing out functions. They are also used to access the "this" keyword. They bind the "this" value in JavaScript lexically. "LEXICALLY- Relating to the words or vocabulary of a language."

Example 1:

//Writing function the ES5 way;
var greeting = function(){
    console.log("wagwan");
}
greeting();
//Result will be; wagwan

//Writing function the ES6 way;
var greeting = () => {
    console.log("wagwan");
}
greeting();
//Result will be; wagwan

//If there's only one line of code in the function, it can be written like so;
var greeting = () => console.log("wagwan");
greeting();
//Result will be; wagwan

//Passing in a parameter and argument
var greeting = (name) => console.log(`${name} says wagwan`);
greeting("John");
//Result will be; John says wagwan

//If there's only one parameter, it can be written like so;
var greeting = name => console.log(`${name} says wagwan`);
greeting("John");
//Result will be; John says wagwan

Example 2: Using the "this" keyword with arrow functions.

var ninja = {
    name: "Ranti",
    drink(x){
        window.setInterval(function(){
            if(x > 0){
                console.log(this.name + " drank coffee");
                x--;
            }
        }, 1000);
    }
}
ninja.drink(5);
//Result will be; drank coffee. With a count of 5 times.
//this.name doesn't add the name to the console because the "this" keyword is referring  to the setInterval function and not the ninja object. 

//To fix this in ES5, it is done this way;
var ninja = {
    name: "Ranti",
    drink(x){
        var _this = this; //this var is added to make it work.
        window.setInterval(function(){
            if(x > 0){
                console.log(_this.name + " drank coffee"); //_this is used to make it work.
                x--;
            }
        }, 1000);
    }
}
ninja.drink(5);
//Result will be; Ranti drank coffee. With a count of 5 times.

//Using ES6, it is done this way;
//The arrow function is used to bind the "this" keyword lexically so that it refers to   the object itself.
var ninja = {
    name: "Ranti",
    drink(x){
        window.setInterval(() => {
            if(x > 0){
                console.log(this.name + " drank coffee");
                x--;
            }
        }, 1000);
    }
}
ninja.drink(5);
//Result will be; Ranti drank coffee. With a count of 5 times.

Example 3: Using the "this" keyword with arrow functions in object methods.

//When using the "this" keyword in object methods, the ES5 way of writing functions with the function keyword has to be used. If an arrow function is used like so;
var person = {
    firstName: 'John',
    lastName: 'Doe',
    id: 1,
    fullName: () => { 
            return `${this.firstName} ${this.lastName}` 
        }
}
console.log(person.fullName());
//Result will be; undefined undefined.

//Based on this, arrow functions are not suitable for object methods. They also can't be used as constructors.