Imprimir objetos en JavaScript

1. Utilice el método console.log() para imprimir objetos en JavaScript
2. Utilice el método console.dir() para imprimir objetos en JavaScript
3. Diferencia entre console.log() y console.dir() en JavaScript
4. Utilice el método JSON.stringify() para imprimir objetos en JavaScript
5. Conclusión

La función print es una de las principales funciones de JavaScript. En este artículo, aprenderá técnicas comunes y sencillas para imprimir objetos en JavaScript.

La función print en JavaScript muestra o imprime el contenido de un archivo JavaScript. Puede ser una propiedad de objeto o una matriz.

Hay varias formas de imprimir objetos en JavaScript.

Utilice el método console.log() para imprimir objetos en JavaScript

La función console.log() es una forma común de imprimir un objeto en JavaScript. Esta función mostrará/imprimirá el argumento en una consola web y luego se puede obtener una cadena como resultado.

Sintaxis:

console.log(object);

Vamos a crear una matriz llamada matriz que contenga valores: Sam y Roger y un objeto llamado coche que contenga propiedades de objeto como tipo y modelo. Luego podemos asignar valores a esas propiedades como Ford y Mustang.

Como se muestra a continuación, podemos imprimir la matriz y el objeto usando la función console.log().

Código de ejemplo:

const array = ['Sam', 'Roger'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);

Después de ejecutar este código, la matriz y el objeto se muestran en formato de cadena.

Producción:

Por ejemplo, en el siguiente código, el objeto coche tiene dos propiedades de objeto: tipo y modelo. Se ha utilizado la función console.log() para imprimir esas propiedades.

Código de ejemplo:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type);
console.log(car.model);

Como resultado se obtuvo el tipo de coche Ford y el modelo Mustang.

Producción:

Además, puedes imprimir los valores en una sola línea usando la función console.log().

Código de ejemplo:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type, ',', car.model);

El código anterior proporciona el resultado a continuación.

Producción:

Utilice el método console.dir() para imprimir objetos en JavaScript

La función console.dir() es otra forma de imprimir objetos en JavaScript. Con esto, el usuario puede imprimir las propiedades de un objeto específico como un listado jerárquico, también conocido como listado interactivo.

Puede ver las propiedades del objeto haciendo clic en el triángulo desplegable.

Sintaxis:

console.dir(object);

Tomemos el ejemplo anterior. Como se muestra a continuación, puede usar la función console.dir() para imprimir las propiedades del objeto.

Aquí, no es necesario especificar el objeto coche ya que es el único objeto en el código.

Código de ejemplo:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.dir(car);

Como resultado, podemos adquirir el objeto en la consola con un triángulo desplegable. Después de hacer clic en él, podemos ver los objetos secundarios de la siguiente manera.

Producción:

Diferencia entre console.log() y console.dir() en JavaScript

La principal diferencia entre console.log() y console.dir() es que la función console.log() nos da una representación toString del objeto y la función console.dir() nos da una lista interactiva del objeto JavaScript y sus propiedades. Tomemos un ejemplo.

Se declara un array con los valores Ford, Toyota y BMW, y se declara el objeto coche con las propiedades tipo y modelo.

Tanto la matriz como el objeto se muestran mediante la función console.log() y la función console.dir(). Como resultado de las dos primeras funciones console.log(), podemos ver sus formatos toString.

Código de ejemplo:

const array = ['Ford', 'Toyota', 'BMW'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);
console.dir(array);
console.dir(car);

Producción:

Utilice el método JSON.stringify() para imprimir objetos en JavaScript

Al considerar el desarrollo web, JSON se usa para transformar datos de un servidor web y datos a un servidor web. Al transferir los datos, estos deben llegar al servidor web en formato de cadena; de lo contrario, los errores comenzarán a ocurrir.

Teniendo esto en cuenta, también debemos convertir los objetos en JavaScript en formato de cadena antes de enviarlos a la consola. Para lograr esto, JavaScript proporciona la función JSON.stringify().

A través de esta función, los objetos se convertirán en formato de cadena y luego se enviarán al servidor con éxito.

Sintaxis:

JSON.stringify(object);

Agreguemos HP como un nuevo atributo al objeto anterior car. HP se refiere a la potencia del coche.

Además, HP es un número que tiene 460 como valor. El objeto automóvil no puede analizarse en la consola sin convertirse en una cadena porque HP es numérico.

Entonces, convirtámoslo en una cadena usando la función JSON.stringify().

Primero, agregue una nueva propiedad al objeto como HP y asigne 460 como su valor, y luego use la función JSON.stringify() para convertir el objeto del automóvil en una cadena. Asigne la función JSON.stringify() a una nueva variable (carString) e imprima la nueva variable usando la función console.log().

El código es el siguiente.

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

let carString = JSON.stringify(car);
console.log(carString);

Además, puede hacer esto sin declarar una nueva variable haciendo que la función JSON.stringify() sea el argumento de la función console.log().

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

console.log(JSON.stringify(car));

El resultado en ambos sentidos es una cadena del objeto pero en formato JSON.

Producción:

Conclusión

Usando los métodos anteriores, está claro que podemos imprimir un objeto en JavaScript. Hay algunos métodos más, como console.table() y Object.entries(), en los que podemos mostrar objetos en JavaScript, pero los métodos discutidos aquí son los más comunes y frecuentes.