Las arrow functions es otra forma sintáctica de declarar funciones en JavaScript a partir del ES2015.
La sintaxis es
const fn = () => {
// body
}
fn();
Características
- Son expresiones
Siempre son expresiones, a diferencia de function
(que puede ser expresión o declaración).
Esto implica que siempre deberemos asignar la expresión a una variable (o una constante).
- No se aplica el hoisting
El hoisting es una técnica del parser de JavaScript que pone automáticamente todas las variables declaradas con var
arriba del todo de una función y, también se aplica a las declaraciones de las funciones.
// Todo bien
declaration();
function declaration() {
console.log(`Hurray`);
}
// ReferenceError: Cannot access 'expression' before initialization
expression();
const expression = () => {
console.log(`Nope`);
}
- No tienen un contexto de
this
propio
Las funciones declaradas con function
tienen una palabra reservada this
que hace referencia a su contexto de función.
De este modo es como antes del ES2015 se escribían las clases (o algo que pretendía emularlo).
En el caso de las arrow function, el this
viene determinado a la función padre o a la class
que las contenga.
function Counter() {
// Tenemos que guardar la referencia
// a la instancia de Counter
self = this;
// Declaramos una propiedad de la instancia
// en el contexto de Counter
this.index = 0;
setInterval(function() {
// this.counter es undefined
// porque this forma parte de otro contexto
console.log(self.index++);
}, 1000);
}
Counter();
///////////////////
function Counter() {
this.index = 0;
setInterval(() => {
// this hace referencia al contexto
// de Counter. No se ha creado
// un nuevo contexto en este scope
console.log(this.index++);
}, 1000);
}
Counter();
Sintaxis
- Un solo parámetro no necesita paréntesis
(A excepción de los rest parameters o una deconstrucción de un objeto)
// No necesita paréntesis
const monadic = arg => {
console.log(arg);
}
// Necesita paréntesis
const diadic = (arg1, arg2) => {
console.log(arg1, arg2);
}
// Necesita paréntesis
const multiple = (...args) => {
console.log(...args);
}
// Necesita paréntesis
const property = ({ index }) => {
console.log(index);
}
monadic(`One`);
diadic(`One`, `Two`);
multiple(`One`, `Two`, `... and so on`);
property({
first: `One`,
index: `Two`
});
return
implícito
Una arrow function sin curly brakets (llaves) tiene un return
implícito que devolverá el resultado de la expresión.
Sólo es válido en caso de una sola expresión; si hay dos o más, se necesitan llaves siempre.
const sum = (x, y) => x + y;
const res = sum(10, 13);
console.log(res); // 23
// Tiene dos líneas, pero sólo
// una expresión (statement)
const delay = millis =>
new Promise(resolve =>
setTimeout(resolve, millis));
return
implícito de un object
Por sintaxis, para poder usar el return
implícito en caso de retornar un objeto, los curly brackets del objeto envuelven en paréntesis para que no haya ambigüedad entre los curly brackets del cuerpo de la función y la declaración del objeto.
const merge = (obj1, obj2) => ({ ...obj1, ...obj2 }); // Ok
const merge = (obj1, obj2) => { ...obj1, ...obj2 }; // syntax error
Otras implicaciones
- No pueden ser invocadas con el operador
new
- No tienen un
prototype
definido (causa del punto 1)
- No pueden ser funciones generadoras (causa de la sintaxis)
- Sí pueden ser funciones asíncronas (
const fn = async () => { ... }
)
Tu ejemplo
Reescribimos la función con sintaxis pre-ES2015
function handleChange(name) {
return function(event) {
var param = {
...values, // El spread no es pre-ES2015, pero lo dejamos así por simplicidad
error: false,
[name]: event.target.value
};
setValues(param);
}
}
Es una función que devuelve otra función. Tan simple.
Se aplican dos características de la sintaxis de las arrow functions: obviar paréntesis y el return
implícito.
Si queda cualquier otra duda, coméntame.
Espero que sirva.
const handleChange = name => event => { ... }
. A ver que alguien con un poco más de dedicación te dará una respuesta indicando esta y otro tipo de características del lenguaje. Esto es parte del llamado paradigma de la programación funcional . Saludos