Funciones en JavaScript

Una función es un bloque de código con nombre que puedes ejecutar cuando quieras, las veces que quieras. Sirve para no repetir código y para dividir un programa grande en piezas pequeñas.

Declarar y llamar

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

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

Escribir la función solo la define. No hace nada hasta que la llamas con su nombre y paréntesis.

Parámetros: datos de entrada

function saludar(nombre) {
  console.log(`¡Hola, ${nombre}!`);
}

saludar("Ana");  // ¡Hola, Ana!
saludar("Luis"); // ¡Hola, Luis!

• nombre es el parámetro: una variable que solo existe dentro de la función.
• "Ana" es el argumento: el valor concreto que le pasas al llamarla.

Puede haber varios, separados por comas:

function sumar(a, b) {
  console.log(a + b);
}
sumar(3, 4); // 7

return: devolver un resultado

Muchas veces no quieres que la función muestre algo, sino que te dé un resultado para usarlo después:

function areaRectangulo(base, altura) {
  return base * altura;
}

const area = areaRectangulo(5, 3);  // area vale 15
console.log(area * 2);              // 30

• return devuelve el valor y termina la función. Lo que haya debajo no se ejecuta.
• Una función sin return devuelve undefined.

Valores por defecto

Si no se pasa un argumento, el parámetro vale undefined. Puedes darle un valor por defecto:

function saludar(nombre = "desconocido") {
  return `Hola, ${nombre}`;
}

saludar();       // "Hola, desconocido"
saludar("Eva");  // "Hola, Eva"

Funciones flecha

Una forma más corta de escribir funciones, muy usada en JavaScript moderno:

const doble = (n) => n * 2;
const sumar = (a, b) => a + b;
const saludar = () => console.log("Hola");

Si el cuerpo es una sola expresión, se devuelve sola, sin escribir return ni llaves. Si necesitas varias líneas, usa llaves y return:

const precioFinal = (precio) => {
  const conIva = precio * 1.21;
  return Math.round(conIva * 100) / 100;
};

Las funciones son valores

En JavaScript una función es un valor más, como un número o un texto. Se puede guardar en una variable, meter en un array o pasar como argumento a otra función. Por eso se dice que el lenguaje tiene funciones de primera clase.

Una función que se pasa a otra para que esta la llame cuando le convenga se llama callback:

function procesar(valor, esValido) {
  if (esValido(valor)) {
    console.log("OK:", valor);
  } else {
    console.log("Revisa este valor:", valor);
  }
}

function esCorto(texto) {
  return texto.length < 8;
}

procesar("hola", esCorto);            // función con nombre
procesar("contraseña", (t) => t.length >= 8);  // función flecha en el momento

Fíjate: se pasa esCorto, sin paréntesis. Con paréntesis (esCorto()) estarías llamando a la función y pasando su resultado, no la función.

Ya has visto callbacks sin saberlo: en addEventListener("click", saludar) o en array.map((n) => n * 2).

Detalles que conviene saber

Los argumentos que faltan valen undefined y los que sobran se ignoran. JavaScript no se queja:

function sumar(a, b) {
  return a + b;
}
sumar(2, 3);     // 5
sumar(2);        // NaN (2 + undefined)
sumar(2, 3, 4);  // 5 (el 4 se ignora)

Si necesitas aceptar cualquier número de argumentos, usa los parámetros rest (...):

function sumarTodos(...numeros) {
  return numeros.reduce((total, n) => total + n, 0);
}
sumarTodos(1, 2, 3, 4); // 10

(En código antiguo verás el objeto arguments para esto. Los parámetros rest son la forma moderna.)

Los valores primitivos se pasan por copia. Si la función cambia un parámetro que contiene un número o un texto, la variable original no cambia:

function incrementar(n) {
  n = n + 1;
  return n;
}
let x = 3;
incrementar(x);  // devuelve 4
console.log(x);  // 3: x no ha cambiado

Con objetos y arrays es distinto: la función recibe una referencia al mismo objeto, así que si modifica su contenido, el cambio se ve fuera:

function agregarTarea(lista) {
  lista.push("nueva tarea");
}
const tareas = ["estudiar"];
agregarTarea(tareas);
console.log(tareas); // ["estudiar", "nueva tarea"]

Las declaraciones function se pueden usar antes de escribirlas (hoisting); las funciones flecha guardadas en const, no. Lo verás en la lección de ámbito.

Una función, una tarea

Una buena función hace una sola cosa y su nombre dice cuál: calcularTotal, validarEmail, mostrarError. Si al describirla necesitas decir “y”, seguramente deberían ser dos funciones.

function saludar(nombre = "mundo") {
  return "Hola, " + nombre;
}
saludar();

boton.addEventListener("click", saludar());