ネストされた可変キーのオブジェクトからプロパティを掘り進む時にundefinedになる

Question

###前提・実現したいこと
このようなオブジェクトがあります。

var obj = {
	parent:{
  	apple:{
    	jp:'りんご',
    	en:'apple',
    	zh:'苹果'
    }
  }
};

そして次のようにitemとlangが変数なのですが、itemがない時点でundefinedのエラーとなってしまいますよね。

const item = 'xxx';
const lang = 'ja';
const name = obj['parent'][item][lang];

これをitemがない時点で判定せず、この式全体で判定して（itemかlangがいずれもない状態で初めて判定して）、notextを代入することはできませんでしょうか？
つまり次のようなことをしたいのです。次だと実際にはitemがないのでエラーとなりますが、式全体で判定してnotextを代入したいのです。

const item = 'xxx';
const lang = 'ja';
const name = obj['parent'][item][lang] || 'notext';

###該当のソースコード
実際には以下の流れです。
最初は問題ありませんが、2つ目をnotextとしたいのです。

var obj = {
	parent:{
  	apple:{
    	jp:'りんご',
    	en:'apple',
    	zh:'苹果'
    }
  }
};

fruits1('apple','jp'); // 問題なし
fruits1('xxx','jp');   // 現状はエラーとなるが、これをnotextとしたい
function fruits1(item,lang){
  const name = obj['parent'][item][lang] || 'notext'; 
  console.log('fruits1' + name);
}

###試したこと
次のようにitemがない時点で三項演算子を使えばいいのですが、この処理が大変手間に感じるのです。

fruits2('apple','jp'); // 問題なし
fruits2('xxx','jp');   // notextとなってOK
function fruits2(item,lang){
  const name = obj['parent'][item] ? obj['parent'][item][lang] : 'notext'; 
  console.log('fruits2' + name);
}

なぜ手間かというと実際のオブジェクトはもっと階層が深いので、上のような三項演算子では済ませることができず、条件分岐をたくさんかかないといけないためです。

その手間があるので、式全体で判定してnotextを代入したいというのが実現したいことなのですが、何か良い方法ございましたらお助けいただけませんでしょうか。

Comments

[Lhankor_Mhy]

jQueryは関係ないと思いますので、タグの修正をお勧めします。

[miyabi-sun]

タイトルと内容がちょっと違いますね。
「ネストされた可変キーのオブジェクトからプロパティを掘り進む時にundefinedになる」とかでしょうか？

[huwatoro]

ありがとうございます。タグとタイトル変更致しました。

Answer 1

これですかね。
Optional chaining - JavaScript | MDN

fruits1('apple','jp'); // 問題なし
fruits1('xxx','jp');   // 'notext'
function fruits1(item,lang){
  const name = obj['parent']?.[item]?.[lang] || 'notext'; 
  console.log('fruits1' + name);
}

ブラウザ対応状況
Can I use... Support tables for HTML5, CSS3, etc

別解

再帰とカリー化でユーティリティ関数を書いてみました。

const opt = x => attr => attr == null ? x : opt( x == null ? undefined : x[attr] );

const item = 'xxx';
const lang = 'jp';
const name = opt(obj)('parent')(item)(lang)() || 'notext';

別解2

今度はジェネレータと早期リターンで書いてみました。イテレータの最後の要素にアクセスする上手い方法はないものか。

const opt = (obj, attrs) => [...(function* (){
  for (attr of attrs){
    if ( obj == null ) return undefined;
    yield obj = obj[attr];
  }
})()].slice(-1)[0];

const item = 'apple';
const lang = 'jp';
const name = opt(obj, ['parent', item, lang]) || 'notext';

かっこかっこがなくなってウザさが減ったと思います。
あと、早期リターンをしているので、浅い階層でプロパティがなかった場合に省コスト、かも？

Comments

[Lhankor_Mhy]

別解の方は、こちらを参照しています。
https://qiita.com/nagtkk/items/5c54ec418c1c71fa491a

[miyabi-sun]

おっ、ようやくStage4まで上がってきたんですね。
これがないのは正直バグじゃないかってレベルなので嬉しいですね。

[Lhankor_Mhy]

ですね！

Chromium Edge と Chrome が対応していて、Firefox が次期バージョンで対応するので、PC環境においては今年後半あたりに採用を検討していいレベルになるかと思います。あとは iOS Safari が対応すれば……

[huwatoro]

JavaScript使いこなしてますね！どうもありがとうございます。様々な別解など大変勉強になりました。

Answer 2

質問文の通りです。超不便です。
全くなんなんでしょうかね？このクソ言語

Lhankor_Mhyさんが「Optional chaining」を解説していますが、
これを軽く解説します。

既存のコードでどうすればよいかの案も下に貼り付けておきます。

---

ES2015以降の流れで、
急速にJavaScriptはモダンな構文が毎年追加される進化を遂げています。

プロポーザルという形で
JavaScriptの仕様に追加して欲しい機能をアピールする仕組みがあります。
これが精査されてStage0からスタートして、無事Stage4まで上がっていくと次のESに取り込まれるルールになっています。

「Optional chaining」は既にStage4まで登っている為、
対応ブラウザも非常に多く特に問題ないかもしれませんね。
ただし、非対応なブラウザだと問答無用にJSエラーで落ちると考えられるのでBabel等のツールを噛ませた方が良いでしょう。

まぁ、この提案がある時点でJSという言語自体での対応手段がない事への証明ですね。

---

毎回(((obj.parent || {}).apple || {}).jp || null)とか書くと読みづらくて仕方ないですね。

ES5でも何とか出来ます。
Ramda.jsのpathや、Lodashのgetといった解決策があります。

オブジェクトのキーは別にキー名の一部として.を所持することは禁止されていないはずですが、
JSでプロパティをチェーンする場合はA.B.Cと書きたいのでくっそ邪魔ですね。
なので文字列の.にしたり、配列を利用して再帰で取りに行く関数を実装すると良いでしょう。

コードにするとこんな感じ
ただまぁ、LodashやRamda.jsといったライブラリの方がきちんとテストされているので、
実際に導入するならライブラリを利用することをオススメします。

var obj = {
  parent:{
    apple:{
      jp:'りんご',
      en:'apple',
      zh:'苹果'
    }
  }
};

const get = (obj, key) => {
  if (key == '') return obj; // 正常終了
  if (obj == null) return obj; // 存在しないキー
  const keys = key.split('.');
  return get(obj[keys[0]], keys.slice(1).join('.'));
}

console.log(get(obj, 'parent.apple.jp')); // "りんご"
console.log(get(obj, 'parent.banana.jp')); // undefined

Comments

[huwatoro]

クソ言語ｗプロポーザル知りませんでした。その他様々な詳細なご解説ありがとうございます。Lodashでも近いことできましたか。調べてみます。

Answer 3

こんな感じで

name = ((obj['parent']||{})[item]||{})[lang]||"notext";

Comments

[huwatoro]

ありがとうございます。一行でまとまっていいですね。

Answer 4

ふつうにitemがundifinedではないことを確認するのはダメですか？
typeof item として型を文字列で評価し、undifinedではないことを確認できます。

Comments

[huwatoro]

undifinedなのはitemという変数を指しているのではなくて、objからitemを探した結果を指しているのですが…

[sansansandodo]

「そして次のようにitemとlangが変数なのですが、itemがない時点でundefinedのエラーとなってしまいますよね。これをitemがない時点で判定せず、この式全体で判定して（itemかlangがいずれもない状態で初めて判定して）、notextを代入することはできませんでしょうか？」

itemがないの意味が分からなくなってしまいましたが、itemが「parentに」ない場合の話をしていましたか？？
であれば、原始的な実装としては、
prop in Obj //=> true or false
で確認しておくといいかと思います。

[huwatoro]

質問文が悪かったです。申し訳ございませんでした。