5 Ways to print arrays to the browser console window in javascript?
- Admin
- Sep 20, 2023
- 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]));
Print an array of objects into the console in javascript
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.