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だと分かります。

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

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

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

ぜひ使ってみて下さい。

【追記】プログラミングスクールのレビューサイトを開発しました。

この度、プログラミングスクールのレビューサイトの「スクールレポート」を開発しました。

プログラミングスクールの人気は年々高まっているものの、高額な受講料を請求しておきながら質の低い教育を提供する悪質なスクールも見受けられるようになってきました。

今回開発した「スクールレポート」では受講生の方のみレビューを投稿することが出来ます。

プログラミングスクール業界がより健全なものになることを願っています。