Funciones

Escribe una vez function square(n) { return n * n; }, y square(4) da 16, square(9) da 81, y así con cualquier número que le pases.

Ponerle nombre a un trabajo

Ya has usado funciones escritas por otras personas: console.log, Math.round y toUpperCase son funciones. Una función es un bloque de código con nombre que hace un trabajo. La defines una vez y luego la llamas, por su nombre, tantas veces como quieras. Las funciones evitan copiar las mismas líneas de un lado a otro, y te permiten pensar un programa en piezas más grandes: "calcula la propina y luego divide la cuenta" en lugar de una larga lista de operaciones.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // muestra Hello, Ana!
console.log(greet("Ji"));    // muestra Hello, Ji!

La definición empieza con la palabra clave function, luego el nombre de la función y luego una lista de parámetros entre paréntesis. Un parámetro es una variable que recibe un valor cuando se llama a la función; aquí es name. El cuerpo, entre llaves, hace el trabajo. Cuando llamas a greet("Ana"), el valor "Ana", llamado argumento, se coloca en el parámetro name y se ejecuta el cuerpo.

return devuelve un valor

La palabra clave return termina la función y envía un valor de vuelta al lugar donde se llamó. La llamada greet("Ana") es una expresión, y su valor es lo que se devolvió. Por eso puede ir dentro de console.log, o dentro de un cálculo, o guardarse en una variable: const msg = greet("Ana");.

Devolver un valor e imprimirlo son cosas distintas, y quienes empiezan suelen confundirlas. Una función que solo llama a console.log muestra algo en la pantalla, pero no devuelve nada. Su llamada se evalúa a undefined, así que no puedes usar el resultado en un cálculo. Como regla, deja que las funciones devuelvan resultados y que el código que las llama decida si imprimirlos.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // muestra 50
addPrint(2, 3);      // imprime 5, pero no devuelve nada que se pueda usar

return también detiene la función de inmediato. Las líneas que vienen después en el mismo camino no se ejecutan. Esto permite tratar pronto los casos especiales: if (n < 0) return "negative"; al principio de una función, con el caso normal escrito debajo.

Varios parámetros y valores predeterminados

Una función puede tener varios parámetros, separados por comas, y los argumentos se emparejan en orden: en add(2, 3), a es 2 y b es 3. Si una llamada omite un argumento, ese parámetro es undefined. Puedes darle a un parámetro un valor predeterminado que se usa cuando no se pasa nada: function tip(bill, rate = 0.15) usa 0.15 a menos que quien llama dé otra tasa.

Funciones flecha

El JavaScript moderno también tiene una forma más corta de escribir funciones pequeñas, la función flecha. const square = (n) => n * n; significa lo mismo que la función square del principio. Cuando el cuerpo es una sola expresión, su valor se devuelve automáticamente, sin llaves y sin la palabra return. Verás funciones flecha por todas partes en el código moderno.

Lo de dentro se queda dentro

Los parámetros y las variables declaradas dentro de una función solo existen dentro de ella. Esto se llama ámbito (scope). Dos funciones distintas pueden tener cada una una variable llamada total sin estorbarse, y el código de fuera de una función no puede ver sus variables privadas. Una función puede leer variables declaradas fuera de ella, pero las funciones más limpias reciben todo lo que necesitan por sus parámetros y entregan todo con return, así puedes entenderlas por sí solas.