皆さんはJavaScriptで配列の空判定を行う時にはどのように実装していますでしょうか。

実装としては様々な方法があるとは思いますが、オプショナルチェーンを使った実装を紹介したいと思ってます。

では早速、本題に移っていきたいと思います。

コード①

if (array?.[0]) {
// => 配列の中身がある
}
else {
// => 配列の中身がない
}

解説①

オプショナルチェーンで配列の中身を確認していますが、これはオプショナルチェーン演算子は参照がnullish (null または undefined) の場合はundefinedが返却されることを利用しています。

つまり、中身がないときはundefined、中身があるときは参照があるため値が返却されるのでTruthyとして扱われるため中身があることとして判定ができます。

メリット

オプショナルチェーンで空判定することのメリットは何といっても、判定をしたい変数の型がobject型じゃなくても良いということです。

どういうことかというと、例えばデータをFetchしてきて結果があるかどうかを確認するときなどに空判定をしたいと思います。

この時に中身があれば良いのですが、nullやundefinedのときにlengthプロパティなどで判定をした場合にエラーを吐いてしまいます。

ですからlengthプロパティで判定を行う場合には少し気を付けないといけないポイントがありますが、オプショナルチェーン演算子で判定を行うことによってよりスマートに記述できます。

オプショナルチェーン演算子の比較対象としてlengthプロパティを対象にしたのでこちらについても解説をしていきたいと思います。

コード②

if (array.length !== 0) {
// => 配列の中身がある
}
else {
// => 配列の中身がない
}

[array.length !== 0] と条件文に書いていますが、0はfalsyな値ですから

[array.length] のみでも条件文として成立します。

解説②

lengthプロパティはobject型に対してこちらのように「.length」と付けてあげると配列の長さを返してくれます。

配列.length

これにより、配列の中身の数によって空かどうかを判断してあげるということですね。

しかしこの方法には先ほど説明した通り弱点があります。

デメリット

この方法のデメリットはずばり、判定の対象がnullやundefinedのときにエラーとなることです。

例えばnullに対してlengthを行った場合このようなエラーとなります。

TypeError: Cannot read properties of null (reading 'length')

undefinedも同様ですね。

TypeError: Cannot read properties of undefined (reading 'length')

lengthを使う場合には、判定対象の型に対して気を遣う必要がある点がデメリットかなと思ってます。

lengthプロパティでオプショナルチェーン演算子を使う

冒頭で説明した方法でもよいですが、この実装でも同様に判定できます。

この辺りは好みの問題ですかね。

if (array?.length) {
// => 配列の中身がある
}
else {
// => 配列の中身がない
}

このように配列をそのまま判定すればいいのでは？と思ってしまった人もいるかもしれません。

if (array)

が、この判定には欠点があります。

それは型が配列ならば空でもtrueとなるからです。

let array = [];

if (array) {
    console.log("true")
}
else {
    console.log("false")
}

// => trueと出力される

空配列の判定としては不十分のためこの判定だけは行わないようにしましょう。

配列の空判定の方法は様々なやり方はあると思います。

私の場合はこのように記述を行っていますので、ぜひ参考にしてもらえればと思います。