DEV Community

Cover image for Play with Javascript Console Method Part 2

Posted on

Play with Javascript Console Method Part 2


Hello! This article is a continuation of the previous articles. Today, I'll introduce additional technics to leverage console methods on browser.

As same as previous article, while these methods may not be essential for practical use in your programming situation, but they can unique and enjoyable. If you are interested in these, let's play this togather!

console.time and console.timeEnd

Do you know that you can measure the time on console?

Here is a simple code example using console.time() and console.timeEnd() to measure the execution time of a specific operation. In this example, we measure the time it takes to sum numbers from 1 to 100,000.

The code starts the measurement with console.time('sumCalculation') and ends it with console.timeEnd('sumCalculation'). The elapsed time of the operation (summing numbers from 1 to 100,000) is displayed in the console. Finally, the calculated sum is also logged to the console.

// Start

// sum of 1 to 100,000
let sum = 0;
for (let i = 1; i <= 100000; i++) {
  sum += i;

// end calc, display the time

// display sum
console.log('Sum:', sum);
Enter fullscreen mode Exit fullscreen mode

Through such measurements, one can gain insights into how much time a particular operation takes, allowing for consideration of optimizations if needed.

Image description

Dynamic display of strings: embedding variables and calculation results in console.log

Using variables in JavaScript to write code is common, and you can also leverage variables in the console, too.

In this example, the sum of variables x and y is calculated, and the result is embedded in a string. The console will display: "Sum of 5 and 10 is: 15."

const x = 5;
const y = 10;
const sum = x + y;

console.log(`Sum of ${x} and ${y} is: ${sum}`);
Enter fullscreen mode Exit fullscreen mode

This approach makes it easy to display variables or calculation results within the code, simplifying debugging and comprehension.

console.count() - prints the number of times a particular message has been called

console.count() increases a counter associated with a specific label and displays the count in the console. The label is optional, and if omitted, "default" is used.

console.count();            // default: 1
console.count('example');   // example: 1
console.count();            // default: 2
console.count('example');   // example: 2
Enter fullscreen mode Exit fullscreen mode

This method is useful for easily counting how many times a particular piece of code has been called. By applying this method, you can monitor how many times a specific function has been called when combined with a particular process.

Image description


I've introduced some lesser-known uses of the console that you can employ. Similar to the previous information, these may not be frequently used in practical work, but I hope they prove helpful in certain contexts.

In the previous article, I introduced topics such as styling, grouping, and creating tables with the console. If you are interested, please take a look at that as well.

Thank you for reading!

Top comments (0)