Parámetros en funciones JavaScript: ¿Qué son? Con ejemplos!

Los parámetros y argumentos en funciones son esenciales para hacer que el código sea flexible y reutilizable. En esta guía, exploraremos qué son, cómo funcionan en distintos contextos y cómo puedes aprovecharlos para personalizar la ejecución de tus funciones. Además, te daremos ejemplos claros y prácticos que harán que entiendas su uso a la perfección. ¡Descubre cómo mejorar tu código con ellos!

1. ¿Qué son los parámetros y argumentos en las funciones en JS?

Los parámetros y argumentos nos ayudarán a estructurar las funciones en JavaScript de manera más precisa y a comunicarnos con claridad en el contexto de la programación.

1.1. ¿Que son los parámetros en las funciones?

1. Los parámetros son como variables de JS definidas en la declaración de la función.
2. Actúan como marcadores de posición para los valores que la función recibirá cuando sea invocada.
3. Los nombres de los parámetros solo tienen significado dentro de la función, y sirven para operar con los datos que se pasen a la función.

1- ¿Qué significa que actúan como marcadores de posición?

Significa que no contienen un valor específico en el momento en que defines la función, sino que simplemente indican dónde se colocarán los valores una vez que la función sea llamada.

2- ¿Qué significa que los nombres de los parámetros solo tienen significado dentro de la función?

Esto significa que esos nombres actúan como variables locales (en el punto 8 ampliamos esta afirmación) exclusivas de esa función y no tienen ningún impacto fuera de ella. En otras palabras, si intentas acceder a ese parámetro (variable) por fuera de la función dará un error!

1.1.1. Ejemplo de declaración de una función con parámetros:

function saludar(nombre, edad) {
    console.log(`Hola, ${nombre}. Tienes ${edad} años.`);
}Lenguaje del código: JavaScript (javascript)

En este caso:

1. nombre y edad son parámetros (variables) de la función saludar.
   • Al declarar la función, no están asignados a ningún valor específico; solo establecen que esta función espera recibir dos valores. (Los recibirá al establecer los argumentos)
2. Actúan como marcadores de posición en: `Hola, ${nombre}. Tienes ${edad} años.`
   • Dentro del bloque de código de la función, se especifica que estos parámetros se posicionarán; ${nombre} después de "Hola, y ${edad} entre Tienes y años. una vez que sea invocada (o sea, una vez que se establezca el argumento y se llame).

1.2. ¿Que son los argumentos en las funciones?

1. Los argumentos son los valores reales que pasamos a la función cuando la invocamos.
2. Estos valores reemplazan a los parámetros durante la ejecución de la función.
3. Los argumentos pueden ser de cualquier tipo de dato de JS: números, strings, objetos, arrays, e incluso otras funciones.
4. Veamos estas definiciones de los argumentos en un ejemplos invocando a la función:

1.2.1. Ejemplo de invocación con los argumentos (continuación del ejemplo del punto 1.1.1.):

saludar("Ana", 25);Lenguaje del código: JavaScript (javascript)

En esta invocación:

• Este código: saludar("Ana", 25); invoca o llama a la función para que se ejecute su cuerpo del código. (ver sintaxis de funciones JS).
  • "Ana" es el argumento (valor de tipo string) que corresponde o reemplaza al parámetro nombre.
  • 25 es el argumento (valor de tipo number) que corresponde o reemplaza al parámetro edad.
  • La función entonces imprimirá: Hola, Ana. Tienes 25 años.

El ejemplo completo con los parámetros y argumentos sería:

function saludar(nombre, edad) {
    console.log(`Hola, ${nombre}. Tienes ${edad} años.`);
}

saludar("Ana", 25);Lenguaje del código: JavaScript (javascript)

¿Qué consideraciones me debo llevar de estas definiciones?

1. Los parámetros son lo que se definen cuando se declara la función, en este caso se definen dos: (nombre, edad).
2. Los argumentos son los valores reales que se pasan a la función cuando se llama (invoca) a la función. Estos valores se asignan a los parámetros de la función, y es con ellos que la función ejecuta su lógica.
   • El argumento "Ana" corresponde al parámetro nombre
   • El argumento 25 corresponde al parámetro edad.

1.3. Resumen de parámetro y argumento en funciones.

Concepto	Descripción
Parámetros	Se definen en la declaración de la función. Son como «variables vacías» que esperan recibir valores.
Argumentos	Son los valores concretos que se proporcionan a la función cuando se llama. Estos valores se asignan a los parámetros correspondientes.

1.4. Características clave de parámetros y argumentos:

1.4.1. Incongruencia en la cantidad de parámetros y argumentos definidos:

JavaScript permite llamar a una función con un número de argumentos diferente al número de parámetros definidos:

• Si se pasan más argumentos de los necesarios, los adicionales se ignoran.
• Si se pasan menos, los parámetros sin valor se definen como undefined.

EJEMPLO:

function multiplicar(a, b) {
  return a * b;
}
console.log(multiplicar(2, 3, 4)); // 6, ignora el tercer argumento
console.log(multiplicar(2));       // NaN, b es `undefined`Lenguaje del código: JavaScript (javascript)

En este ejemplo:

1. El primer console.log():
   • En esta llamada, multiplicar(2, 3, 4) pasa tres argumentos (2, 3, y 4) a la función multiplicar.
   • La función solo tiene dos parámetros (a y b), así que ignora el tercer argumento (4), ya que solo necesita los dos primeros.
   • Aquí, a toma el valor 2, y b toma el valor 3. La función multiplica a y b, devolviendo 6 (es decir, 2 * 3).
   • Por eso, el resultado en la consola es 6.
2. El segundo console.log():
   • En esta llamada, multiplicar(2) solo proporciona un argumento (2), asignándolo a a.
   • Pero no se da ningún valor para b, por lo que b es undefined.
   • Como JavaScript no puede multiplicar un número (2) por undefined, el resultado es NaN (Not a Number).

1.4.2. Tipos de datos distintos y validación:

Los parámetros pueden recibir cualquier tipo de dato (números, cadenas, objetos, funciones, etc.), y JavaScript no obliga a que los argumentos coincidan con un tipo específico.

EJEMPLO:

function mostrarDato(dato) {
  console.log(dato);
}

mostrarDato(42);           // número
mostrarDato("Hola");       // cadena de texto
mostrarDato({ clave: 1 }); // objeto
mostrarDato([1, 2, 3]);    // arrayLenguaje del código: JavaScript (javascript)

En este ejemplo, la función mostrarDato puede recibir y mostrar cualquier tipo de dato sin errores, ya que JavaScript permite este comportamiento sin restricciones. No hay un control automático que obligue a dato a ser un tipo específico.

2. Parámetros con valores predeterminados en funciones.

Definir funciones con parámetros opcionales permite crear funciones flexibles que pueden ejecutarse correctamente incluso si uno o más argumentos no se proporcionan en la invocación.

Esto se logra estableciendo valores predeterminados para los parámetros, asegurando que la función siempre tenga algo que procesar, independientemente de los argumentos pasados.

2.1. ¿Cómo establecer valores predeterminados en parámetros?

En JavaScript, puedes definir valores predeterminados directamente en la declaración de la función usando el signo = después del nombre del parámetro.

Cuando un argumento no se proporciona en la llamada a la función, el parámetro tomará su valor predeterminado, evitando que sea undefined.

EJEMPLO:

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

saludar("Ana"); // "Hola, Ana"
saludar();      // "Hola, Invitado"Lenguaje del código: JavaScript (javascript)

• En este caso, se establece un valor predeterminado ("Invitado") directamente al declara la función saludar.
• Si no se pasa ningún argumento en la invocación, nombre toma el valor "Invitado" automáticamente.

CONCLUSIÓN: Definir parámetros opcionales hace que tus funciones sean mucho más versátiles y adaptables, además de mejorar la experiencia de quienes las usen al reducir la necesidad de pasar siempre todos los argumentos.

3. Tipos de datos que pueden tomar los parámetros.

Cuando llamamos o invocamos a una función, y pasamos valores como argumentos, estos valores en sí son datos, y esos datos se pueden clasificar de diferentes manera:

3.1. Parámetros con valores primitivos:

Los valores primitivos son aquellos que representan un valor simple y no tienen propiedades ni métodos asociados. Estos tipos son inmutables (no pueden cambiar) en JavaScript, lo que significa que si se pasa un valor primitivo como parámetro a una función, la función recibe una copia de ese valor.

¿Y esto que significa? Veámoslo con un ejemplo:

3.1.1. Ejemplo de función con parámetros de tipo primitivo:

function incrementar(numero) {
  numero = numero + 1;
  console.log("Dentro de la función:", numero);
}
let x = 5;
incrementar(x);
console.log("Fuera de la función:", x);Lenguaje del código: JavaScript (javascript)

Resultado:

Dentro de la función: 6
Fuera de la función: 5

En este ejemplo, se toma x como argumento para el parámetro, y x es un número (primitivo) y cuando se pasa como parámetro, la función incrementar trabaja con una copia de x, por lo que el valor original de x permanece sin cambios fuera de la función.

Como vemos en el ejemplo:

1. Cuando invocamos a la función con incrementar(x); se activa el bloque de código de la función y obtenemos como resultado:
   • Dentro de la función: 6
2. Cuando llamamos a la variable x por fuera de la función con console.log("Fuera de la función:", x); obtenemos como resultado el valor independiente de esa variable:
   • Fuera de la función: 5

Los tipos de valores primitivos en JavaScript son:

• Números (Number), como 42 o 3.14.
• Cadenas de texto (String), como "Hola" o "JavaScript".
• Booleanos (Boolean), como true o false.
• Undefined, cuando una variable ha sido declarada pero no inicializada.
• Null, que representa la ausencia intencional de cualquier valor.
• Símbolos (Symbol), que son valores únicos y se suelen usar como identificadores.

3.2. Parámetros con valores de referencia (Objetos y Arrays):

Los objetos y arrays son tipos de datos de referencia. Esto significa que cuando se pasan como parámetros a una función, no se pasa una copia del valor, sino una referencia a la ubicación en memoria del objeto o array original.

Esto permite que las funciones puedan modificar el contenido de un objeto o array directamente, ya que tienen acceso a la referencia del valor original.

Veamos una explicación de cada uno de estos datos de referencia (objetos y arrays) y ejemplos para ampliar la explicación:

3.2.1. Objetos como parámetros:

Al pasar un objeto de JS como parámetro, cualquier cambio realizado en las propiedades del objeto dentro de la función afectará al objeto fuera de la función, ya que ambos puntos de acceso (dentro y fuera de la función) apuntan al mismo objeto.

EJEMPLO:

function agregarPropiedad(obj) {
  obj.nuevaPropiedad = "Valor agregado";
}
let persona = { nombre: "Manuel" };
agregarPropiedad(persona);
console.log(persona); // { nombre: "Manuel", nuevaPropiedad: "Valor agregado" }Lenguaje del código: JavaScript (javascript)

Este ejemplo, da como resultado en la consola:

Object
 nombre: "Manuel"
 nuevaPropiedad: "Valor agregado"Lenguaje del código: JavaScript (javascript)

Explicación de este ejemplo y diferencia con los datos primitivos:

• En este ejemplo, el objeto persona (que pasamos como argumento) fue modificado dentro de la función, y los cambios se reflejan por fuera de ella también. Esto ocurre porque, en JavaScript, los objetos se pasan por referencia, no por valor.
  • Cuando se pasa un objeto como argumento a una función, en realidad se está pasando una referencia al objeto en memoria, lo que permite que la función modifique directamente sus propiedades.
• A diferencia de los tipos de datos primitivos (como números, cadenas y booleanos), que se pasan por valor, las modificaciones realizadas sobre ellos dentro de una función no afectan al valor original fuera de ella.
  • En el caso de los datos primitivos, la función trabaja con una copia del valor, por lo que cualquier cambio dentro de la función se limita a su propio contexto y no afecta al valor original.

3.2.2. Arrays como Parámetros:

De manera similar a los objetos, cuando se pasa un array de JS como parámetro, cualquier cambio realizado en los elementos del array dentro de la función afecta al array fuera de la función.

EJEMPLO:

function agregarElemento(array) {
  array.push("Nuevo elemento");
}
let frutas = ["Manzana", "Banana"];
agregarElemento(frutas);
console.log(frutas); // ["Manzana", "Banana", "Nuevo elemento"]Lenguaje del código: JavaScript (javascript)

Al igual que con los objetos, aquí el array frutas fue modificado dentro de la función agregarElemento al añadir un nuevo elemento, y ese cambio es visible fuera de la función porque el array fue pasado por referencia.

3.3. Importancia del manejo de estos tipos de datos en parámetros:

Entender la diferencia entre pasar por valor (para valores primitivos) y pasar por referencia (para objetos y arrays) es crucial para evitar errores no intencionados en el código.

Si necesitas evitar que una función modifique el objeto o array original, una práctica común es hacer una copia antes de pasarlo como parámetro. Esto se puede hacer usando el spread operator (...) o el método slice() para arrays, y el método Object.assign() o el spread operator para objetos.

4. Parámetros Rest (...args) en funciones JavaScript.

El operador rest (...) en los parámetros de una función permite capturar todos los argumentos adicionales pasados a la función en un array. Esta característica es especialmente útil para situaciones donde no sabemos de antemano cuántos argumentos serán pasados a la función.

4.1. ¿Cómo se establece el operador Rest en el parámetro de la función?

En la declaración de la función, el operador rest se define precediendo el nombre del parámetro con .... Este parámetro se convierte en un array que contendrá todos los argumentos adicionales pasados a la función. Puedes nombrar este parámetro rest como prefieras, pero un nombre común es args.

Solo puede haber un parámetro rest en la declaración de una función. Debe ser el último parámetro en la lista de parámetros, ya que capturará todos los argumentos restantes.

4.2. Sintaxis del operador Rest:

function miFuncion(...otros) {
  // otros es un array que contiene todos los argumentos adicionales
}Lenguaje del código: JavaScript (javascript)

Los tres puntos (...) antes del nombre del parámetro indican que se trata de un parámetro rest. Todos los argumentos adicionales que se pasen a la función después de los parámetros definidos anteriormente serán agrupados en un array y asignados a este parámetro.

4.2. Ejemplo del operador Rest:

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

console.log(sumar(1, 2, 3)); // 6
console.log(sumar(4, 5, 6, 7, 8)); // 30Lenguaje del código: JavaScript (javascript)

Este código utiliza el operador rest (...) para permitir que la función sumar reciba un número variable de argumentos y los procese como un array.

Aquí está el desglose del funcionamiento:

1. Declaración de la función con el operador rest:

function sumar(...numeros) {Lenguaje del código: JavaScript (javascript)

El operador ... delante del parámetro numeros convierte todos los argumentos pasados a la función en un array llamado numeros. Esto permite que sumar pueda recibir una cantidad indefinida de argumentos y almacenarlos en el array numeros.

2. Uso de reduce para sumar todos los elementos:

return numeros.reduce((acumulador, numero) => acumulador + numero, 0);Lenguaje del código: JavaScript (javascript)

En el cuerpo de la función se utiliza el método reduce para iterar sobre el array numeros y sumar sus elementos. Explicación de cada elemento de esta parte de la función:

• reduce toma una función de callback que recibe dos parámetros: acumulador y numero.
• acumulador empieza en 0 (el valor inicial pasado como segundo argumento a reduce).
• En cada iteración, numero representa el elemento actual del array, y acumulador + numero se convierte en el nuevo valor de acumulador.
• Cuando reduce termina, devuelve la suma total de todos los elementos del array numeros.

3. Llamadas a la función y resultados:

console.log(sumar(1, 2, 3)); // 6
console.log(sumar(4, 5, 6, 7, 8)); // 30Lenguaje del código: JavaScript (javascript)

• Primera llamada console.log(sumar(1, 2, 3)); // 6:
  • Se pasa a la función sumar los números 1, 2 y 3.
  • Estos números se almacenan en el array numeros.
  • El método reduce itera sobre el array y suma todos los elementos, obteniendo 6.
• Segunda llamada console.log(sumar(4, 5, 6, 7, 8)); // 30:
  • Se pasa a la función sumar los números 4, 5, 6, 7 y 8.
  • Estos números se almacenan en el array numeros.
  • El método reduce itera sobre el array y suma todos los elementos, obteniendo 30.

Resumen del ejemplo:

El operador rest ... permite que sumar reciba un número indefinido de argumentos, los convierte en un array y luego suma todos sus valores usando reduce. Esto hace que la función sea flexible y pueda manejar cualquier cantidad de números.

5. Parámetros predeterminados con expresiones dinámicas:

Como dijimos en el punto 2, los parámetros predeterminados en JavaScript permiten que una función tenga valores iniciales para sus parámetros cuando estos no se proporcionan durante la llamada.

Ahora bien, podemos establecer expresiones dinámicas como valores predeterminados, al definir valores que no solo son estáticos, sino que pueden ser el resultado de cálculos, condiciones, o incluso el retorno de otras funciones, lo cual amplía las posibilidades de personalización y flexibilidad en la función.

Características claves de estos parámetros predeterminados con expresiones dinámicas

• Los parámetros predeterminados dinámicos se calculan solo si el valor del argumento está ausente o es undefined.
• Estos parámetros pueden incluir expresiones que hagan cálculos, validaciones o llamadas a funciones.
• Esto permite definir valores predeterminados complejos y adaptativos según la lógica interna de la función, en lugar de valores estáticos.

5.1. Ejemplo de expresiones condicionales como valor predeterminado en un parámetro:

Las expresiones condicionales en los parámetros predeterminados permiten establecer valores en función de condiciones específicas, adaptándose al valor de otro parámetro u otras condiciones.

Veamos un ejemplo donde usamos expresiones condicionales en los valores predeterminados de los parámetros para calcular el costo de envío en función del país de destino.

function calcularEnvio(cantidad, pais = 'Argentina', costoEnvio = pais === 'Argentina' ? 500 : 1500) {
    return `Costo de envío a ${pais}: $${costoEnvio}`;
}

console.log(calcularEnvio(3));                  // "Costo de envío a Argentina: $500"
console.log(calcularEnvio(3, 'Brasil'));        // "Costo de envío a Brasil: $1500"
console.log(calcularEnvio(3, 'Chile', 1200));   // "Costo de envío a Chile: $1200"Lenguaje del código: JavaScript (javascript)

Aquí está el desglose y análisis de cómo funciona cada parte del ejemplo:

PASO 1: Se define una función calcularEnvio con 3 parámetros con expresiones condicionales como valores predeterminados:

function calcularEnvio(cantidad, pais = 'Argentina', costoEnvio = pais === 'Argentina' ? 500 : 1500) {Lenguaje del código: JavaScript (javascript)

1. cantidad:
   • Este es el primer parámetro, el cual tomará el primer valor (argumento) que se pase al invocar a la función calcularEnvio, que será igual a la cantidad de productos (en este caso no se utiliza para calcular el envío pero podría usarse para otro cálculo en una función ampliada).
2. pais = 'Argentina':
   • Es el segundo parámetro que tiene un valor predeterminado. Si se pasa un segundo valor (argumento) al invocarse a la función, se tomara ese valor invocado, pero si no se pasa ninguno, se establecerá como predeterminado el valor establecido directamente al declarar la función, o sea, "Argentina".
3. costoEnvio = pais === 'Argentina' ? 500 : 1500:
   • Este parámetro también utiliza una expresión condicional como valor predeterminado. E igual al parámetro anterior, si se pasa un tercer valor (argumento) al invocarse a la función, se tomara ese valor invocado por defecto, pero si no se pasa ninguno, se verifica la lógica de la expresión condicional usado como valor predeterminado al declara la función.
   • Analicemos esta expresión condicional (pais === 'Argentina' ? 500 : 1500): Aquí se usa un operador ternario que verifica si el pais es 'Argentina'.
     • Si es verdadero (si específicamente es Argentina), costoEnvio se establece en 500;
     • Si es falso (si no es Argentina), se establece en 1500.

PASO 2: Se establece el cuerpo del código:

return `Costo de envío a ${pais}: $${costoEnvio}`;Lenguaje del código: JavaScript (javascript)

Este es el mensaje que se reproducirá como resultado según la comprobación de la expresión condicional en los parámetros de la función.

PASO 3: Invocación a la función calcularEnvio y obtención de diferentes resultados.

En este ejemplo proporcionamos tres invocaciones con valor (argumentos) diferentes para obtener diferentes resultado. Analicémoslas:

console.log(calcularEnvio(3));                  // "Costo de envío a Argentina: $500"
console.log(calcularEnvio(3, 'Brasil'));        // "Costo de envío a Brasil: $1500"
console.log(calcularEnvio(3, 'Chile', 1200));   // "Costo de envío a Chile: $1200"Lenguaje del código: JavaScript (javascript)

1. Primera invocación: calcularEnvio(3).
   • cantidad es 3 (no se usa en esta función).
   • pais no se proporciona, así que toma el valor predeterminado 'Argentina'.
   • costoEnvio tampoco se proporciona, por lo que se evalúa la expresión condicional con pais === 'Argentina', lo que resulta en 500.
   • RESULTADO: "Costo de envío a Argentina: $500"
2. Segundo Ejemplo: calcularEnvio(3, 'Brasil')
   • cantidad es 3.
   • pais se establece en 'Brasil', sobrescribiendo el valor predeterminado.
   • costoEnvio no se proporciona, por lo que se evalúa la expresión condicional. Como pais no es 'Argentina', el costo de envío resulta en 1500.
   • RESULTADO: "Costo de envío a Brasil: $1500"
3. Tercer Ejemplo: calcularEnvio(3, 'Chile', 1200):
   • cantidad es 3.
   • pais se establece en 'Chile'.
   • costoEnvio se proporciona directamente como 1200, así que la expresión condicional no se evalúa.
   • RESULTADO: "Costo de envío a Chile: $1200"

RESUMEN DEL EJEMPLO:

1. La función calcularEnvio utiliza una expresión condicional en el valor predeterminado del parámetro costoEnvio.
2. Este valor predeterminado depende del país (pais === 'Argentina' ? 500 : 1500), permitiendo ajustar automáticamente el costo de envío según el país.
3. Si costoEnvio se pasa como argumento, sobrescribe el valor predeterminado sin usar la expresión condicional.

5.2. ¿Que otras expresiones dinámicas podemos usar como valores determinados en los parámetros?

a- Expresiones Condicionales (Operador Ternario)

Puedes usar expresiones condicionales para asignar diferentes valores según una condición.

b- Funciones

Puedes llamar una función para asignar el valor predeterminado en función de la lógica que defina la función.

c- Uso de Otros Parámetros

Un parámetro puede depender de otros parámetros definidos antes en la lista.

d- Operadores Lógicos (OR ||, AND &&)

Puedes usar operadores lógicos para asignar un valor en función de condiciones complejas.

e- Expresiones Matemáticas

Cálculos matemáticos también son válidos para asignar valores predeterminados.

f- Expresiones de Desestructuración

Puedes desestructurar un objeto o array directamente en los parámetros, incluyendo valores predeterminados.

5.3. Ventajas de los parámetros predeterminados dinámicos:

• Flexibilidad: Permiten que la función se adapte a diferentes escenarios sin sobrecargarla de lógica adicional en su cuerpo.
• Menos código repetido: Reduce la necesidad de crear múltiples versiones de funciones o condiciones adicionales para manejar valores faltantes.
• Legibilidad: Centraliza la lógica de valores predeterminados en la propia firma de la función, lo que hace el propósito de cada parámetro más claro.

5.4. Consideraciones finales:

• Orden de los parámetros: Los valores predeterminados deben ir al final para evitar conflictos de valores.
• Evaluación retardada: Los valores predeterminados solo se calculan si el argumento no está definido, lo que optimiza el rendimiento, evitando cálculos innecesarios.
• Compatibilidad: Esta característica es compatible con ES6+, así que en entornos de JavaScript más antiguos puede ser necesario transpilar el código.

6. Desestructuración en parámetros de funciones en JavaScript.

La desestructuración en los parámetros de funciones en JavaScript es una técnica avanzada que permite extraer valores de objetos o arrays directamente en el momento en que se definen los parámetros de la función.

Esta técnica es extremadamente útil para manejar funciones que reciben objetos o arrays como argumentos, permitiendo acceder a valores específicos sin tener que hacer referencias repetitivas a los elementos.

Veamos cómo funciona y sus aplicaciones con más detalle.

6.1. Desestructuración en objetos como parámetros:

Cuando una función recibe un objeto como argumento, es común que solo necesite trabajar con algunas propiedades de ese objeto. La desestructuración permite extraer estas propiedades directamente en los parámetros de la función.

En lugar de escribir obj.propiedad, puedes declarar el nombre de las propiedades dentro de llaves ({ }) directamente en los parámetros.

EJEMPLO:

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

const usuario = {
  nombre: "Manuel",
  edad: 36,
  profesion: "Desarrollador"
};

mostrarUsuario(usuario); // Nombre: Manuel, Edad: 36Lenguaje del código: JavaScript (javascript)

En este ejemplo:

• La función mostrarUsuario recibe un objeto usuario como argumento, con tres propiedades nombre, edad y profesión.
• Pero, solo se extraen las propiedades nombre y edad en la función, ignorando cualquier otra propiedad que tenga el objeto.
• Por ese motivo la función imprime: Nombre: Manuel, Edad: 36

6.2. Desestructuración en arrays como parámetros:

La desestructuración también se puede aplicar cuando los parámetros son arrays. Permite extraer elementos específicos del array directamente en la declaración de la función, para ellos, los debes declara dentro de ([]) directamente en los parámetros.

Esto es especialmente útil cuando necesitas solo los primeros elementos o elementos clave de un array.

EJEMPLO:

function mostrarPrimeros([primerElemento, segundoElemento]) {
  console.log(`Primer elemento: ${primerElemento}`);
  console.log(`Segundo elemento: ${segundoElemento}`);
}

const colores = ["Rojo", "Azul", "Verde"];

mostrarPrimeros(colores);
// Salida:
// Primer elemento: Rojo
// Segundo elemento: AzulLenguaje del código: JavaScript (javascript)

Aquí:

• La función mostrarPrimeros extrae primerElemento y segundoElemento directamente del array colores (que se invoca como argumento) sin tener que hacer referencia a cada índice dentro de la función.

6.3. Ventajas de la desestructuración en parámetros de función:

• Flexibilidad: Puedes establecer valores por defecto y combinar con el operador rest para manejar datos adicionales.
• Simplificación del código: Reduce la necesidad de múltiples declaraciones para acceder a propiedades o elementos específicos.
• Legibilidad: Permite declarar solo las propiedades que necesitas en los parámetros, haciendo el propósito de la función más claro.

7. Operador Spread (...) para parámetros en funciones con JS.

El operador spread (...) en JS permite expandir elementos de un array u objeto en lugares donde se esperan múltiples valores o argumentos. Cuando se usa en el contexto de parámetros de funciones, facilita pasar arrays o colecciones de datos como una lista de argumentos separados, lo cual simplifica el manejo de parámetros múltiples.

6.1. ¿Cómo funciona el operador spread (...) para parámetros en funciones?

El operador spread convierte cada elemento de un array (o cualquier colección iterable) en argumentos individuales al invocar una función, evitando la necesidad de pasar cada valor manualmente.

6.2. ¿Cómo se usa el operador spread?

Se representa con tres puntos (...) y se coloca antes del nombre del array que queremos pasar como argumentos para los parámetros de la función.

Veamos algunos ejemplos concretos:

6.2.1. Ejemplo de uso del operador spread para pasar un array como argumento:

Imagina que tienes un array con varios elementos y deseas pasarlos a una función que espera recibir esos valores como argumentos individuales.

function sumar(x, y, z) {
  return x + y + z;
}

const numeros = [1, 2, 3];

// Aquí se utiliza el operador spread fuera de la función
const resultado = sumar(...numeros); // Equivale a sumar(1, 2, 3)
console.log(resultado); // Imprime: 6Lenguaje del código: JavaScript (javascript)

En este ejemplo:

1. Definimos una función sumar que espera tres argumentos.
2. Creamos un array numeros con los valores que queremos sumar.
3. Al llamar a la función sumar, utilizamos el operador spread (...numeros) para expandir el array numeros en sus elementos individuales (1, 2, 3). Estos elementos se pasan como argumentos a la función sumar.

6.3. Aplicaciones avanzadas del operador spread:

1. Clonar Arrays: const nuevoArray = [...originalArray]
   • El operador spread es ideal para crear copias de arrays sin afectar el array original, permitiendo pasar copias de datos en lugar de referencias directas.
2. Combinación de Arrays: const combinado = [...array1, ...array2, ...array3]
   • Es útil para concatenar arrays sin cambiar los arrays originales, ideal en situaciones donde necesitas unir datos en un solo lugar.
3. Aplicación en Arrays dentro de Objetos:
   • Si la función requiere un array como uno de varios argumentos, el operador spread facilita expandir los elementos al nivel deseado.

8. Scope y Hoisting de parámetros en función con JavaScript.

El scope (ámbito o alcance) y el hoisting (elevación) son conceptos esenciales en JavaScript que afectan cómo los parámetros de una función y sus valores se interpretan, especialmente en funciones anidadas.

8.1. Scope de parámetros en funciones JavaScript

El scope de un parámetro en JavaScript se refiere al área del código en la que este parámetro es accesible. Los parámetros tienen un scope local dentro de la función en la que son declarados, lo que significa que solo pueden ser accedidos dentro de esa función específica y no desde fuera de ella.

EJEMPLO básico de Scope de parámetros:

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

saludar("Manuel"); // Salida: Hola, Manuel
console.log(nombre); // Error: nombre is not definedLenguaje del código: JavaScript (javascript)

Aquí:

• El parámetro nombre tiene un scope local dentro de la función saludar.
• Intentar acceder a nombre fuera de saludar genera un error, ya que está fuera del alcance de su declaración. Como vemos en el ejemplo anterior:
  • saludar("Manuel"); // Por dentro de la función, se puede llamar: Salida: Hola, Manuel
  • console.log(nombre); // Por fuera NO: Error: nombre is not defined

8.1.1. Scope de parámetros en funciones anidadas:

Cuando tienes funciones anidadas (una función dentro de otra), los parámetros de la función externa pueden ser accesibles dentro de la función interna. Esto se debe al concepto de closure en JavaScript, donde una función interna tiene acceso al scope de su función externa.

function externa(mensaje) {
  function interna() {
    console.log(mensaje);
  }
  interna();
}

externa("Hola desde la función externa"); // Salida: Hola desde la función externaLenguaje del código: JavaScript (javascript)

En este ejemplo:

• La función interna accede al parámetro mensaje de externa debido a su alcance.
• Esta relación se conoce como alcance léxico, lo que significa que la función interna siempre tiene acceso a las variables y parámetros de la función que la contiene.

8.1.2. Importancia del Scope de parámetros en funciones complejas:

Cuando trabajas con funciones anidadas, es crucial comprender que los parámetros de una función interna no afectan los parámetros de su función contenedora (externa) y viceversa, a menos que se definan explícitamente.

function externa(valor) {
  function interna(valor) {
    console.log(`Valor dentro de interna: ${valor}`);
  }
  interna(10);
  console.log(`Valor dentro de externa: ${valor}`);
}

externa(20);
// Salida:
// Valor dentro de interna: 10
// Valor dentro de externa: 20Lenguaje del código: JavaScript (javascript)

En este caso:

• Aunque ambas funciones tienen un parámetro llamado valor, cada parámetro pertenece a su propio scope.
• El valor en externa y interna son independientes, lo que evita conflictos y errores de interpretación.

8.2. Hoisting de parámetros en funciones con JS:

El hoisting en JavaScript significa que las declaraciones de variables y funciones se “elevan” al comienzo de su scope durante la fase de compilación. Sin embargo, en el contexto de parámetros de funciones, los parámetros no se ven afectados directamente por el hoisting como ocurre con las variables declaradas dentro del cuerpo de la función.

8.2.1. ¿Y que conflictos potenciales me puede ocasionar este Hoisting en parámetros?:

Si se utiliza var para declarar una variable con el mismo nombre que un parámetro dentro de una función, el valor del parámetro puede quedar sobrescrito dentro del cuerpo de la función, pero esto no afecta el valor original del argumento cuando se pasa a la función:

function demo(valor) {
  console.log(valor); // Salida: 5
  if (!valor) {
    var valor = 10; // Se eleva al inicio del scope de la función
  }
  console.log(valor); // Salida: 10
}

demo(5);Lenguaje del código: JavaScript (javascript)

Aquí:

• La declaración var valor dentro de la función crea una nueva variable valor,
• La declaración var valor se eleva al inicio del scope de la función, causando que el parámetro valor sea redefinido.
• Esto puede ser confuso y conducir a errores inesperados, especialmente en funciones más complejas.

8.3. Scope y Hoisting en funciones con let y const:

Con let y const, se evita el problema de redefinir parámetros. Al declarar variables en el cuerpo de una función con let o const, no se permite redeclararlas si comparten el mismo nombre que un parámetro.

function ejemplo(param) {
  let param = 10; // Error: Identifier 'param' has already been declared
}Lenguaje del código: JavaScript (javascript)

En este caso, intentar declarar param nuevamente con let provoca un error, ya que let y const no permiten redeclaraciones dentro del mismo scope.

8.4. Buenas prácticas para el Scope y Hoisting de parámetros

1. Evitar la Redefinición: Intenta no utilizar el mismo nombre para variables y parámetros dentro del cuerpo de una función.
2. Uso de let y const: Declara variables con let o const dentro de funciones para reducir el riesgo de colisión de nombres y mejorar la legibilidad.
3. Funciones Anidadas: Cuando trabajes con funciones anidadas, ten en cuenta el alcance léxico y cómo los parámetros de la función externa pueden ser accedidos desde la función interna.
4. Evitar var: Siempre que sea posible, evita var, ya que puede causar confusión con el hoisting y la redefinición de parámetros.

9. Validación de parámetros en funciones con JavaScript.

9.1. ¿Que significa la validación de parámetros en funciones con JavaScript?

La validación de parámetros en funciones de JavaScript consiste en verificar que los valores que se pasan a una función como argumentos sean del tipo de dato correcto y cumplan con ciertas condiciones antes de ejecutar el código de la función.

9.2. ¿Por qué es importante esta validación?

1. Prevención de errores:
   • Evita que la función se ejecute con datos incorrectos, lo que podría causar resultados inesperados o incluso bloquear la aplicación.
2. Mejora de la robustez:
   • Hace que el código sea más resistente a errores y más fácil de mantener.
3. Documentación implícita:
   • Clarifica las expectativas de la función en cuanto a los tipos de datos que acepta.

9.3. ¿Cómo se realiza la validación?

Tipos de validaciones de parámetros que podemos realizar:

9.3.1. Validación básica, comprobando el tipo de parámetros:

La validación básica implica comprobar el tipo o la presencia de parámetros en el inicio de la función. Esto se logra mediante condicionales (if) y typeof , que verifican si el tipo o valor de los parámetros cumple con las expectativas.

Ejemplo de validación de tipo:

function sumar(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    console.error('Ambos parámetros deben ser números');
    return null;
  }
  return a + b;
}

console.log(sumar(3, '5')); // Salida: Error en consola y retorna nullLenguaje del código: JavaScript (javascript)

En este ejemplo, la función sumar valida que tanto a como b sean números. Si alguno de ellos no lo es, se muestra un mensaje de error y la función retorna null para indicar un problema.

9.3.2. Validación de valores Nulos o Indefinidos:

Es frecuente que los parámetros reciban valores nulos (null) o indefinidos (undefined). Para manejar estos casos, se puede hacer una verificación y, en su lugar, asignar un valor predeterminado (como explicamos en el punto 2) cuando falte alguno de los argumentos.

9.3.3. Validación avanzada con instanceof y Array.isArray:

Para validar instancias de objetos más específicos, como arrays o instancias de clases, se pueden utilizar instanceof y Array.isArray, asegurando que el parámetro tiene el tipo de dato adecuado antes de ejecutarse.

• instanceof: Determina si un objeto es una instancia de una determinada clase o función constructora.
• Array.isArray(): Verifica si un valor es un array.

EJEMPLO con instanceof:

function crearPersona(nombre, edad) {
  if (!(nombre instanceof String) || !(edad instanceof Number)) {
    throw new TypeError('Los parámetros deben ser de tipo String y Number');
  }
  // Resto de la función
}Lenguaje del código: JavaScript (javascript)

En este ejemplo, se verifica que los parámetros nombre y edad sean instancias de String y Number, respectivamente. Si no lo son, se lanza un error.

EJEMPLO con Array.isArray():

function procesarArray(array) {
  if (!Array.isArray(array)) {
    throw new TypeError('El parámetro debe ser un array');
  }
  // Resto de la función
}Lenguaje del código: JavaScript (javascript)

Aquí se asegura de que el parámetro array sea efectivamente un array.

10. Buena práctica en el uso de parámetro en funciones con JS.

Al declarar funciones, una buena técnica es pasar un objeto como parámetro para mejorar la legibilidad y la mantenibilidad de funciones en JavaScript, especialmente cuando estas funciones requieren múltiples parámetros.

Esto se conoce como el patrón de «parámetros de objeto» y permite que los parámetros sean nombrados, organizados y opcionales sin sobrecargar la función con argumentos posicionales.

10.1. ¿Por qué usar parámetros de objeto?

Imagina una función que recibe varios parámetros. Si la cantidad de parámetros aumenta, el código puede volverse difícil de leer y propenso a errores, especialmente si no está claro qué valor corresponde a cada parámetro:

function crearUsuario(nombre, edad, email, direccion, telefono, activo) {
  // lógica para crear usuario
}Lenguaje del código: JavaScript (javascript)

Al invocar esta función, es fácil confundir el orden de los argumentos, y si hay muchos valores, puede no ser claro qué representa cada uno de ellos.

Al utilizar un objeto, puedes:

• Nombrar explícitamente cada propiedad.
• Evitar el orden estricto de los parámetros.
• Agregar valores opcionales sin afectar el flujo de la función.
• Simplificar la lectura del código y la depuración.

10.2. ¿Cómo implementar parámetros de objeto correctamente?

En lugar de recibir varios parámetros individuales, puedes definir un único parámetro que sea un objeto con propiedades nombradas. Esto hace que el código sea mucho más claro y fácil de usar.

10.2.1. Ejemplo sin parámetros de objeto:

function crearUsuario(nombre, edad, email, direccion, telefono, activo = true) {
  console.log(`Usuario creado: ${nombre}, ${edad} años, ${email}`);
}

crearUsuario('Manuel', 35, '[email protected]', '123 Calle', '555-5555', true);Lenguaje del código: JavaScript (javascript)

10.2.2. Ejemplo con parámetros de objeto:

function crearUsuario({ nombre, edad, email, direccion, telefono, activo = true }) {
  console.log(`Usuario creado: ${nombre}, ${edad} años, ${email}`);
}

crearUsuario({
  nombre: 'Manuel',
  edad: 35,
  email: '[email protected]',
  direccion: '123 Calle',
  telefono: '555-5555'
});Lenguaje del código: JavaScript (javascript)

Al usar parámetros de objeto:

1. No importa el orden de las propiedades al pasar los valores.
2. Es fácil de leer, ya que cada valor está asociado con una clave clara.
3. Es menos probable que se omita un parámetro, ya que se verá en el objeto estructurado.

10.3. Consideraciones y buenas prácticas al pasar un objeto como parámetro:

• Documenta las propiedades esperadas en el objeto si la función se usa en proyectos grandes o compartidos, para que otros desarrolladores sepan qué propiedades incluir.
• Usa parámetros de objeto cuando la función tenga más de tres parámetros o cuando algunos de ellos sean opcionales.
• Evita usar demasiados parámetros en un solo objeto; si se vuelve complejo, considera dividirlo en sub-objetos o simplificar la función.

11. Preguntas frecuentes y resumen sobre parámetros en funciones.