Funciones de flecha, lo básico

Existe otra sintaxis muy simple y concisa para crear funciones, que suele ser mejor que las expresiones de funciones.

Se llama "funciones de flecha" porque tiene este aspecto:

 let func = (arg1, arg2, ..., argN) => expresión;

Esto crea una función func que acepta argumentos arg1..argN , luego evalúa la expression del lado derecho con su uso y devuelve su resultado.

En otras palabras, es la versión más corta de:

 let func = función(arg1, arg2, ..., argN) {
  expresión de retorno;
};

Veamos un ejemplo concreto:

 sea ​​suma = (a, b) => a + b;

/* Esta función de flecha es una forma más corta de:

sea ​​suma = función (a, b) {
  devolver a + b;
};
*/

alerta( suma(1, 2) ); // 3

Como puedes ver, (a, b) => a + b significa una función que acepta dos argumentos llamados a y b . Tras la ejecución, evalúa la expresión a + b y devuelve el resultado.

• Si solo tenemos un argumento, entonces se pueden omitir los paréntesis alrededor de los parámetros, haciéndolo aún más corto.

  Por ejemplo:

   sea ​​doble = n => n * 2;
  // más o menos lo mismo que: let double = function(n) { return n * 2 }
  
  alerta (doble(3)); // 6

• Si no hay argumentos, los paréntesis están vacíos, pero deben estar presentes:

   digamosHola = () => alerta("¡Hola!");
  
  decir Hola();

Las funciones de flecha se pueden utilizar de la misma manera que las expresiones de función.

Por ejemplo, para crear dinámicamente una función:

 let age = Prompt("¿Cuál es tu edad?", 18);

dejar bienvenido = (edad <18)?
  () => alerta('¡Hola!'):
  () => alerta("¡Saludos!");

bienvenido();

Las funciones de las flechas pueden parecer desconocidas y poco legibles al principio, pero eso cambia rápidamente a medida que los ojos se acostumbran a la estructura.

Son muy convenientes para acciones simples de una línea, cuando simplemente nos da pereza escribir muchas palabras.

Funciones de flecha multilínea

Las funciones de flecha que hemos visto hasta ahora eran muy simples. Tomaron argumentos de la izquierda de => , los evaluaron y devolvieron la expresión del lado derecho con ellos.

A veces necesitamos una función más compleja, con múltiples expresiones y declaraciones. En ese caso, podemos encerrarlos entre llaves. La principal diferencia es que las llaves requieren un return dentro de ellas para devolver un valor (tal como lo hace una función normal).

Como esto:

 let sum = (a, b) => { // la llave abre una función multilínea
  sea ​​resultado = a + b;
  resultado de devolución; // si usamos llaves, entonces necesitamos un "retorno" explícito
};

alerta( suma(1, 2) ); // 3

Más por venir

Aquí elogiamos las funciones de flecha por su brevedad. ¡Pero eso no es todo!

Las funciones de flecha tienen otras características interesantes.

Para estudiarlas en profundidad, primero debemos conocer algunos otros aspectos de JavaScript, por lo que volveremos a las funciones de flecha más adelante en el capítulo Funciones de flecha revisadas.

Por ahora, ya podemos usar funciones de flecha para acciones de una línea y devoluciones de llamada.

Resumen

Las funciones de flecha son útiles para acciones simples, especialmente para frases ingeniosas. Vienen en dos sabores:

1. Sin llaves: (...args) => expression – el lado derecho es una expresión: la función la evalúa y devuelve el resultado. Los paréntesis se pueden omitir si solo hay un argumento, por ejemplo, n => n*2 .

2. Con llaves: (...args) => { body } – los corchetes nos permiten escribir múltiples declaraciones dentro de la función, pero necesitamos un return explícito para devolver algo.

Tareas

Reescribir con funciones de flecha

Reemplace las expresiones de función con funciones de flecha en el siguiente código:

 función preguntar(pregunta, si, no) {
  si (confirmar (pregunta)) sí();
  de lo contrario no();
}

preguntar(
  "¿Estás de acuerdo?",
  function() { alert("Estuviste de acuerdo."); },
  function() { alert("Cancelaste la ejecución."); }
);

solución

 función preguntar(pregunta, si, no) {
  si (confirmar (pregunta)) sí();
  de lo contrario no();
}

preguntar(
  "¿Estás de acuerdo?",
  () => alerta("Estuviste de acuerdo."),
  () => alert("Cancelaste la ejecución.")
);

Parece breve y limpio, ¿verdad?