【JavaScript】存在チェックについて
こんにちは。駆け出しフロントエンドです。
ここでは、自分の理解のために存在チェックについて記事をまとめていきたいと思います。
自分の理解度も深めるために調べた記事の二番煎じですが、自分の言葉でアウトプットって大事だよね！ということで参考にさせていただいた記事を真似ているところがあります。何卒ご容赦ください🙏
よく見る「!xxx」について
以下のコードをよく見かけます。
if (!xxx) { ... }
この処理を使う場面として、「プロパティの存在チェック」が場面としてよく挙げられます。（この値があるときはこの表示する！みたいな）
最初見た時になんぞこれ？となったので、改めて型や値の評価がどうなるか確認していきます。
| 値 | 型 | 結果 |
|---|---|---|
| {} | オブジェクト | true |
| [] | 配列 | true |
| 'test' | 文字列 | true |
| '' | 文字 | false |
| 1 | 数値 | true |
| -1 | 数値 | true |
| 0 | 数値 | false |
| -0 | 数値 | false |
| true | 真偽値 | true |
| fase | 真偽値 | false |
| undefined | undefined | false |
| null | null | false |
MDNと見てみると、偽値 (falsy) として定義された値以外は全ての値は真値 (truthy) となるようですね。
JavaScript において、真値 (truthy) は論理値のコンテキストに現れた時に true とみなされる値のことです。偽値 (falsy) として定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN) を除くすべての値は真値です。
もう一度コードを見てみましょう。
if (!xxx) { ... }
この条件がtrueになるときは、null, undefined, 0, 空文字(''), falseです。
よく使う組み合わせとして論理和演算子(||)や論理積（&&）を使って判定を行います。
if (!xxx || hogehoge) { ... }
if (!xxx && hugahuga) { ... }
おまけ：Object.keys()メソッドを使ったプロパティの判定方法
undefined is not an object (evaluating ...)というエラーが出たとき、Object.keys()を使って判定をしていたコードを見て勉強になったので。
Object.keys()メソッドとは何ぞ
Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
オブジェクトのプロパティ名を取得して返すメソッドです。
先ほどのエラーは使用しているオブジェクトがundefinedになっているのだが！？という意図なので、lengthメソッドで判定すれば回避できるようです。
if (Object.keys(hoge).length) { ... }
参考になった記事
Discussion