30 Days Of JavaScript.13/E
Day 13. Console Object Methods
On
Day 13, I learned about various console object methods.
Console Object Methods
- What to use?
console.log()document.write()document.getElementById
Console object methods are used to show output on the browser console. document.write is used to show output on the browser document(viewport). Both methods are used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. document.getElementById() is used to interact with DOM using JavaScript.
1. console.log()
console.log() is used to show output on the browser console. I can substitute values and style the logging output using %c.
1) Showing output on browser console
console.log('30 Days of JavaScript');
// 30 Days of JavaScript
2) Substitution
console.log('%d %s of JavaScript', 30, 'Days');
// 30 Days of JavaScript
3) CSS
I can style logging message using CSS.
console.log('%c30 Days Of JavaScript', 'color:green');
// log output in green
console.log(
'%c30 Days%c %cOf%c %cJavaScript%c',
'color:green',
'',
'color:red',
'',
'color:yellow'
) // log output in green, red, and yellow text
2. console.warn()
console.warn() is used to give warning on browser. It is used to inform or warn deprecation of a package version or bad practices.
console.warn('This is a warning.');
// ⚠️This is a warning.
3. console.error()
console.error() method shows an error messages.
console.error('This is an error message.');
// ❌This is an error message.
4. console.table()
console.table() displays data as a table on the console. It takes one argument data(required), which must be an array or an object. columns can be added as an optional parameter.
- When an array is given to
data
Each element in the array will be a row in the table. The first column in the table will be labeled (index), and the (index) values will be array indices.
- When an array is given to
data
Each property in the object will be a row in the table. The (index) values will be property names.
5. console.time()
console.time() starts a timer that tracks how long an operation takes. I can give each timer a unique name, and up to 10,000 timers can be runned on a given page. When I call console.timeEnd() with the same name, the browser will log the time in milliseconds that elapsed
const countries = [
['Finland', 'Helsinki'],
['Sweden', 'Stockholm'],
['Norway', 'Oslo']
]
console.time('for of loop');
for (const [name, city] of countries) {
console.log(name, city);
}
console.timeEnd('for of loop');
/*
Finland Helsinki
Sweden Stockholm
Norway Oslo
for of loop: 0.31591796875 ms
*/
6. console.info()
console.info() displays an information message on browser console.
console.info('30 Days Of JavaScript challenge is trending on Github');
7. console.assert()
console.assert() writes an error message(Assertion failed error) to the console if the assertion is wrong. If the assertion is true, nothing happens. assertion expression(any boolean expression) is passed as the first parameter.
console.assert(3 > 4, '3 is not greater than 4');
// Assertion failed: 3 is not greater than 4
8. console.group()
console.group() helps to group different log groups. To create a new group, use console.group(). I can pass a label for the group as a parameter. To exit the current group, use console.groupEnd().
const names = ['Luther', 'Diego', 'Allison', 'Klaus', 'Five', 'Ben', 'Vanya'];
console.group('Names');
console.log(names);
console.groupEnd();
I can also make nested loops.
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
9. console.count()
console.count() prints the number of time that this particular call to count() has been called. It takes a string label parameter. If the parameter is omitted, it will be labeled default.
const func = () => {
console.count('call time');
}
func()
func()
func()
/*
call time: 1
call time: 2
call time: 3
*/
I can pass a variable as the label argument.
let user = '';
function greet() {
console.count(user);
return 'hello ' + user;
}
user = 'Ramona';
greet();
greet();
greet();
user = 'Paul';
greet();
/*
Ramona: 1
Ramona: 2
Ramona: 3
Paul: 1
*/
10. console.clear()
console.clear() method cleans the browser console.
console.clear();
// Console was cleared
Day 13. Console Object Methods_Exercise
👟Level 1.
1. Display the countries array as a table.
const countries = [
'Albania',
'Belgium',
'Canada',
'Denmark',
'Estonia',
'Finland'
]
console.table(countries);
2. Display the countries object as a table.
const canada = {
"name": "Canada",
"capital": "Ottawa",
"population": 38005238,
"region": "Americas",
"area": 9984670
}
console.table(canada)
3. Use console.group() to group logs.
const umbrella = ['Luther', 'Diego', 'Allison', 'Klaus', 'Five', 'Ben', 'Vanya'];
console.group('The Umbrella Academy');
console.log(umbrella);
console.groupEnd();
👟Level 2.
1. 10 > 2 * 10 use console.assert().
console.assert(10 > 2 * 10, '10 is larger than 2 times 10.');
// Assertion failed: 10 is larger than 2 times 10.
2. Write a warning message using console.warn().
console.warn('Stay focused!');
// ⚠️Stay focused!
3. Write an error message using console.error().
console.error('3 errors detected');
// ❌3 errors detected
👟Level 3.
1. Check the speed difference among the following loops: while, for, for of, forEach.
const numbers = [0, 1, 2, 3, 4];
// while loop
console.time('while loop');
let i = 0
do {
console.log(numbers[i]);
i++;
} while (i < 5);
console.timeEnd('while loop');
// for loop
console.time('for loop');
for (i = 0; i < 5; i++) {
console.log(numbers[i]);
}
console.timeEnd('for loop');
// for of loop
console.time('for of loop');
for (const element of numbers) {
console.log(element);
}
console.timeEnd('for of loop');
// forEach
console.time('forEach');
numbers.forEach((num) =>
console.log(num));
console.timeEnd('forEach');
/*
while loop: 0.2021484375 ms
for loop: 0.128173828125 ms
for of loop: 0.10888671875 ms
forEach: 0.25 ms
*/
Leave a comment