obj && obj.hoge && obj.hoge.fuga ... を少し簡単に書く

Qiitaにも投稿してみた

---

JSerの皆様につきましては、JSON.parseしたデータなど、多段ネストしたオブジェクトのプロパティにアクセスするとき、

const obj = {hoge: {fuga: {piyo: 1}}};

const value = obj && obj.hoge && obj.hoge.fuga && obj.hoge.fuga.piyo || 0;

のようなコードを書いてウンザリしてることと思われます。どうやって回避してますか？

回避策1

const value = propOf(obj, 'hoge', 'fuga', 'piyo') || 0;

function propOf(obj, var_args) {
  let result = obj;
  const args = Array.prototype.slice.call(arguments, 1);

  while (args.length > 0) {
    const p = args.shift();
    result = result[p];

    if (result === null || result === undefined) {
      return null;
    }
  }
    
  return result;
}

回避策2

アロー関数が使える今なら、こういう書き方でもいいんじゃないかと思い始めた。

const value = safe(() => obj.hoge.fuga.piyo) || 0;

function safe(f) {
  try {
    return f();
  } catch (e) {
    return null;
  }
}

俺ならこう書く、というアイディアがあれば教えてください。