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.

console.log(PARAM1,PARAM2,...)
  • `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.

console.log("Selam","Poftut.com")
//Output will be Selam Poftut.com

sitename="poftut.com";

console.log(sitename);
//Output will be poftut.com

username="ismail";

console.log(username);
//Output will be ismail

age=35;

exist=false;

console.log(age);
//Output will be 35

console.log(exist);
//Output will be false
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.

console.log("poftut.com");
//Otput will be poftut.com

console.log("poftut.com","ismail baydan");
//Otput will be poftut.com ismail baydan

console.log("poftut.com","ismail baydan","ahmet ali");
//Otput will be poftut.com ismail baydan ahmet ali

console.log("poftut.com","ismail baydan","ahmet ali","Elif ecrin");
//Otput will be poftut.com ismail baydan ahmet ali Elif ecrin

console.log("poftut.com","ismail baydan","ahmet ali",9);
//Otput will be poftut.com ismail baydan ahmet ali 9
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.

console.log(0)
//Output will be 0

console.log(10)
//Output will be 10

console.log(101)
//Output will be 101

console.log(101.5)
//Output will be 101.5

console.log(-101.5)
//Output will be -101.5

console.log(-101.5987654321)
//Output will be -101.5987654321

console.log(-101.5987654321123456789)
//Output will be -101.59876543211234
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.

console.log('i')
//Output will be i

console.log('i','s');
//Output will be  i s

console.log('i','s','m');
//Output will be  i s m

console.log('i','s','m','a');
//Output will be i s m a

console.log('i','s','m','a','i');
//Output will be  i s m a i

console.log('i','s','m','a','i','l');
//Output will be i s m a i l
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.

names=["ismail"];
console.log(names);
//Output will be ["ismail"]

names=["ismail","elif"];
console.log(names);
//Output will be ["ismail", "elif"]

names=["ismail","elif","ahmet"];
console.log(names);
//Output will be ["ismail", "elif", "ahmet"]

numbers=[1,2,3,4];
console.log(numbers);
//Output will be [1, 2, 3, 4]

myarr=["ismail","ahmet",1,2,3];
console.log(myarr);
//Output will be ["ismail", "ahmet", 1, 2, 3]
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.

var names = { firstname : "İsmail", lastname : "Baydan" };

console.log(names);

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(JSON.parse(JSON.stringify(obj)));

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.

names=["ismail","elif","ahmet"];
console.dir(names);

["ismail", "elif", "ahmet"] numbers=[1,2,3,4];
console.dir(numbers);

myarr=["ismail","ahmet",1,2,3];
console.dir(myarr);
console.log() vs console.dir()
console.log() vs console.dir()

Leave a Comment