Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 8 · Semana 3

Funciones flecha y funciones como valor

Hoy · Hoja de ruta

  1. 1. Aprende: La sintaxis de flecha, y la idea de que una función es un valor más.
  2. 2. Haz: Escribe funciones que reciben funciones, la base de lo que viene en la semana 4.
  3. 3. Comprueba: Lees sin dudar una función flecha escrita por otra persona.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Puede una variable guardar una función?
  2. Si pudieras pasarle a un filtro «la regla» como parámetro, ¿qué te ahorraría?
  3. ¿Qué significa que algo se ejecute «más tarde»?

La misma función, tres formas

// Declaración
function doble(n) {
  return n * 2;
}

// Expresión guardada en una variable
const doble2 = function (n) {
  return n * 2;
};

// Función flecha
const doble3 = (n) => n * 2;

La flecha con una sola expresión devuelve esa expresión sin escribir return. Con llaves, vuelve a hacer falta:

const etiquetar = (producto) => {
  const estado = producto.stock > 0 ? "Disponible" : "Agotado";
  return `${producto.nombre} · ${estado}`;
};

Una función es un valor

Esta es la idea que abre la semana 4:

const operaciones = {
  suma: (a, b) => a + b,
  resta: (a, b) => a - b
};

operaciones.suma(2, 3);    // 5

También puede pasarse como argumento:

function aplicarATodos(lista, transformar) {
  const resultado = [];
  for (const elemento of lista) {
    resultado.push(transformar(elemento));
  }
  return resultado;
}

aplicarATodos([1, 2, 3], (n) => n * 10);   // [10, 20, 30]

Acabas de escribir a mano lo que la semana que viene hará map. Merece la pena haberlo escrito una vez: después, map deja de ser magia.

Callback

Una función que se le pasa a otra para que la llame ella. En la UD4 será «lo que hay que hacer cuando el usuario pulse»; en la UD6, «lo que hay que hacer cuando llegue la respuesta».

Cuándo usar cada forma

Forma Úsala para
Declaración function Funciones con nombre del programa, sobre todo si son largas
Flecha Funciones cortas que se pasan como argumento

No mezcles por gusto: dentro de un mismo fichero, mantén un criterio.

Tarea 8 · Funciones que reciben funciones

  1. Reescribe tres de tus funciones de la sesión 7 como flechas y comprueba que siguen dando lo mismo.
  2. Escribe aplicarATodos y úsala para subir un 10 % todos los precios.
  3. Escribe filtrarPor(lista, condicion) y úsala con dos condiciones distintas.
  4. Escribe contarSi(lista, condicion).
  5. Guarda tres reglas de negocio en un objeto de funciones y llámalas por su nombre.
Objetivo mínimoaplicarATodos y filtrarPor funcionando con dos reglas distintas.
Si lo tienesEscribe reducir(lista, combinar, inicial).
RetoEncadena tus tres funciones para responder a una pregunta compuesta sobre el catálogo.

Checkpoint · fin de la sesión 8

  • Lees y escribes funciones flecha con y sin llaves.
  • Entiendes que una función puede guardarse y pasarse.
  • Has escrito tu propia versión de map y de filter.
  • Sabes qué es un callback.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué devuelve (n) => n * 2?
  2. ¿Y (n) => { n * 2 }?
  3. ¿Qué es un callback?
Ver respuestas

1 · El doble de n: con una sola expresión, el retorno es implícito.

2 · undefined: al poner llaves hace falta un return explícito. Es un fallo muy habitual.

3 · Una función que se pasa a otra para que la llame cuando corresponda.