Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 7 · Semana 3

Funciones

Hoy · Hoja de ruta

  1. 1. Aprende: Qué es una función, qué son parámetros y retorno, y qué es el ámbito.
  2. 2. Haz: Convierte el código de la semana pasada en funciones reutilizables.
  3. 3. Comprueba: Cada función devuelve un valor y no imprime nada.

Antes de empezar · 5 minutos, sin apuntes

  1. En tu código de la semana pasada, ¿qué trozo has escrito más de una vez?
  2. Si mañana cambia el porcentaje de IVA, ¿cuántos sitios tendrías que tocar?
  3. ¿Qué es «devolver» un valor?

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.

Una función devuelve; no imprime

Una función que hace console.log en lugar de return solo sirve para lo que estás haciendo hoy. La que devuelve un valor sirve para imprimirlo, para sumarlo, para pintarlo en la UD4 y para enviarlo al servidor en la UD6.

Regla del módulo: las funciones calculan y devuelven; imprimir es cosa de quien las llama.

Valores por defecto y número de argumentos

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.

Funciones pequeñas, con un 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.

Tarea 7 · Refactoriza en funciones

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

  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.
Objetivo mínimoCuatro funciones que devuelven, probadas una a una.
Si lo tienesEscribe una función que reciba otra función como parámetro y aplíquela a una lista.
RetoReduce tu programa principal a cinco líneas que solo llamen a funciones.

Checkpoint · fin de la sesión 7

  • Tus funciones devuelven valores y no imprimen.
  • Sabes qué ocurre si llamas con menos argumentos.
  • Explicas por qué una variable de dentro no se ve desde fuera.
  • Cada función hace una sola cosa.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué devuelve una función que no tiene return?
  2. ¿Por qué preferimos devolver a imprimir?
  3. ¿Qué es un parámetro por defecto?
Ver respuestas

1 · undefined.

2 · Porque el valor devuelto se puede reutilizar: imprimir es solo una de las cosas que se pueden hacer con él.

3 · Un valor que toma el parámetro cuando quien llama no lo proporciona.