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

Jaxongir - Oct 15 '22 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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
*/
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player