UXPに備えてモダンなJSの書き方に慣れる(undefinedを扱う)
javascriptにおいてundefinedの扱いには誰もが慎重になるでしょう。undefined、それ自体がバグの原因になり得ます。変数の宣言でもオブジェクトのプロパティでもundefinedを避けるために事前に仮の値を代入したりする事もしばしばあります。今回undefinedの扱いを紹介します。
関数のデフォルト引数
ECMA2015よりデフォルト引数がサポートされました。これは関数の引数に何かしらの値をデフォルトの値として渡すことができます。ご存知の通り関数の引数は何も値を受け取らなかった場合はundefinedとなります。ECMA2015以前ですと以下のようにデフォルトの値に対応するしかありませんでした。
undefinedだったら値を代入とややめんどくさい対応が必要でしたが最新の環境でしたらこれにデフォルトの値を設定できます。
意図的に引数にundefinedを渡した場合もデフォルト引数が代入されます。
第一、第二引数はデフォルト値を使い第三引数に値を渡す場合などは最初にundefinedを第三引数以前の引数にundefinedを渡すといいでしょう。と言っても通常は重要な引数の値を前から書いて後ろにはデフォルトの値を使うことが多い引数を置くことで意図してunedfinedを渡す事もあまり無いと思います。もしくは分割代入を利用して値を渡す引数を選ぶ事も可能です。
デフォルト引数に他の引数を使用した値の代入も可能です。
Nullish Coalescing Operator
これまでのECMA環境下ではundefinedの値を扱う場合はundefinedの場合の条件を明確に設定する必要がありました。三項演算子だったり論理演算子等。
しかしNullish Coaleascing Operatorによりnull、もしくはundefinedの値の場合のみに別の値を代入することができるようになりました。??を三項演算子のように変数、値の後ろに配置して変数、値がnullもしくはundefinedの時に特定の値を返します。
三項演算子よりもよりシンプルに式をかけるようになりました。ちなみに論理演算子では値がbooleanとしてtrueかfalseかという基準で返す値を判断します。つまりboolean型の値を扱う時にfalseとundefinedを等価に扱いたく無い時にはこれまでのやり方だと面倒になります。
boolean値もシンプルに扱うことが可能になります。
その他jsにおけるfalseな値、もしくはtrueな値というのはとても曖昧です。以下を見るとよくわかります。
nullとかNaNはまだしも0までfalseな値として扱われています。というわけでjsにおいて型の扱いは慎重にならなければなりません。だからこそnullやundefinedといった値の無い、もしくは未定義の値を扱うにあたってNullish Coaleascing Operatorが使えるのです。
Optional Chaining
Optional ChainingはNullish Coaleascing Operatorと似ています。前述のものがundefinedかnullの場合に特定の値を返すようにしたのに対してOptional Chainingはundefined、nullな値へのアクセスを簡単にします。例えばオブジェクトのプロパティにアクセスする場合、これまではアクセス前にそのプロパティをオブジェクトが所持しているかどうか確かめる必要がありました。
以下のようにすればエラーを回避できるがコードが見辛くなる。
オブジェクトが特定のプロパティを持っているかどうか確かめる場合は多いと思います。しかしこういったコードを一々書くのは相当な手間です。ここでOptional Chainningの出番です。
オブジェクトのプロパティの手前に?をつけるだけでプロパティがなければエラーを回避できます。該当のプロパティがなければundefinedを返します。オブジェクトがネストしている場合もネストの分?をつければプロパティを遡ってアクセスしてくれます。そして最後のプロパティまで値があった場合のみプロパティの値を返します。
Optional Chainningはオブジェクトだけでなく関数にも使用できます。
以下のようにすればコールバックがなくてもエラーを回避できます。
合わせ技
Optional ChainningとNullish Coaleascing Operatorは合わせて使うことによりエラーを回避するだけでなくundefinedの代入自体回避も可能です。
この組み合わせにより今までオブジェクトの構造を調べたりプロパティがない場合の処理等一々複雑な関数を作っていた場面でも簡素に、尚且つ安全なコードを書けるようになります。さらにarrayメソッドでのメソッドチェーンでの組み合わせも可能なのでfindメソッドで使用するとより強力です。findメソッドで特定の値が見つかった時のみに関数処理を続けたい時などです。
これはfindで特定の条件の値を探してなければそのままundefinedを返します。メソッドチェーンでreduceメソッドも繋がっていますがOptional Chainningのおかげでfindメソッドでundefinedが出てもエラーにならずNullish Coaleascing Operatorによって設定された100の値をundefinedの代わりに返すようにしてreduceメソッドは実行しません。findメソッドで目的の値が見つかればそのままreduceメソッドに移ります。
*今回紹介したOptional ChainningとNullish Coaleascing OperatorはECMA2020から導入された機能なので使用する場合はjsの環境に気をつけてください。