Las funciones de flecha (también llamadas "funciones de flecha gruesa") son sin duda una de las características más populares de ES6. Introdujeron una nueva forma de escribir funciones concisas.
Aquí hay una función escrita en sintaxis ES5:
function timesTwo(params) { return params * 2}function timesTwo(params) { return params * 2 } timesTwo(4); // 8Ahora, aquí está la misma función expresada como una función de flecha:
var timesTwo = params => params * 2 timesTwo(4); // 8¡Es mucho más corto! Podemos omitir las llaves y la declaración de retorno debido a retornos implícitos (pero solo si no hay un bloque, más sobre esto a continuación).
Es importante comprender cómo la función de flecha se comporta de manera diferente en comparación con las funciones normales de ES5.
Variaciones
Una cosa que notará rápidamente es la variedad de sintaxis disponibles en las funciones de flecha. Repasemos algunos de los más comunes:
1. Sin parámetros
Si no hay parámetros, puede colocar un paréntesis vacío antes de => ;.
() => 42De hecho, ¡ni siquiera necesitas los paréntesis!
_ => 422. Parámetro único
Con estas funciones, los paréntesis son opcionales:
x => 42 || (x) => 423. Múltiples parámetros
Se requieren paréntesis para estas funciones:
(x, y) => 424. Declaraciones (en contraposición a expresiones)
En su forma más básica, una expresión de función produce un valor, mientras que una declaración de función realiza una acción.
Con la función de flecha, es importante recordar que las declaraciones deben tener llaves. Una vez que las llaves están presentes, siempre debe escribirreturntambién.
A continuación, se muestra un ejemplo de la función de flecha utilizada con una declaración if:
var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }5. "Cuerpo de bloque"
Si su función está en un bloque, también debe usar la returndeclaración explícita :
var addValues = (x, y) => { return x + y }6. Literales de objeto
Si devuelve un objeto literal, debe estar entre paréntesis. Esto obliga al intérprete a evaluar lo que hay entre paréntesis y se devuelve el objeto literal.
x =>({ y: x })Sintácticamente anónimo
Es importante tener en cuenta que las funciones de flecha son anónimas, lo que significa que no tienen nombre.
Este anonimato crea algunos problemas:
- Más difícil de depurar
Cuando reciba un error, no podrá rastrear el nombre de la función o el número de línea exacto donde ocurrió.
2. Sin autorreferencia
Si su función necesita tener una autorreferencia en cualquier punto (por ejemplo, recursividad, controlador de eventos que necesita desvincularse), no funcionará.
Beneficio principal: Sin vinculación de 'esto'
En las expresiones de función clásicas, la thispalabra clave está vinculada a diferentes valores según el contexto en el que se llama. Sin embargo, con funciones de flecha, thisestá ligado léxicamente . Significa que usa thisel código que contiene la función de flecha.
Por ejemplo, observe la setTimeoutfunción a continuación:
// ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };En el ejemplo de ES5, .bind(this)se requiere para ayudar a pasar el thiscontexto a la función. De lo contrario, thisestaría indefinido de forma predeterminada .
// ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };Las funciones de flecha de ES6 no se pueden vincular a una thispalabra clave, por lo que léxicamente subirá un alcance y usará el valor de thisen el alcance en el que se definió.
Cuándo no debe utilizar las funciones de flecha
Después de aprender un poco más sobre las funciones de flecha, espero que comprenda que no reemplazan las funciones normales.
A continuación, se muestran algunos casos en los que probablemente no desee utilizarlos:
- Métodos de objeto
Cuando llamas cat.jumps, el número de vidas no disminuye. Es porque thisno está vinculado a nada y heredará el valor de thisde su ámbito padre.
var cat = { lives: 9, jumps: () => { this.lives--; } }2. Funciones de devolución de llamada con contexto dinámico
Si necesita que su contexto sea dinámico, las funciones de flecha no son la elección correcta. Eche un vistazo a este controlador de eventos a continuación:
var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });Si hacemos clic en el botón, obtendríamos un TypeError. Esto se debe a thisque no está vinculado al botón, sino que está vinculado a su ámbito principal.
3. Cuando hace que su código sea menos legible
Vale la pena tener en cuenta la variedad de sintaxis que cubrimos anteriormente. Con funciones regulares, la gente sabe qué esperar. Con las funciones de flecha, puede resultar difícil descifrar lo que está mirando de inmediato.
Cuando deberías usarlos
Las funciones de flecha brillan mejor con cualquier cosa que requiera thisestar vinculada al contexto, y no a la función en sí.
A pesar de que son anónimos, también me gusta usarlos con métodos como mapy reduce, porque creo que hace que mi código sea más legible. Para mí, los pros superan a los contras.
¡Gracias por leer mi artículo, y compártelo si te ha gustado! Consulte mis otros artículos, como Cómo construí mi aplicación Pomodoro Clock, y las lecciones que aprendí en el camino, y Desmitifiquemos la palabra clave "nueva" de JavaScript.