Funciones arrow en JavaScript.

Las funciones arrow, o arrow functions son una nueva forma de definir funciones.

Las funciones arrow se introdujeron en ES6.

Las funciones arrow nos permiten escribir una sintaxis de función más corta:

let myFunction = (a, b) => a * b;

Ver ejemplo

Antes de arrow:

hello = function() {
  return "Hola mundo";
}

Ver ejemplo

Con una función arrow:

hello = () => {
  return "Hola mundo";
}

Ver ejemplo

Se hace más corto. Si la función tiene solo una declaración y la declaración devuelve un valor, puede eliminar los corchetes y la palabra clave return:

Valor de retorno de las funciones arrow de forma predeterminada:

hello = () => "Hola mundo";

Ver ejemplo

Nota: Esto sólo funciona si la función tiene una sola declaración.

Si tienes parámetros, los pasas dentro del paréntesis:

Funcion arrow con parametros:

hello = (val) => "Hola " + val;

Ver ejemplo

De hecho, si solo tiene un parámetro, también puede omitir los paréntesis:

Funcion arrow sin parametros:

hello = val => "Hola " + val;

Ver ejemplo

¿Qué pasa con this?

El manejo de this también es diferente en las funciones arrow en comparación con las funciones normales.

En resumen, con las funciones arrow no hay ninguna vinculación.

En funciones normales, la palabra clave this representaba el objeto que llamaba a la función, que podría ser window, document, button o lo que sea.

Con funciones arrow, la palabra clave this siempre representa el objeto que definió la función arrow.

Echemos un vistazo a dos ejemplos para comprender la diferencia.

Ambos ejemplos llaman a un método dos veces, primero cuando se carga la página y nuevamente cuando el usuario hace clic en un botón.

El primer ejemplo usa una función normal y el segundo ejemplo usa una función arrow.

El resultado muestra que el primer ejemplo devuelve dos objetos diferentes (window y button), y el segundo ejemplo devuelve el objeto window dos veces, porque el objeto window es el "propietario" de la función.

Ejemplo:

Con una función normal, this representa el objeto que llama a la función:

// Funcion regular:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// El objeto window llama a la funcion:
window.addEventListener("load", hello);

// Un objeto button llama a la funcion
document.getElementById("btn").addEventListener("click", hello);

Ver ejemplo

Ejemplo:

Con una función arrow, this representa el propietario de la función:

// Funcion Arrow:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// El objeto window llama a la funcion:
window.addEventListener("load", hello);

// Un objeto button llama a la funcion
document.getElementById("btn").addEventListener("click", hello);

Ver ejemplo

Recuerde estas diferencias cuando trabaje con funciones. A veces, el comportamiento de las funciones regulares es lo que desea; si no, utilice funciones arrow.