[JavaScript]console.tableでオブジェクトの中身を見てみよう！！

✒ はじめに

皆様こんにちは。JS勉強中のAK666です。
JSでコードを書くとき、頻繁にconsole.logを使用すると思います。オブジェクトの中身を確認したい、メソッドが動いているか確認したい、etc...
今回はオブジェクトの中身を各段に見やすくするconsole.tableの使い方を紹介したいと思います。

---

✒ console.tableとは

以下、mdn web docs引用

console.table() メソッドは、表形式のデータを表として表示します。
この関数には必須の引数 data があり、これは配列またはオブジェクトでなければなりません。また、省略可能な引数 columns もあります。
これは data を表として出力します。配列の各要素（data がオブジェクトである場合は、列挙可能なプロパティ）が、表の行になります。
表の 1 列目には、(添字) というラベルがつきます。 data が配列である場合、この値は配列の添字になります。 data がオブジェクトである場合、この値はプロパティ名になります。（Firefox では） console.table は表示する行が 1000 行（最初の行は見出し）に制限されていますので注意してください。

配列とオブジェクトの中身を表形式で確認するための便利なメソッドのようです！！。

• 参考資料 : https://developer.mozilla.org/ja/docs/Web/API/console/table_static

---

✒ console.tableとconsole.logの比較

例えば...下記のようなオブジェクトが定義されているとします。

const personalInfo = {
  name: '太郎',
  age: 30,
  live: 'Tokyo',
};
console.log()

console.tabaleの存在を知らなかった時の私はpersonalInfoの中身を確認する時、console.logを使用して値を確認していました。

const personalInfo = {
  name: '太郎',
  age: 30,
  live: 'Tokyo',
};
console.log(personalInfo)

✒ console.log実行結果

Objectの中身は確認できだけど...なんだか見ずらいですね...

✒ console.tableを使うと...?!

const personalInfo = {
  name: '太郎',
  age: 30,
  live: 'Tokyo',
};
console.table(personalInfo)

✒ console.table実行結果

なんとtableが生成され、オブジェクトの中身が一覧として表示されました！！
console.logでオブジェクトの中身を見るよりも、各段に見やすくなったと思います。

---

✒ まとめ

今回はconsole.table()の使い方を紹介しました！！
データ数の多いオブジェクトや配列の中身を確認したい時はconsole.tableを使いましょう！！