Introduction

Hey folks, I hope that you must have read my Day 12 Article on #30DaysOfJs. In case, if you haven't then make sure you give it a read by clicking here.

Console Object Methods

In this article, we'll cover console and console object methods which are important to work with JavaScript while developing a FullStack Application.

We use console object methods to show output in the browser console and document.write to show output on the browser document(view port).

Both methods are used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we want to interact with DOM try using JavaScript.

In addition to the famous, console.log() method, the console provides other methods.

• console.log()- We use console.log() to show output on the browser console. We can substitute values and also we can style the logging output using %c.

For Example-

console.log('30 Days of JavaScript');

// Output -->
// 30 Days of JavaScript

• console.warn()- We use console.warn() to give warning on browser. For instance to inform or warn deprecation of version of a package or bad practices.

For Example-

console.warn('WARNING');

• console.error()- We use console.error() method to show an error message.

For Example-

console.error('This is an error message');

• console.table()- We use console.table() to display data as a table on the console. It takes one input which must be an array or an object.

For Example 1-

const names = ['Shivank', 'Rohan', 'Akshit', 'John']
console.table(names)

For Example 2-

const users = [
  {
    name: 'Shivank',
    title: 'Programmer',
    country: 'India',
    city: 'New Delhi',
    age: 19
  },
  {
    name: 'Rohit',
    title: 'Teacher',
    country: 'Canada',
    city: 'BC',
    age: 29
  },
  {
    name: 'Vijay',
    title: 'Engineer',
    country: 'India',
    city: 'Kolkata',
    age: 35
  }
]
console.table(users);

• console.time()- We use console.time() to keep a track of the time for an entire operation. When we write console.timeEnd() the browser returns time in milliseconds, since it was started.

For Example-

const countries = [
  ['India', 'France'],
  ['Japan', 'USA'],
  ['Canada', 'Australia']
]

console.time('Regular for loop');

// Output -->
// India France
// Japan USA
// Canada Australia
// Regular for loop: 0.34716796875ms

• console.info()- We use console.info() to display information message on the browser console.

For Example-

console.info('Hey, my name is Shivank');

• console.assert()- We write console.assert() to write an error message in the browser console if the assertion is false.

console.assert(4 > 3, '4 is greater than 3');

// Output --> No Result

• console.count()- We use console.count() to count the number of times a function has been called.

For Example-

const func = () => {
  console.count('Func called');
}
func()
func()
func()

// Output -->
// Func called: 1
// Func called: 2
// Func called: 3

• console.clear()- We use console.clear() to clean the browser console.

I hope that you must have found this article quite helpful. If yes, then do give a read to some of my other articles!

Who knows you might become a great programmer 🤔!