{

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, has 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, 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 are 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 callback function

each method in array iterate 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, 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 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 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 node introduced since 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.