How To Print Multiple Objects In Javascript

In this tutorial, we are going to learn how to print multiple objects in JavaScript. Whether you are debugging or developing an application, the ability to print objects is invaluable.

We will look into various methods to achieve this, such as using console.log() and JSON.stringify() functions in JavaScript.

Step 1: Using console.log()

The most common way to print objects in JavaScript is by using the console.log() method. This method accepts multiple arguments separated by a comma, which means you can pass multiple objects to it for printing. Here’s an example:

1
2
3
4
const object1 = {name: 'John', age: 30};
const object2 = {name: 'Jane', age: 28};
 
console.log(object1, object2);

Output:

{ name: 'John', age: 30 } { name: 'Jane', age: 28 }

Step 2: Using JSON.stringify()

Another way to print objects is by using the JSON.stringify() method. This method converts a JavaScript object or value to a JSON string. You can use it with console.log() to display multiple objects nicely formatted on the console. Here’s an example:

1
2
3
4
const object3 = {name: 'Alice', age: 25};
const object4 = {name: 'Bob', age: 27};
 
console.log(JSON.stringify(object3, null, 2), JSON.stringify(object4, null, 2));

Output:

{
    "name": "Alice",
    "age": 25
} {
"name": "Bob",
"age": 27
}

The second and third parameters in the JSON.stringify() method control the formatting:

  • Replacer (second parameter): A function that alters the behavior of stringification or an array of specific properties
  • Space (third parameter): A numeric value or string that controls the indenting of the resulting JSON string

In our example, we have set the replacer parameter to null and the space parameter to 2, which results in nicely formatted JSON objects.

Step 3: Using Template Literals

You can also print multiple objects using template literals. Template literals are string literals that allow embedded expressions. Here’s an example of using template literals with console.log():

1
2
3
4
const object5 = {name: 'Charlie', age: 31};
const object6 = {name: 'Diana', age: 29};
 
console.log(`${JSON.stringify(object5, null, 2)}\n${JSON.stringify(object6, null, 2)}`);

Output:

{
"name": "Charlie",
"age": 31
}
{
"name": "Diana",
"age": 29
}

In the above code, we have used the template literal (backtick) syntax to print both objects separated by a newline character.

Full code:

1
2
3
4
5
6
7
8
9
10
11
const object1 = {name: 'John', age: 30};
const object2 = {name: 'Jane', age: 28};
console.log(object1, object2);
 
const object3 = {name: 'Alice', age: 25};
const object4 = {name: 'Bob', age: 27};
console.log(JSON.stringify(object3, null, 2), JSON.stringify(object4, null, 2));
 
const object5 = {name: 'Charlie', age: 31};
const object6 = {name: 'Diana', age: 29};
console.log(`${JSON.stringify(object5, null, 2)}\n${JSON.stringify(object6, null, 2)}`);

Output:

{ name: 'John', age: 30 } { name: 'Jane', age: 28 }
{
"name": "Alice",
"age": 25
} {
"name": "Bob",
"age": 27
}
{
"name": "Charlie",
"age": 31
}
{
"name": "Diana",
"age": 29
}

Conclusion

In this tutorial, we have learned how to print multiple objects in JavaScript using different methods such as console.log(), JSON.stringify(), and template literals. These methods are helpful for debugging, visualizing, and formatting the output of your JavaScript code. Choose the appropriate method that suits your requirement and provides the desired output format.