根據 ECMAScript 的特殊定義

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

Version


ECMAScript 5

||


1
2
3
4
5
6
7
const func = x => {
if (x === undefined || x === null) return ('undefined or null');
};

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

最中規中矩的寫法就是配合 ||,同時判斷 undefinednull

null000

Falsy Value


1
2
3
4
5
6
7
const func = x => {
if (!x) return ('undefined or null');
};

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

由於 undefinednull 都是 Falsy Value,因此這種寫法也很常見。

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

null001

== null


1
2
3
4
5
6
7
const func = x => {
if (x == null) return ('undefined or null');
};

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

只要使用 == null 就可以同時判斷 undefinednull

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

這是為什麼呢 ?

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

null004

null003

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

null002

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

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

Conclusion


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

Reference


ECMAScript Language Specification, The Abstract Equality Comparison Algorithm

2018-12-11