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

はじめに

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と同じです。

おわりに

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

この記事へのコメント

まだコメントはありません