console.log, console.error, console.assert and More

Most new programmers or even some intermediate programmers stuck with using only console.log that they've learned as the JavaScript 101 lessons but don't use other methods provided in the console object. So in today' blog, I'm going to introduce other less-used console methods that you'll surely be going to be using in your upcoming projects

console.log

console.log() method accepts any value and outputs that the given value to the console. It's most-used method for debugging purposes. I'd say that you'r going to use it in 80% of the time. If value that you pass is error-free, then opt this method.

const fullName = "Jaxongir Rahimov"
console.log(fullName) // Jaxongir Rahimov is output to the console

console.clear

console.clear() method does not accept any arguments and only works in the browser console. And it's used to clear the browser console when it's populated with too many statements, objects, functions, and so on. But remember, it does not remove all the code from the browser history, to do that you've to do that manually

const person = {
  name: "Jaxongir",
  country: "Uzbekistan"
}
const isAllowedToDrink = promp("Are you over 18")

// all the above code is cleared from the browser console
console.clear() 

console.error

console.error() accepts any error type and outputs: error type and the message indicating what caused that error. Most people stuck with log method to display even error messages. So next time if you find yourself that you need to display error message than you should this method

const error = new Error("Something went wrong!");
console.error(error);
// Error: Something went wrong!

const error = new SyntaxError("It's wrong syntax!");
console.error(error);
// SyntaxError: It's wrong syntax!

console.warn

console.warn() is an alias of console.error but it's used to display warning message not error messages in the console.

console.warn("Warning! you should'not use innerHTML for setting text")

console.info

console.info is an alias of console.log but it should be used to display informational text to the console

console.info("Modal should be centered")

console.assert

console.assert() is quite similar to console.error but with one difference it requires boolean value as the first argument and the message as the second argument that to be displayed if boolean evaluates to true else not displayed. It's quite handy as it avoids need to wrap console.error in conditional

const balance = 0
console.assert(balance <= 0, "Your balance is empty, you can't withdraw money")

console.count and countReset

console.count() accepts label and displays how many times count() is called with that label if no value is provided label default to default. And console.countReset() resets label count to 0

console.count();
console.count();
console.count();
console.countReset();
console.count();
console.count();
/**
Output:
default: 1
default: 2
default: 3
default: 0
default: 1
default: 2
*/

const label = "label";
console.count(label);
console.count(label);
console.count(label);
/**
Output:
label: 1
label: 2
label: 3
*/

console.group and groupEnd

console.group starts message grouping which means all the console declarations after it will be nested within it and groupEnd ends message grouping and any message outputs with consoles after groupEnd will be outside nested object. Try example below in your console to see it's effect in practise

const label = "label";
console.group();
console.count(label);
console.count(label);
console.count(label);
console.groupEnd();
console.log("Outside group message nesting");

console.table

console.table is very useful when you need to display array of data in tabular format. All you've to do is just pass array and it outputs the result in tabular format in the browser console. Name of the column will be index if values are primitive but if it's object than property names will be column names. Try below example in your browser

const people = [
  { name: "Samantha" },
  { name: "Gabriel" },
  { name: "Saruman" },
  { name: "KSI" },
];

console.table(people);

console.time and timeEnd

console.time() and console.timeEnd() methods are handy when we need to calculate how long does it take to perform certain operation. Both accepts labels and they must have the same label. time() method initiate timer and timeEnd stops the timer and indicates how long it took to complete operations in ms. Try below code in your browser

console.time("Label");
for (let i = 0; i < 10000; i++) {
  console.log(i);
}
console.timeEnd("Label");

console.trace

console.trace() method accepts message and outputs that message with current call-stack or functions order that are called in order based on where trace() method is called

const func1 = () => {
  console.trace("Current Call-Stack Trace:");
};
const func2 = () => {
  func1();
};
const func3 = () => {
  func2();
};
const func4 = () => {
  func3();
};
func4();