JavaScript console.log() Function Tutorial with Examples – POFTUT

JavaScript console.log() Function Tutorial with Examples

HTML DOM  provides the console object in order to use some auxiliary functions related to the browser. console.log() is one of the useful functions where it will simply print given data, integer, variable, string, JSON to the browser console.

console.log() Syntax

console.log() function has very simple syntax where it accepts single or multiple parameters to print their data to the browser console.

  • PARAM is used to provide the parameter which type can be anything where its data will be logged to the browser console.

console.log() Function Use Cases

console.log() function provides a lot of powerful use cases to make developer life easier. Here we will list some of the most popular them.

  • Debugging the provided function or variable in real-time and an easy way.
  • Printing some error and warning related data about the web application
  • Providing a hidden user interface for experienced users from the console.

Print A Variable To The JavaScript Console

We will start with simple examples where we will print some variables to the browser console. These variable types will be different like string, integer bool etc.

Print A Variable To The JavaScript Console

Print A Variable To The JavaScript Console

Print String To The JavaScript Console

One of the most used examples of console.log() function is printing or displaying strings in the browser JavaScript console. We will provide single or multiple strings in different ways and formats to the console.

LEARN MORE  How To Open and Use JavaScript Console In Google Chrome?

Print String To The JavaScript Console

Print String To The JavaScript Console

Print Number/Integer To The JavaScript Console

We can also print numbers, integers, floating-point numbers by using the console.log() function.

Print Number/Integer To The JavaScript Console

Print Number/Integer To The JavaScript Console

Print Char To The JavaScript Console

String variables consist of characters where it is depicted as character data type. We can also print the chars to the browser console like below.

LEARN MORE  JavaScript Console Object and Functions Tutorial with Examples

Print Char To The JavaScript Console

Print Char To The JavaScript Console

Print Array To The JavaScript Console

Arrays are used to store multiple values like a list. We can also print the array contents to the browser console with the  console.log() function. The array elements can be same type of different types.

Print Array To The JavaScript Console

Print Array To The JavaScript Console

Print JSON Data To The JavaScript Console

JSON is a popular data type or structure in order to store different types of data. We can also print the JSON type data to the browser console without any special operation just providing the JSON object name to the console.log() function.

LEARN MORE  How To Open and Use JavaScript Console In Google Chrome?

Print Object To The JavaScript Console

We can also print some object data to the browser console. But there is a trick where using some formatting and parsing function about JSON will make things cleaner. We can use the following example to print object with console.log().

console.log() vs console.dir()

console.dir() function provides similar functions to the  console.log(). console.dir() also prints the given data to the console. The difference between console.log() and console.dir() is the console.dir() function prints data as more formatted way like JSON-like tree but the console.log() function prints given data HTML-like tree to the browser console.

console.log() vs console.dir()

console.log() vs console.dir()

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)