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 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 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 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 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 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);
