はじめに
本格的にJavaScriptでロジックを書く機会が増えて、「配列」と出会う機会が増えました。
困ったことにJavaScriptでは単なる配列のみならず、「配列ライク」や「反復可能なオブジェクト」といったものが存在し、その種類によって実行可能な制御文やメソッドが異なります。
この記事では配列・配列ライク・反復可能なオブジェクトを基本的な概念から順に紐解き、それぞれの特徴や違いについて説明します。
information
この記事ではそれぞれの特徴や関係性を中心に説明するため、対応するメソッドなどの詳細な説明は省略します。
目的
- 複数要素を格納・操作するオブジェクトにも種類があり、その違いを理解する
- それぞれの特徴を理解した上で最適な実装アプローチを目指す
対象者
- JavaScript初学者
- 「
forEach()でまわせない！なんで？」と悩んでいる方
1. 配列リテラルとオブジェクトリテラル
ますは基本的なデータ型からの説明です（説明不要の方は読み飛ばしてください）。
JavaScriptのデータ型は大きく基本型（プリミティブ型）と参照型（構造型）に分けられます。その中で、参照型に属する配列リテラルとオブジェクトリテラルがいわゆる"配列"として扱うことができます。
JavaScriptのオブジェクトリテラルは連想配列と同一の概念であり、他言語ではハッシュと呼ばれたりもします。配列の観点において両者は以下の違いがあります。
| データ型 | 特徴 |
|---|---|
| 配列 | ・個々のデータ = "値" ・キーはindex番号 ・順序を保証する |
| オブジェクト （連想配列） |
・個々のデータ = "プロパティ" ・文字列をキーとしてアクセス可能 ・順序は保証しない |
「スタック」や「キュー」などのデータ取得処理やmapやfilterメソッドを用いた順序あるリストを想定した処理は配列のみ可能です。
データ型を見ると配列と連想配列が区別されていることがわかりました。
オブジェクトの概念
続いてJavaScript上のオブジェクトの概念です。
「オブジェクト」という単語には狭義/広義的の2種類の意味で使用されます。
| 特徴 | |
|---|---|
| 狭義 | ・実装的な視点。いわゆる連想配列（ハッシュ）としての意味 |
| 広義 | ・オブジェクト自体を一つの"モノ"として扱う |
広義的に扱うオブジェクトとはオブジェクト指向に通ずる概念です。
以降の説明ではデータ型としてのオブジェクトを"連想配列"と呼び、オブジェクトと区別して扱います。
反復可能なオブジェクト
ArrayやString, Map, Setなど、配列リテラルでなくても配下の要素を列挙できるオブジェクト = 反復可能なオブジェクトがあります。例えばfor...of命令での反復処理が可能なのは、それらのオブジェクトが規定でイテレーターを備えているからです。
イテレーターの説明については割愛しますが、内部的に[Symbol.iterator]メソッドを持つことが条件となります。
▼ MDNより
反復可能であるために、オブジェクトは [Symbol.iterator]() メソッドを実装する必要があります。これはつまり、オブジェクト（または、プロトタイプチェーン上のオブジェクトの一つ）が[Symbol.iterator]キー（Symbol.iterator 定数にて利用可）のプロパティを持つ必要があります。
留意すべきは配列リテラルもイテレーターを備えている（から要素を列挙できる）ことです。
配列ライクなオブジェクト
「配列のようで配列ではない、けど一部配列と同じ処理ができる」ものをしばしば配列ライクなオブジェクトと呼びます。
-
lengthプロパティを持っていること -
0からlength - 1までの添字つき要素を持つこと
DOMオブジェクトであるNodeListやHTMLCollection、引数情報を管理するargumentsなどのオブジェクトは配列ライクなオブジェクトになります。注意すべきは、配列ライクなオブジェクトにはイテレーターをもつものともたないものがあることです。
配列・反復可能なオブジェクト・配列ライクなオブジェクトの関係をベン図で表すと以下の通りになります。
反復可能なオブジェクトに対して部分集合の関係をとり、それ故一部利用できない配列用のメソッドがある場合があります（利用できる配列ライクなオブジェクトも存在するのでどうしても曖昧な説明になりますね）。
まとめ
JavaScriptにおいて、複数要素を格納・操作するオブジェクトにいくつか種類があり、以下の順序で考えると整理できました。
- データ型の配列リテラルとオブジェクトリテラルの存在
- 「オブジェクト」指向の概念 => 連想配列とオブジェクトの分離
- オブジェクトの中には反復可能なオブジェクトがある => イテレーターの有無で判断
- 配列ライクなオブジェクト => 反復可能なオブジェクトに対して部分集合の関係
あとは実際に手を動かして慣れること、ですね！