Funciones: agrupar instrucciones — Aprende en JICA LABS

Una función es un conjunto de instrucciones al que le pones nombre. La escribes una vez y la llamas cuando la necesites.

Ya usaste una: console.log() es una función que alguien escribió por ti.

Fíjate en dos momentos distintos: definirla (escribir la receta) y llamarla (cocinarla). Definirla sola no hace nada.

<script>
  // 1. Definir: esto solo la guarda, no la ejecuta
  function saludar() {
    console.log("¡Hola!");
    console.log("Bienvenido a JICA LABS");
  }

  // 2. Llamar: acá sí pasa algo. Los paréntesis son la orden.
  saludar();
  saludar();
</script>

Una función que siempre hace exactamente lo mismo sirve poco. Lo potente es pasarle información para que se adapte.

Esos datos van entre los paréntesis y se llaman parámetros. Dentro de la función funcionan como variables normales.

<script>
  function saludar(nombre) {
    console.log("¡Hola, " + nombre + "!");
  }

  saludar("Joaco");
  saludar("María");
  saludar("quien sea");
</script>

Una función puede recibir varios parámetros, separados por comas:

<script>
  function presentar(nombre, edad, ciudad) {
    console.log(nombre + ", " + edad + " años, de " + ciudad);
  }

  presentar("Joaco", 28, "Santiago");
  presentar("Ana", 34, "Valparaíso");
</script>

Hasta ahora las funciones mostraban cosas. Pero lo más útil es que calculen algo y te lo devuelvan para que tú decidas qué hacer con el resultado.

Eso se hace con return.

<script>
  function sumar(a, b) {
    return a + b;      // devuelve el resultado
  }

  let total = sumar(3, 5);     // total ahora vale 8
  console.log(total);

  // Y como devuelve un valor, se puede usar directamente
  console.log(sumar(10, 20));
  console.log(sumar(sumar(1, 2), 4));   // funciones dentro de funciones
</script>

Un detalle importante: return termina la función ahí mismo. Lo que venga después no se ejecuta nunca.

<script>
  function revisarEdad(edad) {
    if (edad < 0) {
      return "Eso no es una edad válida";   // sale de inmediato
    }

    if (edad >= 18) {
      return "Mayor de edad";
    } else {
      return "Menor de edad";
    }
  }

  console.log(revisarEdad(25));
  console.log(revisarEdad(12));
  console.log(revisarEdad(-4));
</script>

Tres razones muy concretas:

No te repites. Si algo se hace en cinco lugares y hay que corregirlo, lo arreglas en un solo sitio.
Se entiende mejor. Leer calcularPuntaje() dice más que veinte líneas de cuentas.
Se prueba por partes. Si algo falla, sabes en cuál función mirar.

Compara estas dos formas de hacer lo mismo:

<script>
  // SIN función: la misma cuenta repetida tres veces
  console.log("Jugador 1: " + (10 * 3 + 50));
  console.log("Jugador 2: " + (7 * 3 + 50));
  console.log("Jugador 3: " + (12 * 3 + 50));

  console.log("---");

  // CON función: la regla vive en un solo lugar
  function puntaje(aciertos) {
    return aciertos * 3 + 50;
  }

  console.log("Jugador 1: " + puntaje(10));
  console.log("Jugador 2: " + puntaje(7));
  console.log("Jugador 3: " + puntaje(12));
</script>

Variables para recordar. Decisiones para elegir. Bucles para repetir. Funciones para organizar.

Con esas cuatro ideas está construido absolutamente todo el software que has usado en tu vida. En serio: lo demás son variantes, herramientas y mucha práctica.

Ahora viene la parte entretenida: ponerlo en pantalla.

Funciones

Functions