DEV Community

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

Braincuber Technologies on April 07, 2022

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 “...

Read full post

Jon Randy 🎖️ • Apr 7 '22

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

Nicolás Danelón • Apr 7 '22

clickbait.

Jan Küster • Apr 7 '22

What you actually want is

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

because you might pass multiple arguments to console.log:

l('foo', 'bar') // foo bar

but what you really want is this:

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

which allows you to prefix logs with some contextual scope:

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

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

Nicolás Danelón • Apr 7 '22

this is the way

Martin Topolanek • Apr 8 '22

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

pedrohenriquebr • Apr 7 '22

Amazing 🤩

Bobby Plunkett • Apr 7 '22

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.

JoelBonetR 🥇 • Apr 7 '22

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?

Ben Sinclair • Apr 7 '22

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.