undifined !== '' がtrueになる理由

新卒の駆け出しエンジニアです。不慣れなJavascriptの実装中に等価演算子について理解していなかったために、少しハマってしまったことを共有します。

厳密等価演算子

厳密不等価演算子!==は===の逆。
そして===と==の違いは===はデータ型を変換するかどうか。

例)

1 === '1'
=> false

しかし

1 == '1'
=>true

下の方の==では型まで厳密にみていないため(同じ方に変換しようと試みる)trueになる。

!==は===の逆で、型も含めて等しくなければ「true」
なので型が等しくないため

1 !== '1'
true

になる

undifined !== ''

undefined も '' もboolean型ではfalseに変換される。
だが変換されない厳密不等価演算子では、お互いの型が違うためtrueになってしまう。

つまり値がなかったらという処理を作る時に、不本意にtrueになってしまう場合がある。

そのため

if (hoge !== '') {

より

if (!hoge) {

と書くほうが良い