How to get the literal name of a variable?

Question

So I am really tired of writing out console.log all of the time so I wrote a small function called clog to pass the parameters into a console.log.

I want to optimize this, however, that whenever I pass in a variable it should print the variable name and then the value:

clog(i)     //=> i: 0
clog(myVar) //=>myVar: [1,2,3]

How would I do this?

Here's what I have currently:

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

@tic I am but I want something even lazier. I don't want to have to type out `clog('i',i)` every single time. Way too much typing. — , Dec 04 '18 at 21:06
What’s your IDE? I’m pretty sure u can use a shortcut autocomplete which will place a double caret for u to write your variable name as string and as actual variable at once. I use such approach on vscode — Yinon, Dec 04 '18 at 21:08
You can also just call console.log with as many arguments as you want `console.log(i, myVar, anotherVar)` They don't all have to be on a new line — tic, Dec 04 '18 at 21:09
@tic that is not what they were asking about. They want those `i` and `myVar` names as part of the log output. So just use object notation, and done. — Mike 'Pomax' Kamermans, Dec 04 '18 at 21:10

Mike 'Pomax' Kamermans · Answer 1 · 2018-12-04T21:15:19.590

2

Use object notation, taking advantage of shorthand property names:

Wherever you changed your code to call clog(...), change it back to console.log calls, and just pass in your variable in an object wrapper.

console.log({ i }); // yields { i: 0 }
console.log({ myVar }); // yields { myVar: [1,2,3] }

Want to log lots of stuff? Same deal:

console.log({ i, myVar }); // yields { i: 0, myVar: [1,2,3] }

Want to keep your clog function? Still the same deal: wrap anything you need the varname for in object notation first, then throw it into your custom logging function.

edited Dec 04 '18 at 21:15

answered Dec 04 '18 at 21:06

Mike 'Pomax' Kamermans

49,297
16
112
153

const clog = (...args) => console.log({...args}) – Dec 04 '18 at 21:12
No? That alone does not preserve the input variable names, so if you call `clog(a,b)` what you log does _not_ have the varnames `a` and `b` in it anymore, which is what they were asking about how to achieve. Start by using object notation, and _then_ do your logging however you need it to happen. – Mike 'Pomax' Kamermans Dec 04 '18 at 21:13

MattG · Accepted Answer · 2018-12-04T22:11:31.770

Wrap the variable you want to log in {}, like this:

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

const i = 'hello'

const myVar = {a: 2}

clog(i)     //=> i: 0

clog(myVar) //=>myVar: [1,2,3]

clog ({i})
 //{
 // "i": "hello"
 //}

see How to console log the name of a variable/function?.

You could also go further and try this:

<script>
    const clog = (...args) => {
        args.forEach(arg => {
            if (typeof arg === 'object')
                for (const [key, value] of Object.entries(arg)) {
                    console.log(key, value)
                } else {
                    // dev forgot to wrap input to clog in a {}, so just log normally
                    // or change this to throw an error, enforcing all calls to clog must be an object
                    console.log(arg)
            }
        })
    }

    const i = 'hello'
    clog(i)
    console.log({i})

    const j = 'bye'
    clog({ i }, { j })

    const myVar = { a: 2 }
    clog({ myVar })
    console.log({myVar})

    const otherVar = { b: 2, c: { d: 7, e: 'wow' } }
    clog({ otherVar })

    clog({ myVar }, { otherVar })

    clog() // does not error if no args

    clog({}) // handles empty object input
</script>

To see the improvement you will need to open this up in a browser and see how the clog statement "unwrapped" the object, presenting a arguably clearer log line, but still retaining the capability to inspect deeper into the object being logged in the browser.

Compare the output for:

clog({ myVar })

And

console.log({myVar})

See which you prefer.

How to get the literal name of a variable?

2 Answers2