JavaScript 変数名と値を文字列として取得する

JavaScriptじゃない記事ですが次の記事を見ました。

デバッグ時はprintではなく、Icecreamを使うと便利 - Qiita
https://qiita.com/purun/items/c7aca300b970344214cf

JavaScript でも、変数名と値を同時出力したいと以前から思っていました。

const a = 10;
console.log(`a:${a}`); // a:10

開発時にデバッグログとして、こんな感じに出力するコード書くときがよくあります。
この時、変数名が1文字とかなら問題ないですが、きれいなコードを書こうとするとぼちぼち変数名は長くなる時は多くあります。その時に、変数名を2回書くのがだるいわけです。

なので、どうにか解決したいかなと思って、次の関数を書いてみました。evalを使えばできます。

const varNameValue = (name) => {
  return `${name}:${eval(name)}`;
}

const a = 10;
console.log(varNameValue('a')); // "a:10"

これは確かにできるのですが、eval は、いろいろセキュリティとか考える必要があったりなかったりしそうでやっかいそうなので使うのを避けたいところ。

MDNでも酷評されている感じですし、いろいろ怖いです。使い方に注意しておけばそれほど問題ないとも思いますけれども、念の為なるべくevalは避けたい。

eval() を使わないでください! - eval() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval!

MDNでは、eval の回避方法として、Function 使え、とあるけれども、今回の場合には当てはめられそうにないです。

こういうときはどうしたら効果的なコード書けるかな、と思ってたところに、タイムリーに、mizdra's blog で紹介されていました。

JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
https://www.mizdra.net/entry/2021/05/03/000139

簡単なのはこういうことなんですね。

const a = 10;
console.log({a});
// {a: 10}

オブジェクト生成の省略記法でオブジェクトをconsole.logに渡せば、ブラウザやnodeの表示側で変数展開してくれるわけですね。なるほどなるほど。

この仕組みを使えば自前で変数名と値を展開して文字列として取得できるよな。そういえば。
ということで、ヒントにさせていただいて気がつけましたので、console.logにわたす前に変数名と値を展開して文字列として取得するにはこういうことすればいいなとわかりました。

const varNameValues = (args) => {
  const result = [];
  for (const [key, value] of Object.entries(args)) {
    result.push(`${key}:${value}`)
  }
  return result;
}

const a = 10;
console.log(varNameValues({a})); // ["a:10"]

const b = 20;
console.log(varNameValues({a, b})); // ["a:10", "b:20"]

これで、変数名と値とを同時に文字列取得し出力することができました。console.logだけじゃなくてログファイルに記載するときや、localStorageに値を保持するときもわかりやすいかもしれません。

mizdra's blog にすごく感謝です。ありがとうございます。

追記

varNameValues なんての作らなくても、こっちの方がシンプルでいいかも。逆変換もできるし。

const a = 10;
const b = 20;
console.log(JSON.stringify({a,b})) // {"a":10,"b":20}