こんにちは。フロントエンジニアの諸江(もろえ)です。

今回はJavaScriptにおいて配列に値が存在するかを確認する方法をご紹介します。理由としては、最近改修している際に考慮が不足している判定が目についたためです。

まずはどんな判定だったかというと以下のようなコードになります。

const arrayList = [1, 2, 3];
if (!!arrayList) {
   // arrayListが存在する場合の処理
} else {
   // arrayListが存在しない場合の処理
}

arrayListの前にある2重の感嘆符は2重否定を意味しています。1つだと否定です。

arrayListに何も代入されず、undefinedであればFalsyと見なされてelseの分岐に入ります。しかし、arrayListに空配列が代入された場合はJavaScriptの性質上、空配列をTruthyとみなすため、1つ目の分岐に入ってしまいます。

それではどのようにすれば良かったかというと条件を&&で追加し、配列のlengthを取った上で2重否定を付与します。

const arrayList = [1, 2, 3];
if (!!arrayList && !!arrayList.length) {
   // arrayListが存在し、配列内に値が存在する場合の処理
} else {
   // arrayListが存在しない、もしくは空配列の場合の処理
}

arrayList.length とすることで配列内の要素数が分かります。この場合は3となり、！！を付与しているため、真偽値判定した結果、Truthyとなり、1つ目の分岐に入ります。

const arrayList = [];
if (!!arrayList && !!arrayList.length) {
   // arrayListが存在し、配列内に値が存在した場合の処理
} else {
   // arrayListが存在しない、もしくは空配列の場合の処理
}

上記のような空配列の場合に配列のlengthを取得すると数値の0が返却されます。0はFalsyのため、elseの条件に入ります。

!!arrayList && arrayList.length > 0

他の書き方としては比較演算子を利用して0より大きければTruthyとする方法もあります。ただ、2重否定を利用して真偽値で判定する方がスマートなので僕はこちらを利用しています。

余談ですが、if文の条件式を簡潔に書きたい場合は三項演算子で記述します。どうしてもif文で書かないといけない場合を除いてこちらを使用しています。

const arrayList = [1, 2, 3];
!!arrayList && !!arrayList.length ? // arrayListが存在し、配列内に値が存在する場合の処理 : // arrayListが存在しない、もしくは空配列の場合の処理;

APIからの返却値によってコンポーネントの表示・非表示などによく使われるケースだと思います。誰かの参考になれば幸いです。