DEV Community

Braincuber Technologies
Braincuber Technologies

Posted on

It’s 2022, Don’t Use the console.log() Anymore 😎

We as JavaScript developers usually use console.log() to test the output or just for fun. Even I can bet that our (including mine) first code was “Hello world” logged in the console.

console.log("Hello World!")
Enter fullscreen mode Exit fullscreen mode

This piece of code has been nostalgic for all fellow JS developers. But now it’s 2022, let’s make it a little handy and comfortable for our fingers.

In this article, I have discussed a simple and common method that has rarely been used by developers.

Let’s get started

As we know, we all use to log the data to the console like this:

console.log("I love js") // I love js
console.log(4 + 4) // 8
console.log(!true)  // false
Enter fullscreen mode Exit fullscreen mode

Let’s work smartly and efficiently as shown below:

const log = (arg) => console.log(arg)
Enter fullscreen mode Exit fullscreen mode

Here, we have created a function with a shorter name — log relative to console.log(), you can even use a shorter name, something like this:

const l = (arg) => console.log(arg)

Enter fullscreen mode Exit fullscreen mode

So, you might be wondering what’s the benefit of writing code like this? Let’s discuss the benefits.

Benefits

Keeps your code clean and slick
Improve readability
Relief to your fingers, don’t have to write a long thing
Comment more benefits if you can.

Let’s test 🚗

log("Hello world") // Hello world
log(4 + 4) // 8
log(!false) // true
log(Math.PI) // 3.141592653589793
Enter fullscreen mode Exit fullscreen mode

Conclusion

So, this was a quick tip to save your time and make your code look cleaner. Let me know in the comments if you will use this tip.

You can try the same thing for the console.info(), console.warn(), console.error().

🌏 Let’s connect

LinkedIn

Twitter

Read More

A Complete Guide to WEB 3.0

How to upload files to aws s3 using nodejs lambda and api gateway

Top comments (18)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

You say "don't use console.log" and then proceed to do exactly that

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

clickbait.

Collapse
 
jankapunkt profile image
Jan Küster

What you actually want is

const l = (...args) => console.log(...args)
Enter fullscreen mode Exit fullscreen mode

because you might pass multiple arguments to console.log:

l('foo', 'bar') // foo bar
Enter fullscreen mode Exit fullscreen mode

but what you really want is this:

const createLog = ({ name }) => {
  const logName = `[${name}]:`
  return (...args) => console.log(logName, ...args)
}
Enter fullscreen mode Exit fullscreen mode

which allows you to prefix logs with some contextual scope:

const log = createLog({ name: 'foo' })
log('bar', 'baz') // [foo]: bar baz
Enter fullscreen mode Exit fullscreen mode

you can easily extend this function to add some type argument to use warn, debug or error instead .

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

this is the way

Collapse
 
topolanekmartin profile image
Martin Topolanek

In addition you can check for dev mode in that function. Something like: process.env === 'development'.

Collapse
 
pedrohenriquebr profile image
pedrohenriquebr

Amazing 🤩

Collapse
 
skinnypetethegiraffe profile image
Bobby Plunkett

By aliasing console.log you gain nothing, shortening the name to a single letter is bad practice (you want names to have meaning), and honestly, this adds unneeded complexity to the code (which isn't much, but everything adds up).

If you want a better logging solution look into actual logging libraries such as pino or winston, and if they don't have the features you need, you can use them as a reference when writing a new solution.

I do like the idea of modules, just trying to find the best place to apply them is sometimes difficult, and I do not believe console.log is one of those places if you're not extending functionality.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

I'm just going to say that there are snippet plugins where you type clg and it suggest you to convert it to an actual console.log('first') statement plus with the word "first" selected so you can easily type your identifier + what you want to log like console.log('user', user); pretty simple, huh?

Collapse
 
moopet profile image
Ben Sinclair

const l = (arg) => console.log(arg) could be written more simply as const l = console.log

You're talking about saving a few keypresses to make somthing a little more opaque, but then in your next example, you've called it log which is back up to three characters.

Collapse
 
martialseron profile image
Martial Séron

Most useless article ever.
And your monkey patch function isn't even working the same way than console.log()

Clickbait

Collapse
 
brunozampieri1985 profile image
brunozampieri1985

My God... This was the most nasty clickbait I've ever clicked before

Collapse
 
khalidsaifullahfuad profile image
Khalid Saifullah Fuad

Clickbait 😡. Is there a way to downvote an article in DEV??

Collapse
 
rajeshroyal profile image
Rajesh Royal

Cheap marketing, dev ko to baksh do. Dusra medium bana daaloge.

Collapse
 
yachelee profile image
Yache Li

Use "debugger;" is much better...

Collapse
 
lexlohr profile image
Alex Lohr

You do know that console.log supports an arbitrary number of arguments. If you want to shorten the statement, use

const log = console.log.bind(console);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chris2kus31 profile image
Chuy Moreno

Hmm 🤔 I swear I just read to not use console.log but only console.log. What a twist 🙂

Collapse
 
frankwisniewski profile image
Frank Wisniewski

why console.log ?
set a breakpoint and monitor the variable in the developer tools...

Collapse
 
jmsalazardev profile image
José Migue Salazar

Use loglevel and don't waste your time reading this post.