Braincuber Technologies

Posted on Apr 7, 2022

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

#javascript #beginners #programming #tutorial

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!")

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

Let’s work smartly and efficiently as shown below:

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

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)

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

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

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)

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.