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

おわりに

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

記事が少しでもいいなと思ったらクラップを送ってみよう!
10
+1
@okayuの大して技術的ではないブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする