JSON.stringifyを見やすくする

JavaScript でオブジェクトの状態をログに出力したいとき、どうしてますか？
例えばこんなオブジェクトを作成した場合。

function createObj() {  
  let aValue = 1,  
    bValue = null  

  const obj = {  
    set a(a) {  
      aValue = a  
    },  
    get a() {  
      return aValue  
    },  
    set b(b) {  
      bValue = b  
    },  
    get b() {  
      return bValue  
    }  
  }  
  return obj  
}  

const obj = createObj()  

const plainObj = { a: 1, b: null }  

vue.jsやってるとよくある、setterとgetterを持つオブジェクトをログに出したいとき。
保持している値は plainObj と同じです。

単純に console.log する

まあ、これでもやりたいことはできますよね。

console.log(obj)  
// chrome  
// ▶ {}  

// FireFox  
// ▶ Object { a: Getter & Setter, b: Getter & Setter }  

// Edge  
// ▶ [object Object]: {a: 1, b: null}  

chromeなら▶ {} が表示されて、クリックしていけば中身も見れる。
FireFoxだと、setter と getter があることまで教えてくれる。
意外、Edgeは展開済みにしてくれる。
大抵はこれで間に合うけど、大量に表示しているときにいちいちクリックで展開しなきゃいけないのが面倒。

あと、クリック展開した瞬間の値が表示されるので、ログを出力したタイミングとは保持している内容が変わっている可能性がある。

JSON.stringify する

JSON.stringify でフラットな文字列にするやり方。

console.log(JSON.stringify(obj))  
// {"a":1,"b":null}  

これならログ出力した瞬間の値が表示されます。
でもオブジェクトが膨らんでくると、ターゲットの変数を探すのが一苦労。。。

JSON.stringify を整形する

JSON.stringifyが第 2、第 3 引数を取れるなんて知らなかったよ。。。

console.log(JSON.stringify(obj, null, 2))  

とすると

{  
  "a": 1,  
  "b": null  
}  

重要なのは第 3 引数。
可読性を上げるために使用するスペースの数を入れます。
最大 10 まで使えますが、2 ～ 4 が実用的な値でしょうか。

ネストの場合も大活躍！

オブジェクトをネスト構造にしてみます。

const obj2 = {  
  a: 2,  
  b: {  
    c: 3,  
    d: {  
      e: 4  
    }  
  }  
}  
console.log(JSON.stringify(obj2, null, 2))  

↓ キレイに階層表示されました！

{  
  "a": 2,  
  "b": {  
    "c": 3,  
    "d": {  
      "e": 4  
    }  
  }  
}  

JSON.stringifyにもたくさんの機能があるんですね。。。勉強になりました。
第 2 引数もいろんな事ができるようですが、ロギング用途には要らなそうです。

参考: MDN: JSON.stringify()