【JavaScript】 アレイライク・配列風・配列のようなオブジェクトとは

JavaScriptには言語仕様上『array-like object』というものがあります。

アレイライクオブジェクト、または配列風オブジェクト、または配列のようなオブジェクトと日本語訳されています。

つまり、配列に似ているけれど配列ではないオブジェクトですね。

アレイライクなオブジェクトとは、一言でいうと値が整数のlengthプロパティを持っているオブジェクトです。

ECMAScriptでは次のような処理でエラーにならないとき、アレイライクなオブジェクトと定義されています。

Assert: Type(obj)はObject型
? ToLength(? Get( obj, "length") ) の結果を返す

1行目は対象がオブジェクトかどうかを確認しています。
2行目はオブジェクトからlengthを取得して、オブジェクトの長さとして使用するのに適した整数に変換しています。

ただ2行目は、オブジェクトにlengthプロパティがないとき結果が0になります。
また、lengthプロパティが数字と判断できる文字列ならその数値、判断できないなら0になります。
つまり、エラーになりません。

例外がスローされるのは、プロパティ値がSymbol型とBigInt型の時です。
それ以外はエラーにならないので、ほとんどのオブジェクトはアレイライクと言えます。

しかし、それでは運用として使いにくいです。
lengthプロパティを持つオブジェクトをアレイライクなオブジェクトと呼ぶのが無難なので、冒頭のような表現をしています。
また、ECMAScriptには次のような文もあります。

通常、配列のようなオブジェクトには、整数のインデックス名を持ついくつかのプロパティもあります。 ただし、これはこの定義の要件ではありません。

配列は整数インデックスを持っている、という認識が一般的です。
そのため、アレイライクにも整数インデックスが必要な気がします。

しかし整数プロパティの有無は、アレイライクかどうかの判定に含まれないということですね。

Arrayオブジェクトはlengthプロパティを持っています。
そのため、Arrayオブジェクトはアレイライクなオブジェクトです。

しかしプログラムコード上ではArrayオブジェクトと、その他のアレイライクオブジェクトは別のものとして扱われます。

ブラウザ上で動作させることを目的としたJavaScriptコードでよく話題になるのが、DOMのgetElementsByClassNameメソッドです。

このメソッドの使用目的は、対象となる複数のDOM要素を取得して、全ての要素に個別に処理をおこないたいというものが考えられます。

そこで候補に挙がるのがforEachメソッドです。

const elements = document.getElementsByClassName( className );

elements.forEach( e=>console.log( e ) );
  // Uncaught TypeError: elements.forEach is not a function

しかし、エラーが出てしまいました。

どうしてでしょうか？

実はgetElementsByClassNameメソッドは、Arrayオブジェクトでななくて、HTMLCollectionオブジェクトを返しています。
HTMLCollectionオブジェクトはlengthプロパティを持っているので、アレイライクなオブジェクトです。

しかしこのオブジェクトにはforEachメソッドが定義されていないので、上記のコードでエラーになってしまったのです。

APIを含めて組み込みオブジェクトのメソッドには、アレイライクなオブジェクトを返すものがあります。
このとき、プログラマーがArrayオブジェクトだと勘違いしていることがよくあります。

バグの原因にもなるので、何が返ってきているのか確認が必要です。

Arrayオブジェクトのメソッドには、アレイライクなオブジェクトを受け付けるものがあります。
いくつか挙げてみます。

forEach

Array.prototype.forEach.call を呼び出すことで、アレイライクなオブジェクトに対してforEachを実行できます。
存在しないインデックスは無視されます。

const a = {
    0:10 , 1:undefined , 3:40,
    a:4,
    length:4,
}
Array.prototype.forEach.call( a ,
    (value,index)=>console.log(index + ":" + value)
);
// 結果: 
//  0:10
//  1:undefined
//  3:40

indexOf

Array.prototype.indexOf.call を呼び出すことで、アレイライクなオブジェクトに対してindexOfを実行できます。

const a = {
    0:10 , 1:undefined , 3:40,
    a:4,
    length:4,
}
const result = Array.prototype.indexOf.call( a , undefined );
console.log( result );

// 結果: 
//  1

検索値をundefinedにした場合、存在しないインデックスではなくて、undefined値を持っているインデックスが返ります。

join

Array.prototype.join.call を呼び出すことで、アレイライクなオブジェクトに対してjoinを実行できます。
インデックスが存在しないまたは、値がundefinedかnulなら、空の文字列として扱われます。

const a = {
    0:10 , 1:undefined , 3:40,
    a:4,
    length:4,
}
const result = Array.prototype.indexOf.call( a , undefined );
console.log( result );

// 結果: 
//  10|||40

map

Array.prototype.map.call を呼び出すことで、アレイライクなオブジェクトに対してmapを実行できます。
インデックスが存在しない場合、コールバック関数が呼び出されません。
その結果、map関数の戻り値である配列に、そのインデックスが作成されません。

const a = {
    0:10 , 1:undefined , 3:40,
    a:4,
    length:4,
}
const result = Array.prototype.map.call(a,
    (value,index)=>{
        console.log( index + ":" + value );
        return value;
    });
// console.log結果: 
//      0 :10
//      1: undefined
//      3: 40

console.log( result );
// 結果: 
//  Array(4) [ 
//      0 :10
//      1: undefined
//      3: 40
//      length: 4
//   ]