Introduction

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
console.time('sumCalculation');

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

// end calc, display the time
console.timeEnd('sumCalculation');

// display sum
console.log('Sum:', sum);

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

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

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

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.

Conclusion

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!