Descubre cómo funcionan las Arrow Function o funciones flecha en JavaScript. En un momento descubrirás un mundo dentro de JavaScript.
¿Cómo se escribe una Arrow Function?
La verdad es que es muy parecido a cualquier función. La única diferencia es que parte de una constante y la define lo que hay justo detrás: un paréntesis.
Una función estándar de JavaScript sería una cosa así:
function suma(x, y) {
return x + y;
}Para pasar esta función a arrow function lo que haremos será quitar la palabra “function” y declararemos la constante suma. Y esta constante será igual a…
const suma = (x, y) => {
return x + y;
}Como ves, es prácticamente lo mismo que una función estandar. Pero despúes de asignar a la constante “suma” los valores (x, y) le añadimos una flecha => detrás para que haga lo que hace cualquier función de JavaScript.
Arrow Function Lineal
Las funciones flecha tienen una característica extra. Y es que si lo que tienes que escribir lo puedes hacer en una sóla línea, éstas te lo permiten.
Es decir, que después de la flecha si tienes que hacer un return o una operación que se puede hacer en una sola línea podrás hacerlo sin añadir los corchetes:
const suma = (x, y) => x + y;Como ves, hemos hecho lo mismo, pero hemos quitado los corchetes y la palabra return. Ya que con las funciones lineales de las Arrow Function despúes de la flecha es el valor que se devuelve.
Usos más complejos de las Arrow Function
Las arrow function pueden usarse en cualquier sitio de JavaScript. Así que, por ejemplo, en un setTimeout podríamos usarlo.
Un timeout estandar:
setTimeout(function() {
console.log('Hello world');
}, 100);Esto sería lo mismo que hacer:
setTimeout(() => console.log('Hello World'), 100);Puedes ver el vídeo que hay sobre las Arrow Functions en mi canal de Youtube.