2023年04月12日 更新

JavaScriptのconsole.logで簡単に変数名と値をデバッグログ表示

どうも、クラゲジュニアです。

JavaScriptのデバッグログで以下のように表示結果を出したいときに、簡単に記述するための方法を紹介します。

value: 100

[TOC]

文字列連結で書く

これが最も直感的に分かりやすい書き方です。

const value = 100;
console.log('value: ' + value);

テンプレートリテラルで書く

今回はあまりメリットを感じませんが、文字列の中に変数が複数ある場合などに役立つ書き方です。

const value = 100;
console.log(`value: ${value}`);

最も簡単に書く

{}で囲むだけです。

const value = 100;
console.log({value});

解説

以下の２つはどちらも同じです。後者の書き方をconsole.logで利用したということです。

const obj = {value: 100};

const value = 100;
const obj = {value};

以上です。