Funciones y depuración

Tres horas. Media hora para entender qué es una función, qué significa que una función sea un valor y cómo se para un programa para mirar dentro, y dos horas y media convirtiendo tu código en piezas reutilizables y reparando programas rotos.

Se explica

25 minutos · conceptos y demostración

Dos ideas grandes y una herramienta. Las ideas: una función devuelve en lugar de imprimir, y una función es un valor que se puede guardar y pasar. La herramienta: parar el programa en una línea y mirar todas las variables a la vez.

Declarar y llamar

function calcularIva(base, tipo) {
  return base * (1 + tipo);
}

const conIva = calcularIva(89.9, 0.21);

Tres piezas: el nombre, que dice qué hace; los parámetros, que son lo que necesita; y el retorno, que es lo que produce.

function calcularIva(base, tipo = 0.21) {
  return base * (1 + tipo);
}

calcularIva(100);        // 121
calcularIva(100, 0.10);  // 110

JavaScript no protesta si llamas con menos argumentos de los declarados: el que falta vale undefined, y el cálculo acaba en NaN. Los valores por defecto evitan la mitad de esos casos.

Ámbito: dónde vive cada variable

const iva = 0.21;                 // global del módulo

function total(base) {
  const impuestos = base * iva;   // ve el de fuera
  return base + impuestos;
}

console.log(impuestos);           // ReferenceError: no existe aquí

Lo declarado dentro de una función solo existe dentro. Lo de fuera se ve desde dentro. Esa restricción es deseable: si todo fuera global, dos funciones que emplean i interferirían entre sí.

Ámbito de bloque

let y const viven dentro de las llaves donde se declaran, incluidas las de un if o un for. Es otra razón para no usar var, que se escapa del bloque.

Las funciones, además, se quieren pequeñas y con un solo cometido:

// Difícil de probar y de reutilizar
function procesar(carrito) { /* 60 líneas */ }

// Tres funciones que se leen y se prueban por separado
function calcularSubtotal(carrito) { }
function aplicarDescuento(subtotal) { }
function calcularEnvio(importe) { }

Una señal fiable: si al describir qué hace una función necesitas la palabra «y» dos veces, probablemente son dos funciones.

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 sesión 4. Una función puede guardarse:

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]

Ahí 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».

Los cuatro tipos de error

Los tres primeros los encuentra el navegador. El cuarto solo lo encuentras tú, y es el que de verdad importa.

Parar el programa y mirar dentro

console.log te dice el valor en un punto. Un punto de interrupción te deja parar el programa y mirarlo todo a la vez.

También puedes escribir debugger; en el código: con DevTools abierto, el programa se detiene en esa línea.

Se trabaja

150 minutos · práctica sobre tu propio proyecto y sobre código ajeno

Los dos primeros pasos convierten tu código en piezas. Los tres últimos lo someten a lo que de verdad pasa en un trabajo: reparar lo que escribió otro, y dejar puesta la comprobación que lo habría avisado.

Paso 1 · Refactoriza en funciones · 35 min

Sobre tu solución de la sesión 2:

1. Extrae calcularSubtotal, aplicarDescuento y calcularEnvio.
2. Que ninguna imprima: todas devuelven.
3. Escribe una función formatearPrecio(valor) que devuelva el texto con dos decimales y el símbolo del euro.
4. Añade valores por defecto a los parámetros que los admitan.
5. Comprueba cada función por separado con tres entradas distintas.

Antes de continuar: ninguna de tus funciones contiene un console.log, y cada una se puede probar sola sin ejecutar el resto del programa.

Paso 2 · Funciones que reciben funciones · 40 min

1. Reescribe tres de tus funciones del paso 1 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.
6. Encadena filtrarPor y aplicarATodos para responder a una pregunta compuesta sobre tu catálogo.

Conserva estas tres funciones: en la sesión 4 las compararás con map, filter y reduce, y la comparación solo funciona si las has escrito antes.

Paso 3 · Tres programas rotos · 40 min

Es el trabajo central de la sesión. Recibirás tres ficheros con un fallo cada uno: uno de referencia, uno de tipo y uno lógico. Para cada uno:

1. Escribe qué debería hacer el programa.
2. Ejecútalo y anota qué hace en realidad.
3. Localiza con un punto de interrupción la primera línea donde el valor deja de ser el esperado.
4. Explica la causa antes de corregir.
5. Corrige con el cambio más pequeño posible.

El tercero es el que cuenta: no muestra ningún error y devuelve un número. Ahí no hay mensaje que leer, solo el método.

console.log(producto);            // lo normal
console.table(productos);         // una lista de objetos, en tabla
console.warn("Stock bajo");       // aviso
console.error("Precio inválido"); // error
console.log({ subtotal, envio, total });   // nombre y valor de cada uno

Paso 4 · La comprobación que lo habría detectado · 20 min

Vuelve sobre los tres programas del paso anterior. Para cada uno, añade una comprobación que hubiera hecho visible el fallo en el momento de producirse, en lugar de mucho después.

Un criterio para escribirlas: la comprobación debe fallar ruidosamente. Un aviso que se pierde entre cincuenta líneas de consola no sirve; uno que detiene el cálculo y dice qué dato era, sí.

Aplica después la misma idea a tu propio código: pon esa comprobación en la función donde entra el dato, no donde aparece el síntoma.

Paso 5 · Reduce tu programa principal · 15 min

Deja el cuerpo principal de main.js en cinco líneas o menos, que solo llamen a funciones. Todo lo demás vive dentro de ellas.

Si no te caben en cinco, no sigas dividiendo por dividir: mira qué función hace dos cosas y sepárala. Después lee las cinco líneas en voz alta. Deberían sonar como el enunciado del problema.

Ampliación si has completado el trabajo

Primero termina y comprueba los cinco pasos. El primer reto es de depuración y se puede cronometrar; el segundo prepara la sesión 4.

Reto 1 · Rompe tu propio código

Haz una copia de tu programa e introduce tres fallos sutiles, uno de cada tipo:

• uno de referencia que no salte hasta que se cumple cierta condición;
• uno de tipo que solo aparezca con un dato concreto;
• uno lógico que no produzca ningún error y devuelva un número ligeramente equivocado.

Guarda aparte la solución. Intercámbialo con un compañero y cronometrad cuánto tarda cada uno en encontrar los tres. Al terminar:

1. ¿Cuál costó más? Casi siempre el lógico, y la diferencia de tiempo suele ser de un orden de magnitud.
2. ¿Encontró la persona la causa, o solo el síntoma? Comprobadlo preguntando qué pasaría con otro dato distinto.
3. ¿Qué comprobación, puesta en el sitio correcto, habría reducido el tiempo de búsqueda a cero?
4. Anota qué técnica usó que tú no habías usado.

Reto 2 · Escribe reducir y demuestra que lo demás sobra

En el paso 2 escribiste aplicarATodos, filtrarPor y contarSi. Escribe ahora una cuarta función, más general que las tres:

function reducir(lista, combinar, inicial) {
  // recorre la lista acumulando un resultado
}

1. Escríbela y pruébala sumando una lista de precios.
2. Úsala para calcular el máximo de una lista, sin comparar con Math.max.
3. Ahora la parte interesante: reescribe aplicarATodos usando reducir. La función que combinas devuelve una lista, no un número.
4. Reescribe también filtrarPor y contarSi con reducir.
5. Explica en tres líneas qué significa que las tres se puedan escribir con la cuarta, y por qué aun así seguimos usando las tres por separado en código real.

La semana que viene aparecerán map, filter y reduce con esos mismos nombres. Haber escrito las cuatro a mano es la diferencia entre usarlas y entenderlas.

Cierre

5 minutos · comprobación y recuerdo