En diseño reutilizas continuamente: estilos de párrafo, componentes, símbolos. En programación, lo que se reutiliza son las funciones: bloques de código con nombre que hacen una tarea concreta y que puedes usar tantas veces como quieras.

function saludar() {
  console.log("¡Hola!");
}

saludar();   // ¡Hola!
saludar();   // ¡Hola!

• Declarar (function nombre() { … }) solo define la función; no la ejecuta.
• Llamar (nombre()) la ejecuta. Los paréntesis son obligatorios.

Nombra las funciones con un verbo que diga qué hacen: calcularEscala, dibujarCirculo, elegirColor.

Las funciones útiles reciben datos (parámetros) y devuelven un resultado (return):

function calcularInterlineado(tamano, proporcion) {
  return tamano * proporcion;
}

const interlineado = calcularInterlineado(18, 1.5);   // 27
console.log(calcularInterlineado(16, 1.4));           // 22.4

• tamano y proporcion son parámetros: nombres que la función usa por dentro.
• 18 y 1.5 son los argumentos: los valores reales de esa llamada.
• return devuelve el resultado a quien llamó y termina la función: lo que haya debajo no se ejecuta.

Diferencia clave: console.log muestra un valor; return lo devuelve para que el programa lo siga usando. Una función que calcula algo debe devolverlo; ya decidirás fuera si lo muestras, lo guardas o lo pintas.

Los parámetros pueden tener valor por defecto:

function escala(base, proporcion = 1.25, pasos = 5) {
  const tamanos = [];
  let medida = base;
  for (let i = 0; i < pasos; i++) {
    tamanos.push(Math.round(medida * 100) / 100);
    medida *= proporcion;
  }
  return tamanos;
}

escala(16);          // [16, 20, 25, 31.25, 39.06]
escala(16, 1.5, 3);  // [16, 24, 36]

(tamanos es un array, una lista de valores: lo verás en la lección Arrays y objetos.)

Una función puede devolver resultados distintos según los datos. Así se encapsula una decisión que usarás muchas veces:

Las variables declaradas dentro de una función (o de cualquier bloque { }) solo existen ahí dentro:

function area(ancho, alto) {
  const resultado = ancho * alto;
  return resultado;
}

area(3, 4);            // 12
console.log(resultado); // ReferenceError: resultado is not defined

Es una ventaja: cada función tiene sus propias variables y no se pisan unas a otras. Evita depender de variables de fuera; pasa lo que necesites como parámetro.

¿Recuerdas el generador de carteles de la lección Algoritmos, pensar paso a paso? Cada parte es una función pequeña:

function elegirAlAzar(lista) {
  return lista[Math.floor(Math.random() * lista.length)];
}

function generarCartel() {
  const fondo = elegirAlAzar(["#1d3557", "#e63946", "#f1faee"]);
  const texto = fondo === "#f1faee" ? "#1d3557" : "#f1faee";
  return { fondo, texto };
}

Una buena función hace una sola cosa, tiene un nombre que lo dice y cabe en la pantalla sin desplazarse.

• Olvidar los paréntesis al llamar: saludar (sin ()) no ejecuta nada.
• Olvidar el return: la función calcula, pero devuelve undefined.
• Escribir código después de return y esperar que se ejecute.
• Pasar los argumentos en otro orden: escala(1.25, 16) no es lo mismo que escala(16, 1.25). El orden de los argumentos sigue el de los parámetros.
• Usar fuera de la función una variable declarada dentro.