Funciones flecha y this en JavaScript, explicado desde cero

Ya sabes escribir funciones con function. Una función flecha hace lo mismo con menos texto, usando =>.

<script>
  // La forma que ya conoces
  function alCuadrado(x) {
    return x * x;
  }

  // La misma función, como flecha
  const alCuadradoFlecha = (x) => {
    return x * x;
  };

  // Si es una sola línea con return, se puede acortar más
  const alCuadradoCorta = x => x * x;

  console.log(alCuadrado(5));
  console.log(alCuadradoFlecha(5));
  console.log(alCuadradoCorta(5));
</script>

Su uso más común no es guardarlas en una variable, sino pasarlas directo como argumento a otra función: para un evento, un temporizador, o un método de array.

<button id="btn">Haz clic</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    console.log("¡Clic!");
  });

  setTimeout(() => {
    console.log("Pasaron 2 segundos");
  }, 2000);

  const numeros = [1, 2, 3, 4];
  const dobles = numeros.map(n => n * 2);
  console.log(dobles);
</script>

this es una palabra especial que apunta "al objeto dueño" de la función que se está ejecutando. Dentro de un método de un objeto, this es ese objeto.

<script>
  const jugador = {
    nombre: "Joaco",
    puntos: 0,
    anotar: function (cuantos) {
      this.puntos += cuantos;
      console.log(this.nombre, "tiene", this.puntos, "puntos");
    }
  };

  jugador.anotar(10);
  jugador.anotar(5);
</script>

Dentro de anotar, this es jugador, porque así se llamó al método: jugador.anotar(...).

Acá está la trampa: una función flecha no tiene su propio this. Usa el this del lugar donde fue escrita. Eso la salva de un error muy común.

<script>
  const jugador = {
    nombre: "Joaco",
    puntos: 0,
    anotarConRetraso: function (cuantos) {
      // Con function normal, this se PIERDE dentro del setTimeout
      setTimeout(function () {
        // aquí this ya no es "jugador" -> esto falla
        // this.puntos += cuantos;
        console.log("Con function normal, this no es el jugador");
      }, 500);

      // Con función flecha, this SÍ sigue siendo "jugador"
      setTimeout(() => {
        this.puntos += cuantos;
        console.log(this.nombre, "ahora tiene", this.puntos);
      }, 800);
    }
  };

  jugador.anotarConRetraso(10);
</script>

Escribir funciones flecha, cuándo son más cortas que function, qué es this, y por qué una flecha te salva del error más clásico con callbacks.

Ahora, cómo manejar cosas que tardan en llegar —como una respuesta de internet— sin que tu código se enrede.

Funciones flecha y this

Arrow functions and this