Parámetros

Nuestra función saludar tiene un problema: solo sabe saludar a Miguel. Para desbloquear todo el potencial de las funciones necesitamos que puedan recibir parámetros, es decir, que su comportamiento cambie según los datos que les pasemos.

Queremos saludar a cualquier persona, así que hacemos que la función acepte un parámetro: el nombre de quien queremos saludar. Va dentro de los paréntesis y, dentro de la función, se usa como si fuera una variable.

function saludar(nombre) {  console.log('Hola ' + nombre)}

Ahora, cada vez que llamemos a la función, podemos pasarle una cadena de texto distinta:

saludar('Miguel') // -> Hola Miguelsaludar('Itziar') // -> Hola Itziarsaludar('Carmen') // -> Hola Carmen

Una sola función y tres resultados diferentes. Parece poca cosa, pero tiene un poder enorme: las funciones son la base de la programación y nos permiten crear programas complejos a partir de pequeñas piezas.

Por ejemplo, para crear una calculadora empezaríamos por las funciones que hacen las operaciones básicas. Cada una necesita dos parámetros: los dos números con los que operar.

function sumar(a, b) {  return a + b}function restar(a, b) {  return a - b}

Y ya podríamos usarlas:

const resultadoSuma = sumar(2, 3)console.log(resultadoSuma) // -> 5const resultadoResta = restar(5, 2)console.log(resultadoResta) // -> 3

Parámetros y argumentos#

Acabas de usar dos cosas que suenan igual pero no lo son. Los parámetros son los nombres que la función declara entre paréntesis para recibir datos. Los argumentos son los valores concretos que le pasas cuando la llamas.

// la función sumar tiene dos parámetros: a y bfunction sumar(a, b) {  return a + b}// cuando llamamos a la función, le pasamos dos argumentos: 2 y 3const resultadoSuma = sumar(2, 3)

Mucha gente confunde los términos y dice parámetro para referirse a los argumentos. Conviene que sepas diferenciarlos, porque son cosas distintas.

Funciones como parámetros#

Hasta ahora hemos pasado textos y números. Pero ¿y si te digo que también puedes pasar una función?

En JavaScript, las funciones son ciudadanos de primera clase (first-class citizens). Esto significa que se pueden tratar como cualquier otro valor: asignarlas a variables, pasarlas como argumentos a otras funciones y devolverlas desde otras funciones.

¿Qué significa "funciones de primera clase"?

Que las funciones son valores como cualquier otro. Igual que pasas un número o un string, puedes pasar una función. Fíjate en el segundo parámetro de procesarUsuario:

function saludar(nombre) {  console.log('¡Hola, ' + nombre + '!')}function despedir(nombre) {  console.log('¡Adiós, ' + nombre + '!')}// Función que recibe OTRA FUNCIÓN como parámetrofunction procesarUsuario(nombre, accion) {  accion(nombre) // Ejecutamos la función que nos pasaron}// Pasamos diferentes funciones como argumentosprocesarUsuario('Ana', saludar) // -> ¡Hola, Ana!procesarUsuario('Luis', despedir) // -> ¡Adiós, Luis!

Ejemplo práctico: Calculadora flexible

Volvamos a la calculadora. En lugar de decidir nosotros la operación, podemos pasarla como parámetro junto a los dos números:

function sumar(a, b) {  return a + b}function multiplicar(a, b) {  return a * b}function restar(a, b) {  return a - b}// Función que recibe una operación como parámetrofunction calcular(num1, num2, operacion) {  const resultado = operacion(num1, num2)  console.log('El resultado es: ' + resultado)  return resultado}// Usamos diferentes operacionescalcular(5, 3, sumar) // -> El resultado es: 8calcular(5, 3, multiplicar) // -> El resultado es: 15calcular(5, 3, restar) // -> El resultado es: 2

Funciones anónimas como parámetros

¿Y si la función solo la vas a usar ahí? Entonces ni siquiera necesitas ponerle nombre. Puedes escribirla directamente en la llamada, como una función anónima:

// Función anónima pasada directamentecalcular(10, 2, function (a, b) {  return a / b})// -> El resultado es: 5// O usando funciones flecha (las veremos más adelante)calcular(4, 3, (a, b) => a ** b) // -> El resultado es: 64 (4 elevado a 3)

¿Por qué es útil esto?

Porque nos permite crear código más flexible y reutilizable. Mira esta función: ella se encarga de repetir, y tú decides qué se repite.

function repetirAccion(veces, accion) {  for (let i = 0; i < veces; i++) {    accion(i)  }}// Diferentes accionesrepetirAccion(3, function (numero) {  console.log('Iteración número: ' + numero)})repetirAccion(5, function (numero) {  console.log('⭐'.repeat(numero + 1))})

Este concepto es fundamental en JavaScript: lo usarás constantemente cuando trabajes con arrays, eventos y programación asíncrona.

El orden de los parámetros importa#

Un error muy común al empezar es olvidar que el orden de los parámetros importa. JavaScript no sabe qué querías pasar: asigna el primer argumento al primer parámetro, el segundo al segundo, y así.

Para verlo, vamos a simular un microondas. Le pasamos el plato, el tiempo y la potencia, y nos devuelve el plato cocinado.

function cocinarMicroondas(plato, tiempo, potencia) {  if (plato === '🐥' && tiempo === 1 && potencia === 5) {    return '🍗'  }  if (plato === '🥚' && tiempo === 2 && potencia === 3) {    return '🍳'  }  return '❌ Plato no soportado'}

Si pasamos los argumentos en el orden correcto, todo va bien:

const resultado = cocinarMicroondas('🐥', 1, 5)console.log(resultado) // -> 🍗

Pero si los cambiamos de orden, nos quedamos sin cena:

const resultado = cocinarMicroondas(1, 5, '🐥')console.log(resultado) // -> '❌ Plato no soportado'

La función espera que el primer parámetro sea el plato, el segundo el tiempo y el tercero la potencia. Aquí plato vale 1, así que ninguna condición se cumple. Si cambiamos el orden, podemos tener comportamientos inesperados o errores, y JavaScript no nos va a avisar.

Más adelante veremos una forma de evitar este tipo de errores.