JavaScriptの配列や、配列内の空の判定方法とは？

JavaScriptにおいて、配列の中身が”空”とは空文字だったり、undefinedだったりと様々なパターンがあり混乱しやすいですよね。

今回の記事では、JavaScriptの配列における空とは何か？また、配列の中身を判定する方法をYOKOTAが紹介しようと思います。

配列の中が空かどうか判定するには？

まず配列の中に何か入っているのか？
それとも何も入っていないのか？を確認する方法をご紹介します。

配列の中身に何かが入っている状態は配列.lengthで確認できます。
配列.lengthは、配列の要素数を確認するのに使用します。

逆に言えば配列の要素数が0であれば、配列の中は空っぽであると言えます。
下記のコードを動かした場合、配列の中身は[ ]なので空っぽと言えます。

もちろん配列の中身がなかった場合の処理が実行されます。

See the Pen
empty.length === 0 by codepen1 (@codepen112233)
on CodePen.

JavaScriptの配列に空を入れてあるケースとは？

配列の中身が空となっているケースとは、配列の要素数が0であることが分かったかと思います。
ただ、配列の要素の中に空を敢えて入れるケースもあります。
例えばnull、空文字、undefinedなどです。

下記、nullについてMDNが下記のように説明しています。

null という値は、意図的にオブジェクトの値が存在しないことを表します。
これは JavaScript のプリミティブ値の 1 つであり、ブール演算では falsy として扱われます。
出典：MDN null

それに対して、undefinedは下記のようにMDNでは説明されています。

まだ値が代入されていない変数は undefined 型となります。
評価しようとしている変数に値が代入されていない場合、メソッドや文も undefined を返します。
値を return しない関数も undefined を返します。
出典：MDN undefined

それでは実際に下記のサンプルコードで、nullとundefinedが入っているケースを
見てみましょう。

See the Pen
null,undefined,空文字,0 by codepen1 (@codepen112233)
on CodePen.

最初の要素empty[0]にはnullをわざと入れており
その次のempty[1]には何も入れていません。
また、空文字と数値の0をempty[2],empty[3]に入れています。

それぞれの要素を出力した結果は”空”ボタンを押していただければ確認できます。

JavaScriptの空文字やnullのデータ型を判定してみる。

先ほどのコードのデータ型を判定してみましょう。
判定はtypeof演算子を使用すれば簡単にできます。

See the Pen
様々な空のデータ型を確認する by codepen1 (@codepen112233)
on CodePen.

上記のサンプルコードで分かる通り、nullと空文字はデータ型が違います。

空文字である””はあくまでも文字列であり、nullはobjectです。
そして何も代入されていないempty[1]はundefined型と呼ばれます。
undefined型はかなり厄介なデータ型で、普通の配列の要素と同じように扱えません。

例えば下記のコードを動かしてみてください。

See the Pen
undefinedは判定できず by codepen1 (@codepen112233)
on CodePen.

配列numbersの中身に“要素の一つです”という文字列を各要素に応じてくっつけて配列new_arrayにpushしています。

ここではempty[1]のundefinedが無視されてしまっており、代わりにempty[2]が要素1の場所に来ています。
そして最後のundefinedは一個一個ずれていった結果、empty[3]には何も入っていないためundefinedが表示されています。

nullとは違い、undefinedは意図的に配列の中身を空にしたい時に使用すべきではありません。
意図的に空にするのであればnullか空文字 ” ” とすべきである点に注意しましょう。

JavaScriptのundefinedを判定するにはどうするか？

undefinedを判定するにはif文を使用して、配列の要素をundefinedかvoid演算子で比較すれば実現できます。
voidは引数に何を与えてもundefined（文字列ではない）を返すので、配列の中身を判定するのに便利です。

下記、MDNの説明を引用します。

void 演算子は単にプリミティブ値 undefined を得る目的でしばしば使われ、一般的に “void(0)” と書かれます（これは “void 0” と等価です）。この目的であれば、代わりに値が undefined の変数、未定義のグローバル変数などを使用する事もできます。
出典：MDN void 演算子

See the Pen
undefinedの判定方法 by codepen1 (@codepen112233)
on CodePen.

まとめ

今回はJavaScriptにおける配列の空の判定に関する記事を書きましたがいかがでしたでしょうか。
JavaScriptでは配列の中が空と言っても、要素数が0なのか？nullが入っているのかで違います。

しっかり判定して、もしundefinedが出たらnullを入れるか、空文字を入れるかして修正したほうが後々配列を操作する際に困りません。

P.S.
最近タイピングゲームにハマっています。
タイピングスキルは地味なのであまり注目されないかもしれませんが、記事を書くにもプログラミングするにもタイピングスキルが高ければ早く仕事ができます。

少しホームポジションの練習するだけでもタイピングスピードが改善することがあるので皆さんも気晴らしにやってみてはいかがですか？