JavaScript Print Array to Console means: It’s a process for displaying the array elements using the console.log() method for debugging or logging purposes. This method is provided by the browser’s developer tools.
Table of Contents
Developer tools help developers critically understand the state of JavaScript variables or expressions at various levels of their code.
Printing arrays on the console is a common practice for JavaScript developers because arrays are the most common data types that we need to use every day.
An array contains a list of similar data type values and can be accessed by an array indexer. Developers need to print the elements of an array for value-checking or debugging purposes. It’s very important, especially whenever you are writing and testing a complex data structure.
10 Reasons Why JavaScript Print Array to Console is Essential
It’s very essential to know why JavaScript Print Array to Console is required. In the top line, we are using the console.log() JS method for value-checking and debugging purposes. But it offers a lot more benefits. In this section, we are going to list down 10 essential reasons below:
- Enhances debugging by reading the dev tools log
- Easy error tracking.
- Improves code readability.
- It helps to learn easily.
- Faster the development process.
- Assists in verifying data integrity.
- Facilitates quick testing of array manipulations.
- Supports the development of complex algorithms.
- Helps in identifying unexpected behavior.
- Increases overall coding efficiency.
JavaScript Print Array to Console: 4 Most Easy Ways
No. 1: Print a Specific Array Element to the Console
<script>
// defining an array
var courses = ['HTML', 'CSS', 'JavaScript'];
// printing the third element of an array
// array index no starts from zero
var secondCourse = courses[2];
console.log(secondCourse); // Output: 'JavaScript'
// you can log other elements
// by mentioning their index no
// such as for CSS index no is 1 and for HTML 0
// javascript print array to console
</script>
No. 2: Print all Array Elements to the Console Using a For Loop
<script>
// defining an array
var courses = ['HTML', 'CSS', 'JavaScript'];
// printing all elements of an array
// using a for loop
for (let i = 0; i < courses.length; i++) {
console.log(courses[i]);
}
// javascript print array to console
</script>
No. 3: Print an Entire Array to the Console Using a For Loop
<script>
// defining an array
var courses = ['HTML', 'CSS', 'JavaScript'];
// printing an entire array
// to the console
console.log(courses);
console.log('Course List: ' + courses);
</script>Output: Print Array in JavaScript
Code Explanation: JavaScript Print Array to Console
If you look at the console log for the line console.log(courses), you will find that a list of the three elements of the “courses” array appears in the console within a bracket, and elements are marked with a single quote.
Whenever you use the + operator to concatenate the array with a string in the line console.log(‘Course List: ‘ + courses), then we get a comma-separated element list within the console log. Why?
Because here, JS internally converted the array to a string using the .toString() method. This method converts every array element to a string and places a comma between elements.
No. 4: Print Multiple Array Elements Using the slice() Method
The JS built-in slice() method always returns a new array that contains a range portion of the original array based on the starting and ending indexes mentioned as arguments. The starting index and the ending index work like a range. This means you cannot randomly print elements from the array.
If you need to print random array elements based on some business logic, then you have two options. Either use a for loop or use the filter() method.
The syntax of the slice() method takes two arguments. The starting index is inclusive, and the ending index is exclusive.
Now look at the below example:
<script>
// defining an array
var courses = ['HTML', 'CSS', 'JavaScript'];
// slicing the array from 1,2
// slicing the array from 1,3
// print the array to the console
var newCourseList1=courses.slice(1,2);
var newCourseList2=courses.slice(1,3);
console.log('Course List: ' + newCourseList1);
console.log('Course List: ' + newCourseList2);
</script>Output: JavaScript Print Array to Console
JavaScript Print Array to Console: 4 Critical Ways
In this section, we are going to discuss JavaScript print array of objects into the browser’s console. An array of objects means these are also elements but contain a name-value pair rather than a primitive JS value. More clearly, each element holds a property and a value.
No. 1: Print Array of Objects Using Brackets Notation
<script>
// Array of objects
var objCourse = [
{
name: 'HTML',
duration: 10,
faculty: 'Teacher 1'
},
{
name: 'CSS',
duration: 15,
faculty: 'Teacher 1'
},
{
name: 'Javascript',
duration: 20,
faculty: 'Teacher 3'
}
];
console.log("Print 3rd Object of the objCourse Array in console using the [] notation:");
console.log(objCourse[2]);
</script>Output: Print Array in JavaScript
No. 2: Print Array of Objects using dot Notation
By using method, we are able to print any specific property of an object.
<script>
// Array of objects
var objCourse = [
{
name: 'CSS',
duration: 15,
faculty: 'Teacher 1'
},
{
name: 'Javascript',
duration: 20,
faculty: 'Teacher 3'
}
];
console.log("Print an object specific property value:");
console.log(objCourse[1].name);
console.log(objCourse[1].duration);
console.log(objCourse[1].faculty);
</script>Output: JS Print Array
No. 3: Print All Array of Objects Using the for..in Loop
<script>
// Array of objects
var objCourse = [
{
name: 'HTML',
duration: 10,
faculty: 'Teacher 1'
},
{
name: 'CSS',
duration: 15,
faculty: 'Teacher 2'
},
{
name: 'Javascript',
duration: 20,
faculty: 'Teacher 3'
}
];
console.log("Print every array object Using the for..in loop");
for (let key in objCourse) {
// print array of objects using console.log
console.log(objCourse[key]);
}
</script>Output: JS Print Array
No. 4: Print an Array of Objects using the console.table() Static Method
The console.table() static method is used to print array object elements in a tabular format.
This static method takes one mandatory argument, which is the array, and one optional parameter, which is columns.
It prints data in the console log as a table. Each element in the array is considered a row in the table.
<script>
// Array of objects
var objCourse = [
{
name: 'HTML',
duration: 10,
faculty: 'Teacher 1'
},
{
name: 'CSS',
duration: 15,
faculty: 'Teacher 2'
},
{
name: 'Javascript',
duration: 20,
faculty: 'Teacher 3'
}
];
console.log("Print array of objects Using console.table() static method");
console.log("First column will represent array indexes");
console.table(objCourse);
</script>Output: JavaScript Array Print
How to Check Console Logs
Console logs are part of Chrome developer tools. You can open the console logs in three ways:
- Use Ctrl+Shift+J (Windows or Linux) or Cmd+Opt+J (Mac).
- Go to the “Three Dots Menu Bar” >> More tools >> Developer Tools >> Console Tab
- Right-click on the web page, then click inspect from the action menu, and now select the Console Tab.
Conclusion: JavaScript Array Print Quick Hacks
In this JavaScript Print Array to Console tutorial, we have discussed about eight quick but essential hacks for JavaScript developers. In the first part, we showed four quick hacks to print simple array elements, and in the second part, we also discussed four more hacks to print an array of object elements.
We can display JS array elements in consoloe log through string format as well as in a tabular format, whatever you like. We can also use console.dir() or JSON.stringify() to print array objects into the browser’s console.
🏋️♂️ Discover Code Blocks From 20+ yrs JS Expert
💥 Asp.net C# Developer
🏆 Solution Architect
👨✈️ Database Administrator
📢 Speaker
🎓 MCTS since 2009
Leave a Reply