Las funciones flecha -this

 Las funciones flecha (=>) se usan principalmente para no perder el this del contexto donde fueron creadas.

Explicación corta:

• Una función normal cambia su this dependiendo de cómo y dónde se llama.

• Una función flecha no tiene su propio this. Toma el this del lugar donde fue escrita (su contexto padre).

Ejemplo simple:

javascript

const persona = {
  nombre: "Ana",
  saludarNormal: function() {
    setTimeout(function() {
      console.log("Hola " + this.nombre); // ❌ this = undefined (o window)
    }, 100);
  },
  saludarFlecha: function() {
    setTimeout(() => {
      console.log("Hola " + this.nombre); // ✅ this = persona
    }, 100);
  }
};

En resumen: Usa función flecha cuando quieras que this siga siendo el mismo que en el código exterior.

this es una palabra especial que se refiere al dueño de la función en el momento en que se ejecuta.

Regla simple:

• Dentro de un objeto, this es el objeto mismo.

• Fuera de un objeto (en navegador), this es window.

Ejemplo corto:

javascript

const persona = {
  nombre: "Luis",
  saludar: function() {
    console.log(this.nombre); // this = persona
  }
};

persona.saludar(); // "Luis"

Problema con this:
Si pasas esa función a otro lugar (como un setTimeout), this se pierde y apunta a window. Por eso a veces necesitas funciones flecha.