JavaScriptにおけるコレクションの定義が分かりません。

Question

検索してみるとオブジェクトを集めた配列のようなものとありました。
漠然としてよく分かりません。
具体的には
NodeListはdocument.querySelectorAll()の戻り値の、配列風オブジェクト。
HTMLCollectionはフォームを全て格納したもの。
node.childNodesは自動的に更新されるNodeList。

よろしくお願い致します。

引用元
https://ginpen.com/2015/12/22/nodelist-vs-htmlcollection/

Comments

[m.ts10806]

それぞれ簡易にコード作って試したら明白なのでは。

Answer 1

公式、ではありませんが、ほぼ公式では次のように記載があります。

HTMLCollection
HTMLCollection - Web API | MDN

NodeList
NodeList - Web API | MDN

両者は似ているようですが、別物で、
プロパティやメソッドの違いはもちろんありますが、
最大の違いは、
**ライブ（HTML Collection）か静的（NodeList）**かの違いでしょう。
HTMLCollectionは、ライブのため、
DOMをコントロールした際、その状態が変数上でも反映されます。

NodeListは、DOMをコントロールした際、
HTMLには反映されますが、変数上では反映されません。

これは、おそらくですが、
ライブとは、DOMそのものを参照している状態であるため、DOMの変化も反映される、
静的とは、取得時点でのDOMのみ取得（コピーに近い状態）し、HTML上のその後の変化は追わない状態のものである、
と言えるかと。

ただし、MDNの記載にある通り、
NodeListにおいても、childNodesなどの、プロパティはライブである、など、
一概にNodeListが完全に静的とは言えないので、なんとも言えません。

このライブか静的かの違いを理解するには、
JavaScriptの参照に関する仕様の熟知が必要になりますので、
今段では、そういった挙動の違いがあるんだ、と覚えておくとよいかと。

Comments

[taka_oct092018]

詳しい解説、ありがとうございます。

Answer 2

JavaScriptにおけるコレクションの定義が分かりません。

いちばん確実なのは規格書だろう、ということで、ECMA-262 11.0版（ES2020）について、「Collection」という単語で検索をかけてみました。

ヒットしたものは、

• a collection ofのような、普通名詞としての用法
• 配列とTypedArrayをまとめた「Indexed Collections」という見出し
• MapやSetなどをまとめた「Keyed Collection」という見出し

だけで、術語として定められたものではありませんでした。

Comments

[maisumakun]

JavaScript的な特別な意味を込めない、単なる「値を集めたもの」という程度の意味だったのではないでしょうか？

[taka_oct092018]

回答ありがとうございます。