Discovering the Console in JavaScript

The console object in JavaScript is fundamental piece when we are development ours projects.

‼️ You can go to my Github to find JavaScript examples. ‼️

If we type in our Google Chrome Developer Tools, in the console tag, the word: console you can see that is an object that is inside de global window object:

So you can access the console object from the window object.

window.console

But is not necessary 👓

Let’s get to know her even more:

Print in the console: 🔈

// Printing text
console.log('Hi!');
// Printing a variable
const PI = Math.PI;
console.log(PI);
// Expresions
console.log(2 + 4);
console.log(`PI value: ${PI}`);
// Comparing
console.log(null === undefined);
console.log(3 > 2);
console.log(typeof NaN);
console.log(true || false);
console.log(true && false);
// Ternary Operator
console.log( (3 > 2) ? 'Three!' : 'Two!');

Result: 📍

Print an error: ❌

console.error('Error!');

Result: 📍

Print a warning message: ⚠️

console.warn('Be careful')

Examining a object: 🔦

console.dir(document);
console.dir({a: 5});

Result: 📍

Assertion: ⛳

function isEqual(x, y) {
 console.assert(
    x === y, { "message": "x is not equal than y", 
   "x":   x, 
   "y": y });
}
isEqual(10, 5);

Clear: ⬜️

console.clear();

Result: will be the console empty. 📍

Table Output: 📋

const users = [
  {name: 'Nick', age: 33}, 
  {name: 'Jessica', age: 23}
];
console.table(users);

Result: 📍

Time: 〽️

const users = [10, 20, 30];
console.time('performance');
 const gThan10 = users.filter(n => n > 10);
 console.log(gThan10);  
console.timeEnd('performance');

Result: 📍

Group: 📦

console.group('numbers');
 console.log(1);
 console.log(2);
 console.log(3);
console.groupEnd('numbers');

Thank you 😊!