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 talks 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. There are many ways we can print the javascript array into the console.

In javascript, We have console object, which has the following things used for printing

  • console log
  • console.dir
  • console.table

if you have an array with either objects or primitives, printed using console.log, it always gives [object, object] that does not help debug.

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

Outputs

[object,object]

Let’s see an example for printing arrays in javascript

How to print an array of primitive types in javascript

In this, we have an array of primitives like numbers, and strings.

We can do it in multiple ways using javascript loops and object methods.

using for-of loop

The following example explains various things.

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

Output is

one;
two;
three;

using forEach with a callback function

each method in the array iterated with each element is applied with a callback function.

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

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

Object keys with the map method

An object is a class in javascript which has the keys method accepts a string array, and returns an array of strings of enumerable properties. callback in the map is called for each element.

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

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

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" })];

using the console.table

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 give an object, an object which does not help debug. It covers multiple ways to print an array into the console.