5

Se que es una pregunta sencilla pero no acabo de entederla. He buscado tutoriales en YouTube y he buscado por la red, y no encuentro una aclaración.

    const handleChange = (name) => (event) => {
setValues({ ...values, error: false, [name]: event.target.value });}

Qué está ocurriendo dentro? Parecerá raro pero no encuentro una explicación clara. He probado buscando en funciones flecha de Mozilla Developer, en YouTube, en funciones Lambda... Y no me aclaro.

EDIT: Vale, he buscado y algo más me he aclarado, pero sigo sin entender la parte del => (event). Tenía entendido que después de la función de flecha viene la sentencia, o la expresión, no que se podía meter otra función de flecha.

2
  • 1
    En JS las funciones son ciudadanos de primera clase. Por lo tanto puedes asignar funciones a variables y pasar funciones como argumento. Incluso en tu código puedes prescindir de los paréntesis si el argumento es único: 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 Commented el 7 jun. 2020 a las 11:58
  • Entre tu explicación y la que me dan abajo ya me ha quedado mucho más claro. Como pensaba, era mucho más sencillo de lo que yo veía. Gracias! Commented el 7 jun. 2020 a las 16:01

1 respuesta 1

7

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

  1. 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).
  2. 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`);
}
  1. 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

  1. 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`
});
  1. 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

  1. No pueden ser invocadas con el operador new
  2. No tienen un prototype definido (causa del punto 1)
  3. No pueden ser funciones generadoras (causa de la sintaxis)
  4. 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.

3
  • Ah! Vale, ahora sí está todo aclarado. En el código que he puesto, declaro una constante, meto dentro de esta una función anónima con el argumento (name), y el paso siguiente es que va a retornar una función anónima con el argumento (event), y a partir de ahí ya opera con la lógica que se le indique. Creo que es así, si no me he confundido. Muchas gracias! Commented el 7 jun. 2020 a las 16:00
  • Es exactamente eso, sí. Justo como se ve en la "traducción" que hice es pre-ES2015
    – VRoxa
    Commented el 7 jun. 2020 a las 16:01
  • Excelente respuesta!, brillante! +1.
    – Layer
    Commented el 7 jun. 2020 a las 21:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.