onyeePeace

onyeePeace

Arrow Functions

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.
 
Share this