JavaScriptで変数名と値を同時にログ出力する方法

こんにちは、アカネヤ(@ToshioAkaneya)です。

変数名と値を同時にログ出力する方法について解説します。

JavaScriptでログ出力をするときにはconsole.logを使っていると思います。

でも、プログラムが複雑になってきてconsole.logが増えすぎるとどのログがどの変数の値なのか分からなくなってしまいますよね。

そのときに、次のようなプログラムを書くことがあると思います。

let x = 12
console.log('x is ${x}')

1 2	let x = 12 console.log('x is ${x}')

実行するとこうなります。

一応やりたいことは出来ています。

でも、console.log(‘変数名 is ${変数名}’)というのを毎回書くのは面倒ですよね。

もっと楽をしちゃいましょう。

新しいJavaSciript、ES6で導入されたオブジェクトの省略記法を活用します。

ES6では、オブジェクトのキー名がバリューと同じときに、キー名が省略できます。どういうことかというと

{x}

{x}

は

{
  x: x
}

{

x: x

}

と同じ意味になります。

これを活用して

console.log({変数名})

1	console.log({変数名})

とするのです。やってみましょう。

数値型の変数をログ出力した場合がこちら

xの値が12だと分かります。

続いて、配列をログ出力した場合がこちら

配列型の変数もバッチリですね！

変数名と値を同時にログ出力できています。

ぜひ使ってみて下さい。

【追記】プログラミング学習サービスを開発しました。