📅 Mar, 3 Dic 2024 ⏲️ ~ 4 minutos Iniciación

Qué son y qué tipos de parámetros de función hay en JavaScript

Los parámetros son variables que se declaran en la definición de una función y que actúan como “contenedores” para valores que se pasan a esa función.

Esto permite que las funciones sean mucho más re aprovechables y versátiles, que si únicamente fueran capaces de hacer siempre lo mismo.

La sintaxis básica de una función con parámetros es la siguiente:

function nombreFuncion(parametro1, parametro2) {
    // Cuerpo de la función
}

Veamos un ejemplo sencillo,

function sumar(a, b) {
    return a + b;
}

let resultado = sumar(5, 3); // resultado será 8

En este caso,

a y b son los parámetros de la función sumar.
Cuando llamamos a sumar(5, 3), estamos pasando los valores 5 y 3 como argumentos a la función.

Tipos de parámetros en JavaScript

En JavaScript, los parámetros pueden adoptar diferentes formas según cómo los definamos. Vamos a ver algunos de los tipos de parámetros más importantes.

Parámetros posicionales

Los parámetros posicionales son los más comunes. Son aquellos que se definen en el orden en que se espera que se pasen al invocar la función.

La función asigna automáticamente los argumentos pasados a estos parámetros en el orden especificado.

function presentarPersona(nombre, edad) {
    console.log(`Hola, me llamo ${nombre} y tengo ${edad} años.`);
}

presentarPersona("Juan", 30); // Salida: Hola, me llamo Juan y tengo 30 años.

Parámetros por defecto

Los parámetros por defecto nos permiten definir valores predeterminados para los parámetros de una función.

Si no se pasa un argumento para un parámetro en particular, se usará el valor por defecto undefined.

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

saludar(); // Salida: Hola, invitado!
saludar("María"); // Salida: Hola, María!

En este caso, si no proporcionamos un nombre al llamar a saludar, el parámetro nombre tomará el valor "invitado".

Parámetros REST

Los parámetros REST permiten a una función recibir un número indefinido de argumentos como un array.

Se definen usando tres puntos (...) antes del nombre del parámetro.

function sumarTodo(...numeros) {
    return numeros.reduce((acumulador, numero) => acumulador + numero, 0);
}

console.log(sumarTodo(1, 2, 3)); // Salida: 6
console.log(sumarTodo(10, 20, 30, 40)); // Salida: 100

En este ejemplo, numeros se convierte en un array que contiene todos los argumentos pasados a la función.

Parámetros destructurados

Los parámetros desestructurados nos permiten descomponer objetos o arrays en parámetros individuales (esto es útil para trabajar con objetos en funciones)

Por ejemplo, podemos destructurar objetos

function mostrarDatos({ nombre, edad }) {
    console.log(`Nombre: ${nombre}, Edad: ${edad}`);
}

const persona = { nombre: "Luis", edad: 30 };
mostrarDatos(persona); // Salida: Nombre: Luis, Edad: 30

O destructurar Arrays.

function mostrarColores([color1, color2]) {
    console.log(`Primer color: ${color1}, Segundo color: ${color2}`);
}

const colores = ["Rojo", "Azul"];
mostrarColores(colores); // Salida: Primer color: Rojo, Segundo color: Azul

Llamar a la función con más o menos argumentos

En JavaScript cuando llamas a una función y pasas más o menos parámetros de los que la función espera, el lenguaje no lanza un error automáticamente, sino que maneja esta situación de forma flexible.

Veamos qué sucede en ambos casos.

Argumentos de menos

Si no proporcionas un valor para un parámetro esperado, ese parámetro tendrá automáticamente el valor undefined.

function saludar(nombre, edad) {
  console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años.`);
}

saludar("Luis"); 
// Imprime: Hola, mi nombre es Luis y tengo undefined años.

Argumentos de más

Cuando proporcionas más argumentos de los que la función tiene definidos como parámetros, los valores extra no se asignan a ningún parámetro.

function sumar(a, b) {
  return a + b;
}

console.log(sumar(2, 3, 4, 5)); 
// Imprime: 5 (ignora los valores extra 4 y 5).

Esto sucede porque JavaScript no obliga a que todos los parámetros estén definidos al llamar a una función.

Esto es una peculiaridad de JavaScript. ¿Es esto una cagada o una virtud? Os lo dejo decidir a vosotros (yo voto un poco 50/50% 😅).

Ejemplos prácticos

Vamos a ver algunos ejemplos prácticos de cómo estos tipos de parámetros pueden ser aplicados en situaciones reales.

Imaginemos que estamos desarrollando una función para calcular precios con descuentos. Usaremos parámetros por defecto y parámetros rest:

function calcularPrecio(precioBase, ...descuentos) {
    let totalDescuento = descuentos.reduce((acumulador, descuento) => acumulador + descuento, 0);
    return precioBase - totalDescuento;
}

console.log(calcularPrecio(100, 10, 5)); // Salida: 85

En una aplicación, es común manejar configuraciones que pueden tener valores predeterminados. Aquí se utiliza desestructuración y parámetros por defecto:

function configurarApp({ tema = "claro", idioma = "es" } = {}) {
    console.log(`Configuración: Tema - ${tema}, Idioma - ${idioma}`);
}

configurarApp(); // Salida: Configuración: Tema - claro, Idioma - es
configurarApp({ tema: "oscuro" }); // Salida: Configuración: Tema - oscuro, Idioma - es