DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Console log with params
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Console log with params

Let's have a look at our best friend, console.log! It's such an amazing "tool" if we can call it that.
Logging is just making our life so much easier, and I use it all the time.

But did you know we can pass params in console.logs?

Console.log with params

Types of params in console.log

  • Strings: Use %s
  • Integer: Use %d or %i
  • Floats: Use %f
  • Object hyperlink: Use %o

These are more than enough types and can come in handy!

How to use params in console.log

To use params, we can place them in our console log as such:

console.log('This %s will return the number %d', 'string', 10);
// This string will return the number 10
Enter fullscreen mode Exit fullscreen mode

As you can see, we can give it multiple params at once. These are read in the order inputted.

So in the above's example, it will be %s first then %d.

Let's give them all a try:

console.log('Let us %s a string', 'print');
// Let us print a string

console.log('The number %d is not the same as %i', 10, 11);
// The number 10 is not the same as 11

console.log('Even a float like %f will work', 10.233);
// Even a float like 10.233 will work

console.log('There is a good link: %o', 'http://stackoverflow.com');
// There is a good link: "http://stackoverflow.com"
Enter fullscreen mode Exit fullscreen mode

Yes, you can also just add this in, but I prefer this way, just neater code and more readable!

Give it a try on your next project.

Find this example on Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (6)

Collapse
 
_hs_ profile image
HS

How about

console.log("This is a test", {simple: "test"});

I don't use JavaScript that much but I do know that a lot of logging happens because people prefer it to actual debugging and it's a bit faster for some of us. However when doing too much async calls and printing objects you're not always familiar which call produced which console.log. So I put in objects like upper code.

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Hey Haris,

Great addition! That is indeed a quick way to debug objects!

Collapse
 
mrsid profile image
MrSid

Thankyou so much for this awesome trick

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Your welcome, Mr Sid

Collapse
 
psiho profile image
Mirko Vukuőić

Still my favorite debugger :)

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Just the easiest way I guess!

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›