【JavaScript】値のundefinedと空値チェックメモ

何故メモするの？

*　kintoneのJavaScriptカスタマイズを行う際に、undefinedか空文字かのチェックをすることが多いことと。
*　今まで厳格な等価評価でundefined評価をしていたけどどうやら推奨されていないと知ったため。
詳細はMDNを参照

良く使用していたチェック

// if文
if(val === undefined){

}else if(val === ''){

}else{

}

// 三項演算子
val === undefined ? '' : val === '' ? '' : val;

なんで推奨されないのか。

undefinedは、グローバルスコープ内の変数だから。
予約語ではないため、上書きしたりしてグローバル汚染してしまう恐れがあるため。
なるほど。
@StormSurge様から以下の理由によりundefinedが書き換えられることはなく厳密等価演算子での比較も成立するとご指摘頂きました。保守性を考慮して以降のプログラムもval === undefinedの厳密な等価評価式に変更しました。以前記載していた評価式(val === void 0)はコメントアウトしています。

最近のブラウザー (JavaScript 1.8.5 / Firefox 4 以降) での undefined は、 ECMAScript 5 仕様により、設定不可、書込不可のプロパティとなります。 (そうでない場合でも、上書きは避けてください。)

（結局）どのようにしたの？

// 空値 or undefinedチェック
if (!checkValUndefined(val)) {
   // 空値 or Undefined時の対応
} else {
   // それ以外の時の対応
}

/**
  * 引数の値がundefinedか確認する。
  * @param {*} val - undefinedかチェックする値
  * @returns {string} - undefinedの場合：空値/それ以外の場合：チェックする値
  */
const checkValUndefined = (val) => {
   //　return val === void 0　
   return val === undefined   
     ? ''
     : val;
};

「void 0」の「0」の部分は「0」でなくても良いそうです。「void」はあらゆる値に作用して、undefinedを返すらしいです。全く知りませんでした。

よくkintoneでフィールドに値を入れたり取得したりする際に使用しています。

今後

kintoneで推奨されていないけど、最低限名前空間オブジェクトにして全体反映のJavaScript置き場に上のプログラムを配置すると、どのアプリからでも参照できるようになるから使い勝手めっちゃ良くなる。他にも共通しているような関数はここにまとめちゃってしまった方が良いのかなとも思い始めた…。

終わりに

もっとこうしたら良いとか、そこおかしいのとか等あったら教えてください。

参考

　@quicksort様JavaScript undefined値の判定

更新履歴

20201/1/7 @StormSurge様コメントの指摘からコードの判定条件の仕方を厳格な等価評価に変更