如何同時判斷 undefined 與 null ?

undefined 與 null 是 ECMAScript 很特殊的存在，實務上我們常會同時判斷 undefined 與 null ，其實有更優雅的寫法。

Version

ECMAScript 5

||

const func = x => {
  if (x === undefined || x === null) return ('undefined or null');
};

console.log(func());
console.log(func(undefined));
console.log(func(null));

最中規中矩的寫法就是配合 || ，同時判斷 undefined 與 null 。

Falsy Value

const func = x => {
  if (!x) return ('undefined or null');
};

console.log(func());
console.log(func(undefined));
console.log(func(null));

由於 undefined 與 null 都是 Falsy Value，因此這種寫法也很常見。

不過這種寫法有個淺在的 bug，因為 false 0 與 empty string '' 也是 Falsy Value，所以可能誤判。

== null

const func = x => {
  if (x == null) return ('undefined or null');
};

console.log(func());
console.log(func(undefined));
console.log(func(null));

只要使用 == null 就可以同時判斷 undefined 與 null 。

注意是使用 == 的 lenient equality，並不是使用 === 的 strict equality。

這是為什麼呢 ?

因為在 ECMAScript 的 Spec 有這兩條規則：

既然如此，原本的 x === undefined || x === null 可以簡寫為 x == null 。

Q : 這種寫法會被 Lint 擋下來吧 ?

經過測試，ESLint / WebStorm / Airbnb 三大 Linter 都不會對 == null 寫法加以警告，很顯然這是一種默認的 patten，已被各大 Linter 接受。

Conclusion

• 實務上不建議使用 == ，都會被各大 Linter 擋下來，但 == null 是個例外，藉由 ECMAScript Spec 強迫定義，我們可以更簡單的同時檢查 undefined 與 null

Reference

ECMAScript Language Specification , The Abstract Equality Comparison Algorithm