Función de flecha de JavaScript
Las funciones de flecha se introdujeron en ES6.
Las funciones de flecha nos permiten escribir una sintaxis de función más corta:
let myFunction = (a, b) => a * b;
Antes:
hello = function() {
return "Hello World!";
}
Con función de flecha:
hello = () => {
return "Hello World!";
}
¡Se hace más corto! Si la función tiene solo una declaración y la declaración devuelve un valor, puede quitar los corchetes y la
returnpalabra clave:
Las funciones de flecha devuelven valor por defecto:
hello = () => "Hello World!";
Nota: Esto funciona solo si la función tiene solo una declaración.
Si tiene parámetros, los pasa dentro de los paréntesis:
Función de flecha con parámetros:
hello = (val) => "Hello " + val;
De hecho, si solo tiene un parámetro, también puede omitir los paréntesis:
¿Qué pasa this?
El manejo de thistambién es diferente en las funciones de flecha en comparación con las funciones regulares.
En resumen, con las funciones de flecha no hay vinculación de
this.
En las funciones regulares la thispalabra clave representaba el objeto que llamaba a la función, que podía ser la ventana, el documento, un botón o lo que sea.
Con las funciones de flecha, la thispalabra clave siempre representa el objeto que definió la función de flecha.
Echemos un vistazo a dos ejemplos para entender la diferencia.
Ambos ejemplos llaman a un método dos veces, primero cuando se carga la página y una vez más cuando el usuario hace clic en un botón.
El primer ejemplo usa una función regular y el segundo ejemplo usa una función de flecha.
El resultado muestra que el primer ejemplo devuelve dos objetos diferentes (ventana y botón), y el segundo ejemplo devuelve el objeto de ventana dos veces, porque el objeto de ventana es el "propietario" de la función.
Ejemplo
Con una función regular thisrepresenta el objeto que llama a la función:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Ejemplo
Con una función de flecha thisrepresenta el
propietario de la función:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Recuerde estas diferencias cuando trabaje con funciones. A veces, el comportamiento de las funciones regulares es lo que desea, si no, use funciones de flecha.
Compatibilidad con navegador
La siguiente tabla define las primeras versiones del navegador con soporte completo para funciones de flecha en JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |