console.log( { 変数 } ) と書くとkeyとValueが表示されて便利だけどこれって何なの？
console.log( { } )
JavaScriptのデバッグ等で今この変数に何が入っているのかな～というのを知りたいときに、console.log()を仕込んでおいて画面に表示させる方法があります。
以下のように書くことが多いと思います。
const text = 'こんにちは' console.log('text: ', text) //結果 //text: こんにちは
これでもいいんですが、次のように書くこともできます。
console.log( { 変数 } ) と、変数を中かっこで囲む形です。
const text = 'こんにちは' console.log( { text } ) //結果 //{ text: 'こんにちは' }
このように、変数名とその値が表示されるので便利ですね。
わざわざconsole.log('text: ', text)と書くよりも楽ですし、これからはこの書き方を使っていきましょう！
いかがでしたか？それではさようなら。
ちなみにこの書き方はQiitaのこちらの記事のコメント欄にて知りました。
(初出はどこなんでしょうか。もしわかる方いましたらコメント等で教えて頂けると幸いです。)
で、これは何
どうしてconsole.log( { text })と書くだけで
{ text: 'こんにちは' }が表示されるんでしょうか？
そもそも、{ text: 'こんにちは' }の正体は何なんでしょうか？
const obj = { } でオブジェクトを生成
JavaScriptにおいて中かっこといえばオブジェクトですよね！
例えば、以下のコードはconsole.log( { text } )と同じ実行結果が得られます。
const obj = { text: 'こんにちは' } console.log( obj ) //結果 //{ text: 'こんにちは' }
では、先ほどと同様にconsole.log( { 変数 } )の形で書いてみます。
const obj = { text: "こんにちは" } console.log( { obj } ) //結果 //{ obj: { text: 'こんにちは' } }
なんか外側に増えましたね！
{ obj: { text: 'こんにちは' } }にインデントをつけて見やすくします。
{ obj: { text: 'こんにちは' } }
objとその中身の部分に関しては、さきほどのコードの一行目で、自分で宣言したものです。
そのさらに外側に、中かっこが増えています。
objを要素に含む、名前のついていないオブジェクトがいつの間にか生成されているように見えます。
つまり、console.log( { text } )とは、変数textを要素に含む無名のオブジェクトを生成して画面に表示しているのではないでしょうか。
オブジェクトリテラルの省略記法
オブジェクトの中身のkey部分とvalue部分が同じとき、
obj: { text: text }
は
obj: { text }
と省略して書くことができます。
これと同じことがconsole.log( { text } )でも起きています。
つまり
const text = 'こんにちは' console.log( { text } )
は
const text = 'こんにちは' console.log( { text: text } )
の省略記法といえるでしょう。
まとめ
console.log( { text })はconsole.log( { text: text })の省略記法。
{ text: text }を要素に含む無名のオブジェクトを生成して、画面に表示している。
もし間違っていたらコメント等でご指摘願います。 また、最初にこの記法を発見したのは誰なのか個人的に気になります。 公式ドキュメントには記載が見当たらないので（私が見落としているだけかもしれませんが……）。 それらについての情報も教えて頂けると幸いです。
