Arrow function (fat arrows)

OU COMMENT OUBLIER BIND, APPLY

ARROW FUNCTIONS (FONCTIONS FLÉCHÉS) OU FAT ARROW

Les fonctions fléchées offrent une syntaxe raccourcie des fonctions. Elles sont très utile pour les callbacks.


    // es5
    var yolo = function(x) {
        return x + 1
    }

    // es6
    const yolo = (x) => {
    return x + 1;
    }
    // qui pourrait être écrit encore plus simplement
    const yolo = x => x + 1; // le return devient implicite ici

Les fonctions fléchées partagent le même this que leur scope parent, de ce fait le this utilisé dans la fonction fléchée est celui de la fonction parent. Nous n’avons donc plus besoin d’utiliser bind(), call() ou apply().

// es5
function yolo() {
  var that = this; 
  that.item = 0;

  setInterval(function foo() {
    // La fonction callback se réfère à la variable `that`
    // qui est le contexte souhaité
    that.item++;
  }, 1000);
}

//ES6
function yolo() {
    this.item = 0;

    setInterval( () => {
        this.item++;
    }, 1000);
}

Attention
Si vous voulez retourner un objet, vous devez penser à l’entourer de parathèse

    // ES6
    const yolo = (obj) => {key: obj.value}
    console.log(yolo()); // undefined

    //solution
    const yolo = (obj) => { return {key: obj.value} };
    // ou    
    const yolo = (obj) => ({key: obj.value});