← JavaScript

Funciones

¿Cuál es la diferencia entre una función normal y una arrow function?

Ver respuesta — intenta responderla en voz alta primero

Las arrow functions no tienen su propio this (lo heredan del ámbito donde se definen), no tienen arguments, no se pueden usar como constructores y tienen una sintaxis más corta. Las funciones normales sí tienen su propio this y arguments.

Las diferencias principales:

  • this: la más importante. Una función normal define su propio this según cómo se la llame. Una arrow function no tiene this propio: usa el del ámbito donde fue creada. Por eso las arrows son ideales para callbacks dentro de métodos.
  • arguments: las funciones normales tienen el objeto arguments; las arrows no.
  • Constructor: puedes hacer new Funcion() con una normal, pero no con una arrow.
  • Sintaxis: las arrows son más cortas, y con un solo return pueden omitir las llaves y el return.
// Sintaxis
const sumar = (a, b) => a + b;       // return implícito
const cuadrado = n => n * n;         // un solo parámetro, sin paréntesis
function sumarNormal(a, b) { return a + b; }

// La gran diferencia: this
const objeto = {
  nombre: "Mike",
  saludarNormal: function () {
    setTimeout(function () {
      // aquí, this NO es el objeto (es undefined o el global)
      console.log("Normal:", this.nombre); // undefined
    }, 0);
  },
  saludarArrow: function () {
    setTimeout(() => {
      // la arrow hereda el this de saludarArrow, que es el objeto
      console.log("Arrow:", this.nombre); // "Mike"
    }, 0);
  },
};

objeto.saludarNormal(); // Normal: undefined
objeto.saludarArrow();  // Arrow: Mike

Usar una arrow function como método de un objeto esperando que this sea el objeto:

const obj = {
  nombre: "Mike",
  saludar: () => console.log(this.nombre), // this NO es obj
};
obj.saludar(); // undefined

Para los métodos de objeto, usa funciones normales; para callbacks internos, usa arrow functions.

"La diferencia más importante es this. Una función normal tiene su propio this según cómo se la llame, mientras que una arrow function hereda this del ámbito donde se define. Además, las arrows no tienen arguments, no se pueden usar con new y tienen una sintaxis más corta. Por eso uso arrow functions para los callbacks, sobre todo dentro de métodos, y funciones normales cuando necesito mi propio this o un constructor."

Reto rápido

¿Qué imprime esto?

const persona = {
  edad: 30,
  crecer: () => {
    this.edad++;
    return this.edad;
  },
};
console.log(persona.crecer());
Ver respuesta

Imprime NaN. Como crecer es una arrow function, su this no es persona, así que this.edad es undefined, y undefined++ da NaN.