Fat arrow

Las funciones fat arrow se utilizan en para:

• Omitir la palabrá function

  var inc = (x)=>x+1;
  

• Para capturar el this, ya que en javascript se pierde muy rapidamente el contexto de this como por ejemplo en la siguiente situación:

  function Person(age) {
    this.age = age
    // ejecutandola en el navegador el this es window
    // ya que es quien hace la llamada
    this.growOld = function() {
      this.age++;
    }
  }
  var person = new Person(1);
  setTimeout(person.growOld,1000); // debería incrementar 1 + 1 = 2
  setTimeout(function() { console.log(person.age); },2000); // Devuelve 1, debería ser 2
  

  Esto es debido a que el this que ejecuta la función growOld en javascrirpt es window y no Person. Si utilizaramos una función con fat arrow funciona, esta funcionaría.

  function Person(age) {
    this.age = age
    // aquí el this es el objeto y no quien hace la llamada
    this.growOld = () => {
        this.age++;
    }
  }
  var person = new Person(1);
  setTimeout(person.growOld,1000);
  setTimeout(function() { console.log(person.age); },2000); // devuelve 2
  

  Otra solución sería mezclar las 2 sintaxis

  class Person {
    constructor(public age:number) {}
    growOld = () => {
        this.age++;
    }
  }
  var person = new Person(1);
  setTimeout(person.growOld,1000);
  setTimeout(function() { console.log(person.age); },2000); // 2
  

• Para capturar argumentos

¿Cuándo es necesario utilizar una fat arrow?

Es necesario utilizarla cuando la función va ha ser llamada por otra clase o por otro método de la siguiente forma:

// Se iguala la función de la clase a una variable de otra clase
var growOld = person.growOld;
// más adelante se llama
growOld();

Como utilizarlas con librerías que utilizan this

Existen muchas librerías como por ejemplo jQuery, para trabajar con este tipo de librerías utilizamos variables auxiliares como por ejemplo _self

let _self = this;
something.each(function() {
    console.log(_self); // the lexically scoped value
    console.log(this); // the library passed value
});

¿Cómo utilizar funciones con herencia?

En caso de que quieras sobreescribir una función de la clase padre siempre deberemos realizar una copia de este, por ejemplo:

class Adder {
    // This function is now safe to pass around
    add = (b: string): string => {
        return this.a + b;
    }
}
class ExtendedAdder extends Adder {
    // Create a copy of parent before creating our own
    private superAdd = this.add;
    // Now create our override
    add = (b: string): string => {
        return this.superAdd(b);
    }
}

Cadenas de fat arrow (Currying)

Es una seríe de funciones encadenadas el uso es simple y es el siguiente:

// A curried function
let add = (x: number) => (y: number) => x + y;

// Simple usage
add(123)(456);

// partially applied
let add123 = add(123);

// fully apply the function
add123(456);