¿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 propiothissegún cómo se la llame. Una arrow function no tienethispropio: 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 objetoarguments; 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 propiothissegún cómo se la llame, mientras que una arrow function heredathisdel ámbito donde se define. Además, las arrows no tienenarguments, no se pueden usar connewy 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 propiothiso un constructor."
¿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.