18

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?

alex
  • 7,111
  • 15
  • 50
  • 77
  • Possible duplicate of [How to get function parameter names/values dynamically?](https://stackoverflow.com/questions/1007981/how-to-get-function-parameter-names-values-dynamically) – hayden Jan 04 '18 at 02:28
  • `console.log('' + Object.keys({value})[0] + ':', value)` – Ryan Walker Apr 04 '22 at 21:08

6 Answers6

35

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})
CRice
  • 29,968
  • 4
  • 57
  • 70
  • @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 04 '18 at 02:47
  • Don’t support this particular es6 feature – drkibitz Jan 04 '18 at 02: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 04 '18 at 02:50
  • Nowhere in my answer did I say “impossible”, I said not possible the way you described – drkibitz Jan 04 '18 at 02: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 04 '18 at 02:53
  • Looks like support is pretty good, but there are some browsers that lack it. Here's [a table of runtime environments and their support for this](http://kangax.github.io/compat-table/es6/#test-object_literal_extensions_shorthand_properties) – CRice Jan 04 '18 at 02: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}`);
}
clark
  • 61
  • 4
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))
}
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
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

Amr Morsy
  • 186
  • 3
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.

drkibitz
  • 507
  • 5
  • 15
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
Take
  • 324
  • 3
  • 10