Console in JavaScript
Most popular web browsers, including Firefox, Google Chrome, Safari, etc., provide a set of developer tools that consists of a debugger, console, inspect element, and network activity analyzer. Through these tools, it has become easier to perform any tasks according to the requirements.
In this post, the console in JavaScript is briefly explained with the following learning outcomes:
- How to use the console object in JavaScript
- How various console methods work in JavaScript
How to use the console object in JavaScript?
In JavaScript, a console is an object combined with different methods to perform various functions and get the output on the browser.
Some of the console methods in JavaScript are as follows:
- console.log() method: Output the message to the web console.
- console.Info(): output an informational message to the web console
- console.error(): Displays an error message on the console.
- console.Clear(): Removes everything from the console.
- console.warn(): Displays a warning message.
- console.assert(): Return an error message if the assertion fails.
- console.count(): Return the number of counts called.
- console.table(): Returns data in a tabular format.
- console.Group(): Creates a group inline in the console.
- console.GroupEnd(): End the current group in the console.
- console.Time(): Starts a timer for the console view.
- console.timeEnd(): End the timer and return the result to the console.
In order to provide a better understanding, a few examples are provided.
How does the console.log() method work in JavaScript?
The console.log() method displays the output to the console. Users can input any type inside the log(), such as strings, booleans, arrays, objects, etc. The example code of the console.log() method is given below.
Code:
console.log("welcome to JavaScript") // string
console.log(1); // boolean
console.log([1, 2, 3]); // array inside log
console.log(true); // boolean
console.log(null);
In the above code, the console.log() method is used to print the string, a boolean and an array on the console.
Output:
It is observed that the string, boolean, and array values are printed on the console.
How does the console.info() work in JavaScript?
The console.info() method displays the key information regarding the user in accordance with the needs. Most of the developers used this method for displaying permanent information.
Code:
console.info("This is an information message");
In the above code, a string is passed using the console.info() method.
Output:
In the console window, string output is displayed by using console.info() method.
How does the console.error() method work in JavaScript?
To display the error message, the console.error() method is used. Most of the developers used it for troubleshooting purposes.
The example code of the console.error() method is given as follows.
Code:
console.error('This is a simple error');
The console.error() method executed in the console browser is marked as a string input in the below figure.
Output:
By passing a single argument of string type, the error message is displayed on the console.
How does the console.clear() method work in JavaScript?
The console.clear() method is used for removing all the information from the console browser. Most of the time, it is used at the start of the code to remove all previous information or to display a clean output.
Code:
console.clear();
The console.clear() method is used as input in the console browser.
Output:
Let’s look at the state of the console before applying the console.clear() method.
Now, observe the console after applying the clear() method.
The output figure shows a clear display in the console window using the console.clear() method.
How does the console.warn() method work in JavaScript?
The console.warn() method is used to show the warning message to the console browser. It requires only one argument to display the message. The JavaScript code is as below:
Code:
console.warn('This is a warning.');
A simple warning message is being printed using the warn() method.
Output:
The output shows a warning symbol and the message you entered in the console.warn() method.
How does the console.count() method work in JavaScript?
The console.count() method shows how many times a method has been called. Below is the code for the console.count() method.
Code:
for(let i=1;i<6;i++){
console.count(i);
}
In the above code, the console.count() method is used to count the methods within a loop.
Output:
The figure shows that five counts are called in a for loop using the console.count() method.
How does the console.table() method work in JavaScript?
The console.table() method is used to display objects in the form of a table on the browser console. We made use of the following code to show the usage of the console.table() method.
Code:
The console.table() method is used to represent the data in a tabular form.
Output:
The below figure shows a table in which values are stored by assigning indexes.
How does the console.time() and console.timeEnd() methods work in JavaScript?
The console.time() method is used to start calculating the execution time of a specific portion of code. Moreover, at the end of the code, you can use console.timeend() to get the execution time.
The following example code implements the console.time() and console.timeend() methods.
Code:
console.time('Welcome to JavaScript');
let fun_sit = function(){
console.log('fun_sit is running');
}
let fun_stand = function(){
console.log('fun_stand is running..');
}
fun_sit(); // calling fun_sit();
fun_stand(); // calling fun_stand();
console.timeEnd('Welcome to JavaScript');
In the above code,
- The console.time() method is used at the
- After that, two functions are created.
- Later, these functions are
- Lastly, we used the console.timeend() method to return the total execution time of the code (that is placed in between the console.time() and console.timeEnd() methods).
Output:
It is observed from the output that the code written between the console.time() and console.timeEnd() methods took 8.96 ms to execute.
How does the console.group() method work in JavaScript?
The console.group() method is used to make a group of messages on the console. Additionally, the console.groupEnd() method is used to terminate that group. The example code that exercises console.group() and console.groupEnd() methods is written below.
Code:
console.group('simple');
console.warn('alert!');
console.error('error notification');
console.log('Welcome to JavaScript');
console.groupEnd('simple');
console.log('new section');
In above code,
- console.group() method is used.
- After that, the warn(), error(), and log() methods are used for displaying messages in the group.
- At the end, console.groupEnd() is used to end the messages of the group.
Output:
The output illustrates the group of messages in which errors and warning notifications are displayed. whereas the statement ‘new section’ is displayed outside of the group.
Here it is! You have learned to understand and apply console objects and their methods in JavaScript.
Conclusion
In JavaScript, the console object comprises various methods that can be used to get the output on the browser’s console. This post demonstrates the functionality of the console in JavaScript. You have learned to access the console of various browsers. Additionally, we have provided an overview of all the methods supported by the console object in JavaScript.
Source: linuxhint.com