15

I want to do this: log(variableOrFunction)

And be able to produce this: variableOrFunction: actualValue.

I tried this:

export const log = (value) => {
  console.log('' + value + ':', value)
  console.log(value)
}

But I get this instead: [object Object]:

What's the correct of doing this?

2

6 Answers 6

31

You can log them with a pair of braces around them ({}), which will create an object with the name of the variable as the key:

function someFunction() {};

const someOtherFunction = () => {};

const someValue = 9;

console.log({someFunction});
console.log({someOtherFunction});
console.log({someValue});

const renamed = someFunction;

console.log({renamed})

6
  • @drkibitz It's an es6 feature, so it should work anywhere that supports es6. Can you clarify if you mean some browsers don't support es6 in general or that they don't support this feature in particular?
    – CRice
    Jan 4, 2018 at 2:47
  • Don’t support this particular es6 feature
    – drkibitz
    Jan 4, 2018 at 2:48
  • @CRice I think almost every project has a ES6 parser (e.g. Webpack). Genius solution thanks! (Funny, many people say it's impossible. Guess nothing is impossible for JavaScript.)
    – alex
    Jan 4, 2018 at 2:50
  • Nowhere in my answer did I say “impossible”, I said not possible the way you described
    – drkibitz
    Jan 4, 2018 at 2:51
  • @CRice Oh, I just realized it can't be a function: export const log = (value) => { console.log({value}) } It will always return { value: ... }
    – alex
    Jan 4, 2018 at 2:53
3

Would this work for you?

const log = function() {
  const key = Object.keys(this)[0];
  const value = this[key];
  console.log(`${key}:${value}`);
}

let someValue = 2;

log.call({someVlaue}); //someValue:2

Works with function too, even itself.

log.call({log});

// It would return the following
log:function() {
  const key = Object.keys(this)[0];
  const value = this[key];
  console.log(`${key}:${value}`);
}
2

If “value” is of type Object. You can try console.dir(value) instead of the long console.log, and you should be able to see the Object tree key: value pairs in a better formate in the console

2

The "value" is of type Object. Use JSON.stingify to see in details,

export const log = (value) => {
  console.log('' + value + ':', JSON.stringify(value))
  console.log(JSON.stringify(value))
}
2

You can’t achieve this within the JS interpreter the way you have described. There is no way to get the name of a variable inside of your log function.

You can only do it inside of the caller of your log function, by converting the calling function to a string and parsing the code and grabbing the variable name passed to your log function.

You could try to get the caller of the log function and do what I have described but I would not recommend this.

2

Built on @CRice answer:

const arr = [10, 20, 30, 40, 50]
const obj = { a: 10, b: 20, c: 30, d: { e: 40 } }
const str = "abcdef"

function slog(obj) {
  Object.entries(obj).forEach(([key, value]) => console.log(key + ":", value))
}

slog({ arr })  // arr: [ 10, 20, 30, 40, 50 ]
slog({ obj })   // obj: { a: 10, b: 20, c: 30, d: { e: 40 } }
slog({ str })   // str: abcdef

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.