5 Ways to print arrays to the browser console window in javascript?

5 Ways to print arrays to the browser console window in javascript?

This tutorial is about how to display an array of JavaScript objects to console logs for debugging. It also includes how to print primitive values to the console.

Multiple ways we can print an array of objects to the console

Javascript has console object, which has the following things used for printing any type of data.

  • console.log
  • console.dir
  • console.table

For example, if an array of objects(primitive) is passed to console.log, It prints [object, object], but not helpful for debugging.

let employees = [
  { id: 1, name: "abc" },
  {
    id: 2,
    name: "franc",
  },
];
console.log(employees);

Outputs

[object, object]

Next, Let’s see how we can print an array of objects to the console.

How to print an array of primitive types in javascript

This example shows how to print an array of primitives like numbers, and strings.

Multiple ways we can print an array of primitive values to the console.

using for-of loop

The following example iterates an array using a for-of loop and prints it.

  • Array of strings is created inline using square brackets
  • print the array at once using console.log, prints - [ ‘one’, ‘two’, ‘three’ ]
  • Used for-of loop to iterate each element, print each using console statements
let stringArray = ["one", "two", "three"];
console.log(stringArray); //["one", "two", "three"]
for (let str of stringArray) {
  console.log(str);
}

Output:

["one", "two", "three"]
one;
two;
three;

using forEach with a callback function

forEach is a method that takes a callback function as a parameter. It iterates each element, applies a callback function to each element, and prints the element.

let stringArray = ["one", "two", "three"];

stringArray.forEach(function (str) {
  console.log(str);
});

Object keys with the map method

Object is a class in javascript that has the keys method accepts a string array, and returns an array of strings of enumerable properties. Pass the result array to the map method, which takes a callback function as a parameter, prints the element

Object.keys(stringArray).map((str) => console.log(stringArray[str]));

This example prints an array of objects into the console.

An array can contain multiple objects. Each object contains key and value pairs enclosed in .

There are multiple ways we can display object arrays.

SON.stringfy method

Using JSON.stringfy is used to print the object in json string format. JSON is available in every browser.

let employees = [
  { id: 1, name: "kiran" },
  {
    id: 2,
    name: "franc",
  },
];
console.log(employees);
console.log(JSON.stringify(employees));

Output

[
  { id: 1, name: "kiran" },
  { id: 2, name: "franc" },
][({ id: 1, name: "kiran" }, { id: 2, name: "franc" })];

Use console.table method

console object has a table method introduced in the latest javascript.

It prints a beautiful table format with each object in an array representing each row.

It supports all browsers, and also nodes introduced since the V10+ version.

let employees = [
  { id: 1, name: "kiran" },
  {
    id: 2,
    name: "franc",
  },
];
console.table(employees);

Output

┌─────────┬────┬─────────┐
│ (index) │ id │  name   │
├─────────┼────┼─────────┤
│    0    │ 1  │ 'kiran' │
│    1    │ 2  │ 'franc' │
└─────────┴────┴─────────┘

Conclusion

Printing arrays results in an object, this will not help for developer to inspect or debug the object values. To summarize, this example covers multiple ways to print an array into the console.