BETA

JavaScriptでoptional chainingモドキで遊ぶ

投稿日:2019-06-23
最終更新:2019-06-23

はじめに

const value = document.querySelector('input#hoge[type="text"]').value.trim();  

上のものは、input#hoge[type="text"]が見つからなかった場合にエラーが起きてしまいます。nullにはvalueがありませんので。

そこで、偉い人たちはoptional chainingという新機能を検討しています。

const value = document.querySelector('input#hoge[type="text"]')?.value.trim();  

?.です。
これは、「値があったらそれを、なかったらその場でundefinedを返せ」というものです。

…あれ? 自力で実装できそう?

optional chainingモドキ

const optChain = (obj) => {  
  return (curProp, ...props) => {  
    if (obj == null) return undefined;  
    if (curProp === undefined) return obj;  

    return optChain(obj[curProp])(...props);  
  };  
};  

console.log(optChain(document.querySelector('hoge'))('value'));  
// => undefined  

value == nullvalue === null || value === undefinedと同じです。

おわりに

関数に渡す分冗長ですがよしとします。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@okayuの大して技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!