JavaScriptでPHPのempty()のように空判定ができる関数

 JavaScriptにはオブジェクトや配列などの引数に与えた変数(値)が「」かどうかを判定する関数がない。つまり、PHPで云うところの empty() や、Railsで云うところの blank? といったビルトインメソッドがないのだ。
 ある変数について値が空かどうかという条件式は結構多用するので、ないならば作ってしまおう、ということでPHPの empty() 的な関数を自作してみた(実際のソースは後述)。その際、JavaScriptでの様々な「型」における「空」の判定について調査して、色々と気づいたことも多かったので、この記事にまとめてみた次第。

JavaScriptにおける「型」別の「空」について

 まず、JavaScriptにおいて変数が「空」であるという定義にはブレがある、というか一意な解釈がないという方が正しいのかもしれない。それが「空」を判定するようなビルトインメソッドがないことに繋がっているのだろう。変数型ごとの「空」の解釈が利用者に依存しているような状況なうえ、さらにECMAScript6で追加された「シンボル」型がその定義をさらに混沌とさせている(ような気がする)。
 理論だけだといまいちピンとこないので、有名どころのライブラリである「is.js」と「underscore.js」を引き合いにして、実際に値の「空」がどのように判定されているかを例示してみよう。

判定する値 値の説明 is.js: is.empty() underscore.js: _.isEmpty() 期待値としての判定結果
{} 空のオブジェクト true true true
sym = Symbol(); Object(sym) プリミティブ値がシンボルのオブジェクト true true プリミティブ値が存在しているオブジェクトなので false であるべき
obj = {}; a = Symbol('a'); obj[a] = 'foo' シンボルのプロパティを持つオブジェクト true true プロパティが存在するので false であるべき
{ constant: [], method: function(){} } メソッドを持つクラスオブジェクト false false false
Symbol() シンボル false true 暗黙的にプリミティブデータをラップしているため false であるべき
Symbol("Foo") descriptionを持つシンボル false true 同上
Symbol.for("foo") キーを持つシンボル false true 同上
new String() 空のStringオブジェクト false true 値がないオブジェクトのため true であるべき
new String("Bar") プリミティブ値を持つStringオブジェクト false false 値を持つオブジェクトのため false であるべき
"bar" 文字列 false false false
"" 空の文字列 true true true
"0" 文字列の0 false false 文字列として値があるので false であるべき
new Number() 空のNumberオブジェクト true true 値がないオブジェクトのため true であるべき
new Number(0) プリミティブ値が0のNumberオブジェクト true true 数値の0として判定し true が理想
new Number(1) プリミティブ値が1のNumberオブジェクト true true 数値の1として判定し false が理想
1 数値の1 false true 真偽値解釈として0以外の数値は false が理想
-1 数値の―1 false true 同上
0 数値の0 false true 真偽値解釈として0はfalseと同等に扱い true が理想
3.14 (浮動小数点を含む)数値の3.14 false true false
NaN 非数のグローバルプロパティ false true 数値でない値が存在するという意味から false が理想
[] 空の配列 true true true
[1,2,3] 配列 false false false
arr = [a,b,c]; arr[Symbol.iterator] ウェルノウンシンボルのイテレータ false true 実体はfunction型であるため false であるべき
new Boolean() 空のBooleanオブジェクト true true 値がないオブジェクトのため true であるべき
new Boolean(true) プリミティブ値がtrueのBooleanオブジェクト true true 真偽値のtrueとして判定し false が理想
new Boolean(false) プリミティブ値がfalseのBooleanオブジェクト true true 真偽値のfalseとして判定し true が理想
true 真偽値のtrue false true 真偽値解釈として有効な値という判定から false が理想
false 真偽値のfalse false true 真偽値解釈として無効な値という判定から true が理想
undefined undefiend型オブジェクトのプリミティブ値 false true 値が未定義なので true であるべき
null null値(リテラル) false true 値がないので true であるべき

 期待値についての解釈には個人差があるかもしれない。それこそが、JavaScriptにおける「空」判定の難しさであり、混沌の深淵でもある。私が期待値として解釈のベースとしたのは、PHPの empty() 関数である。そのPHPの empty() による判定結果は下記の通りだ。

判定する値 値の説明 PHP: empty() 補足
new stdClass() object(stdClass) 空のオブジェクト false オブジェクトの空判定には get_object_vars などを使うべき
(object) "ciao" object(stdClass) スカラー値のみを持つオブジェクト false 同上
new Class{} object(class@anonymous) 空のクラス false 同上
$closure = function(){ return; } object(Closure) クロージャ false 同上
"foo" string(3) 文字列 false
"" string(0) 空の文字列 true
"0" string(1) 文字列の0 true 文字列として値があるので false であるべき
1 int(1) 整数値 false
-1 int(-1) 整数値の-1 false
0 int(0) 整数値の0 true
0.0 float(0) 浮動小数点値の0 true
array() array(0) 空の配列 true
array(1,2,3) array(3) 配列 false
true bool(true) 真偽値のtrue false
false bool(false) 真偽値のfalse true
global $glob_var NULL 定義済みグローバル変数 true 対象スコープ上に変数が定義されたのみで値はない
static $stat_var NULL 定義済みローカル変数 true 同上
null NULL null値 true
new SimpleXMLElement('<div></div>') object(SimpleXMLElement) 空要素のみのSimpleXMLElementオブジェクト true
new SimpleXMLElement('<div class="clearfix"></div>') object(SimpleXMLElement) 属性あり空要素のSimpleXMLElementオブジェクト false
tmpfile() resource of type (stream) ストリーム参照リソース(いわゆるファイルハンドル) false リソースの空判定には別途 fread などで実データを取得する必要がある
$fh = fopen("//google.com", "r"); fclose( $fh ) resource of type (Unknown) 参照を破棄されたリソース false リソースの開放を判定するには is_resource を使う

 何気に、PHPの「空」判定も十分にカオスなのだが、判定指針がユーザー任せのJavaScriptよりはだいぶマシであり、参考にできるのではないかと。
 PHPの「空」判定については、下記の記事が抜群にわかりやすい。

isset, empty, is_null の動作まとめ

JavaScript の typeof には罠がある

 前述した通り、JavaScriptで「空」判定を行うにあたっては変数の「型」の識別が重要になってくる。まず、変数の型を判定して、それぞれの型に沿って値が「空」かどうかを調べるという手順になるからだ。
 そこで、JavaScriptにおける型について簡単におさらいしておこう。下記の記事が非常に参考になる。

 上記の記事で云われているように、JavaScriptにおけるオブジェクト型には内包される要素が非常に多い。さらに、ECMAScript6から新たに追加された シンボル型 にも注意が必要になる。
──ということを踏まえて、JavaScriptでの型を一覧化してみると次のようになる。

型の概要 typeof の結果
String 「文字列」型 string
Number 「数値」型。非数である NaN もこの型に属する number
Boolean 「真偽値」型 boolean
Undefined 「未定義」型 undefined
Null 本来は「Null」型に分類されるべきところだが、実際にはオブジェクト型と判定される。ECMAScriptのバグと云われている object
Symbol 「シンボル」型。ECMAScript6 で新規追加された symbol
Function 「関数オブジェクト」型 function
XML 「E4X XML オブジェクト」型。私は今までお目にかかったことがない稀少な型 xml
Object 「オブジェクト」型。前出の型以外はすべてこの型となる object

 JavaScriptで型を判定する際に使われる typeof に依存してしまうと、Nullがオブジェクト型と認識されてしまい、値の「空」判定においては致命的になりかねない。また、プリミティブ値として文字列や数値、真偽値を持ちながらオブジェクトとして判定される new String("bar") のようなラッパーオブジェクトにも注意が必要だ。

──では、注意点をおさえながら、実際に「空」判定のコードを書いてみる。

値の「空」判定関数

 判定処理の期待値として、私が考える値の「空」の解釈の特筆すべき点は下記の通りだ。

  • オブジェクト型については、プロパティがシンボルなどのプリミティブ値であっても、それを値をみなして「空」とはしない。
  • ラッパーオブジェクトのオブジェクト型は、変換されるプリミティブ値にもとづいて「空」判定を行う。
  • ネストするオブジェクトについては最終的なプリミティブ値まで再帰的に「空」判定を行う。
  • 真偽値型の「空」判定はPHPの empty() 関数の解釈に準じる。
  • シンボル型や関数オブジェクト型は、一律で「空」とはしない。

──これらの「空」判定ルールに沿って作った関数がこれである。

 この例では「is_empty」を無名関数として定義しているが、この場合、関数の巻き上げが行われないため、実際に「空」判定を行いたい処理より前にコードを書いておかないと実行できない。JavaScriptの読み込み順序などを気にせずに使いたい場合は、通常の関数宣言として記述しておくとよいだろう。

判定結果

判定する値 値の説明 is.js: is.empty() underscore.js: _.isEmpty() is_empty()
{} 空のオブジェクト true true true
sym = Symbol(); Object(sym) プリミティブ値がシンボルのオブジェクト true true false
obj = {}; a = Symbol('a'); obj[a] = 'foo' シンボルのプロパティを持つオブジェクト true true false
{ constant: [], method: function(){} } メソッドを持つクラスオブジェクト false false false
Symbol() シンボル false true false
Symbol("Foo") descriptionを持つシンボル false true false
Symbol.for("foo") キーを持つシンボル false true false
new String() 空のStringオブジェクト false true true
new String("Bar") プリミティブ値を持つStringオブジェクト false false false
"bar" 文字列 false false false
"" 空の文字列 true true true
"0" 文字列の0 false false false
new Number() 空のNumberオブジェクト true true true
new Number(0) プリミティブ値が0のNumberオブジェクト true true true
new Number(1) プリミティブ値が1のNumberオブジェクト true true false
1 数値の1 false true false
-1 数値の―1 false true false
0 数値の0 false true true
3.14 (浮動小数点を含む)数値の3.14 false true false
NaN 非数のグローバルプロパティ false true false
[] 空の配列 true true true
[1,2,3] 配列 false false false
arr = [a,b,c]; arr[Symbol.iterator] ウェルノウンシンボルのイテレータ false true false
new Boolean() 空のBooleanオブジェクト true true true
new Boolean(true) プリミティブ値がtrueのBooleanオブジェクト true true false
new Boolean(false) プリミティブ値がfalseのBooleanオブジェクト true true true
true 真偽値のtrue false true false
false 真偽値のfalse false true true
undefined undefiend型オブジェクトのプリミティブ値 false true true
null null値(リテラル) false true true

 期待値通りの判定が行われている。
 参考までに、判定結果のテスト用コードも紹介しておく。

まとめ

 JavaScriptにおける値の「空」判定は、結局のところ各ユーザーの「空」の解釈によってブレがあるため、横断的に変数が「空」かどうかを判定するビルトインメソッドのようなものがないのだろう。
 それをユーザー関数でカバーしようとすると、JavaScriptの大雑把な「型」判定に悩まされることが分かった。特に、実際には様々な型を有するオブジェクト型をどこまで切り出して「空」判定をするのかというポリシー的なものが大きいのではないだろうか。
 今回の「空」判定では、対象とするオブジェクト型を配列とオブジェクトとラッパーオブジェクトに限定してあるが、他にもDateやJSON、Error、RegExpなどのオブジェクトも存在するため、それらの「空」判定も行うとなるとその分関数処理が肥大化していくことになるだろう。
 
 結果的には、実用に耐えられそうな「空」判定関数が作成できたので、収穫は大きかったと云える。 

Leave a Reply

Your email address will not be published.