Play with Javascript Console Method
Tags: javascript
Published: 2023-11-19 01:08:27

#Introduction

Hello everyone! Today, I'd like to share some **lesser-known** features and usage methods of `console` object, that I recently learned about. Probably you're already familiar with how to use `console.log`. But in this article, I'll introduce you to some unique ways to leverage `console` method. 

While these may not be essential for practical use in your programming situation, but they can be interesting. Feel free to give them a try! 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qeydpkndy2zses93cgb.png)



#Adding Styles

Do you know that you can add styles to console.log?

You can add styles to your console output using the `%c` format specifier in the first argument of console.log. You can customize the appearance of the text by setting the color, font size, etc. This is the example:

```shell
console.log("%c This is styled text", "color: blue; font-size: 18px;");
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qcdonio8wiqjptch2b4.png)

Here is an example of using a function to display a random color:

```shell
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
console.log("%c It's random color block", `font-size: 16px; padding: 5px; color: #fff; background-color: ${getRandomColor()};`);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqqjxz5izqmc5umow2e0.png)

You can play this in the browser console without preparing a code editor. Please give it a try!


#Grouping with console.group + console.groupEnd

You can organize your logs by grouping them together. This is especially handy when dealing with complex code. Use `console.group` to start a group and `console.groupEnd` to close it. Here is example:

```shell
console.group("Group 1");
console.log("Log 1");
console.log("Log 2");
console.groupEnd();
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cqhli5fo9yeydhr9r4t.png)

If you look at the console, you will see that nesting is generated and `Log 1` and `Log 2` are stored inside. I can't think of a scenario where this would be useful, but it might be useful to organize in certain situations.

#Tabular Display with console.table
When dealing with arrays or objects, use `console.table` for a neat tabular display:

```shell
const data = [
  { name: "Takeshi", age: 29, profession: "Baker" },
  { name: "Jane", age: 33, profession: "Teacher" },
];

console.table(data);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fys4qppyiuimw0dqc53.png)


If you look at the console, you will see that the table has been generated. I honestly could not think of any scenario where this one could be used, but I thought it was unique and interesting.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds1ep6j58opm7n66cyhz.png)


#Conclusion
In my case, I often use `console.log` for debugging and checking the behavior of my code but I didn't know **adding style to console**, **console.group** and **console.table** until recently. When I first learned about these methods, I found them intriguing. While I couldn't immediately think of practical scenarios to use them in my everyday work, but I found them unique and enjoyable. I hope you enjoyed these too!

Thank you for reading.