¿Cómo pasar objetos como parámetros en JavaScript? Ejemplos!

¿Qué significa pasar objetos como parámetros en JS? Básicamente, se trata de enviar toda la información necesaria a una función en forma de objeto, aprovechando su estructura flexible. ¿Para qué sirve? Simplifica el manejo de datos complejos y hace que el código sea más claro. Aprende la sintaxis correcta y cómo aplicarla con un ejemplo práctico que llevará tus habilidades de programación al siguiente nivel.

1. ¿Que significa pasar objetos como parámetros?

Primero veamos estos conceptos.

1.1. ¿Qué son los objetos en JS?

Los objetos en JavaScript son una estructura de datos que permite almacenar múltiples valores relacionados en una sola entidad. Estos valores se representan como pares clave-valor, donde las claves (también llamadas propiedades) son cadenas, y los valores pueden ser de cualquier tipo, incluidos otros objetos o funciones.

1.2. ¿Qué son los parámetros?

Los parámetros son variables que se definen en la declaración de una función y que permiten a esa función recibir información o valores cuando es invocada. Los valores pasados a la función se llaman argumentos. (Más info en este link sobre ¿Qué son los parámetros en funciones JS?)

1.3. ¿Que es pasar objetos como parámetros?

Significa enviar un objeto a una función como argumento cuando la función es invocada. Esto permite trabajar directamente con los datos encapsulados dentro del objeto y realizar operaciones sobre ellos dentro de la función.

Veamos este supuesto:

Imagina que tienes una función que realiza una tarea específica, como calcular el área de un círculo. Para que esta función pueda realizar su trabajo, necesitas proporcionarle la información necesaria, en este caso, el radio del círculo. Esta información que le proporcionas a la función se llama parámetro.

Hasta aquí todo normal, ¿cierto?

Lo interesante es que en JavaScript, los parámetros no solo pueden ser valores simples como números o cadenas de texto, sino también objetos completos. Un objeto, en programación, es una colección de propiedades (llaves) y valores. Por ejemplo, un objeto que representa un círculo podría tener las propiedades:

• radio: El valor numérico del radio.
• color: El color del círculo (una cadena de texto).
• centro: Otro objeto que representa las coordenadas del centro del círculo.

1.4. Ejemplo práctico de objeto como parámetro:

function calcularArea(circulo) {
  return Math.PI * circulo.radio * circulo.radio;
}

const miCirculo = {
  radio: 5,
  color: "rojo"
};

const area = calcularArea(miCirculo);
console.log(area); // Imprimirá aproximadamente 78.54
Lenguaje del código: JavaScript (javascript)

A continuación dejamos una explicación de la secuencia del proceso sobre como el objeto de este ejemplo se pasa como parámetros a la función, y el resultado que se obtiene:

1. Definición de la función:
   • La función calcularArea toma un parámetro llamado circulo.
   • Accede a la propiedad radio del objeto circulo para calcular el área de un círculo.
2. Creación del objeto: const miCirculo = { radio: 5, color: "rojo" };
   • Se define el objeto miCirculo con dos propiedades:
     • radio: 5.
     • color: «rojo».
3. Llamada a la función: const area = calcularArea(miCirculo);
   • Se pasa el objeto miCirculo como argumento a la función calcularArea.
   • Dentro de la función, circulo.radio se refiere a miCirculo.radio, que tiene el valor 5.
4. Cálculo del área:
   • La función calcula el área.
5. Asignación del resultado:
   • El valor calculado (78.54) se asigna a la variable area.
6. Salida del resultado: console.log(area);
   • Muestra el valor de area en la consola: 78.54.

1.5. ¿Qué sucede cuando pasas un objeto como parámetro?

Cuando pasas un objeto a una función, en realidad estás pasando una referencia al objeto. Esto significa que cualquier cambio que se haga al objeto dentro de la función también afectará al objeto original.

¡IMPORTANTE!

• Paso por referencia: Recuerda que los objetos se pasan por referencia, lo que significa que si modificas el objeto dentro de la función, estarás modificando el objeto original.
• Clonación de objetos: Si quieres evitar modificar el objeto original, puedes crear una copia del objeto antes de pasarlo a la función.

2. ¿Cómo pasar objetos como parámetros? Paso a paso:

PASO 1. Crea un objeto:

• Define las propiedades: Un objeto es como una caja que contiene diferentes propiedades (llaves) y sus valores correspondientes. Por ejemplo, para representar un círculo, podrías crear un objeto así:

const miCirculo = {
  radio: 5,
  color: "rojo",
  centro: {
    x: 10,
    y: 20
  }
};
Lenguaje del código: JavaScript (javascript)

• Anida objetos (opcional): Observa que la propiedad centro es otro objeto, lo que te permite crear estructuras de datos más complejas.

PASO 2. Define una función que acepte un objeto como parámetro:

• Especifica el parámetro: En la definición de la función, indica que esperas recibir un objeto como entrada. Por ejemplo, para calcular el área de un círculo:

function calcularArea(circulo) {
  return Math.PI * circulo.radio * circulo.radio;
}
Lenguaje del código: JavaScript (javascript)

• Accede a las propiedades: Dentro de la función, puedes acceder a las propiedades del objeto pasado como parámetro utilizando la notación de punto (.) o la notación de corchetes ([]).

PASO 3. Llama a la función pasando el objeto:

• Invoca la función: Simplemente pasa el objeto que creaste como argumento de la función:

const resultado = calcularArea(miCirculo);
console.log(resultado); // Imprimirá el área del círculo
Lenguaje del código: JavaScript (javascript)

EJEMPLO COMPLETO:

// Crear un objeto que representa un rectángulo
const miRectangulo = {
  base: 10,
  altura: 5
};

// Función para calcular el área de un rectángulo
function calcularAreaRectangulo(rectangulo) {
  return rectangulo.base * rectangulo.altura;
}

// Llamar a la función y mostrar el resultado
const areaRectangulo = calcularAreaRectangulo(miRectangulo);
console.log(areaRectangulo); // Imprimirá 50Lenguaje del código: JavaScript (javascript)

3. Preguntas frecuentes y resumen sobre cómo pasar objetos como parámetros en JS.