JavaScriptの配列とSetとオブジェクトとMapはどう使い分けるべきか？

2021年2月2日2021年4月24日JavaScript

JavaScriptの配列とSetとオブジェクトとMapはどう使い分け方についてまとめました。

配列とSetとオブジェクトとMapの使い分け方

まず、似た特徴から、
配列とSetグループとオブジェクトとMapグループに別れます。

シンプルなリストの場合：配列とSet

配列とSetのどちらかを使います。

配列とSetの違い

重複値は配列はOKですが、Setは不可です。重複値を持ちたくない場合にSetを使います。
for-inを使ったループは、配列が可能ですが、Setはできません。
for-ofを使ったループは、配列もSetも可能です。

配列を使うとき

配列は、次のときに使用します。

• 順番付きのリストのとき。
• 重複していてもかわまないとき
• データを操作する必要があるとき

配列の使い方に関しては次の記事を参考にしてみてください。

Setを使うとき

Setは、次のときに使用します。

• 重複のないユニークな値が必要なとき
• 本当にハイパフォーマンスが必要なとき
• 重複を削除したいとき

Setの使い方に関しては次の記事を参考にしてみてください。

キーと値のペアの場合：オブジェクトとMap

オブジェクトとMapのどちらかを使います。
キーは値を描写するためのものです。
そのため値を描写して管理する必要がある場合はこちらのグループを選択します。

オブジェクトとMapの違い

オブジェクトのキーは、文字列となりますが、Mapは成約がありません。関数でもOKです。
for-inを使ったループは、オブジェクトが可能ですが、Mapはできません。
for-ofを使ったループは、オブジェクトはできませんが、Mapは可能です。

オブジェクトを使うとき

オブジェクトは、次のときに使用します。

• オブジェクトは伝統的な方法でMapがなかったため使われているケースがある
• 慣れ親しまれているため、理解のしやすさを優先したい場合
• 値へのアクセスのしやすさを優先したい場合（ドット記法とブラケット記法）
• 関数（メソッド）を使うとき
• JSONと使うとき

特に、Mapにはthisキーワードがないので、関数を使うときはオブジェクトの方が便利です。
また、JSONデータを扱うときも、Mapに変換することは可能ですが通常はやらないため、オブジェクトを使います。
オブジェクトの使い方に関しては次の記事を参考にしてみてください。

Mapを使うとき

Mapは、次のときに使用します。

• よりよいパフォーマンスを重視する場合
• キーにあらゆるデータ型にしたいとき
• iterableである方がいいとき
• sizeを計算したいとき
• map keyとvalueが必要なとき
• keyが文字列でないものを必要としているとき

Mapの使い方に関しては次の記事を参考にしてみてください。

JavaScriptの他のBUILT-INについて

• WeakMap
• WeakSet

JavaScriptのNON-BUILT-INについて

• Stacks
• Queues
• Linked Lists
• Trees
• Hash tables

データの流れについて

JavaScriptのデータの出どころには、三種類あります。

• プログラムでデータを直接書く
• ユーザーインターフェース
• 外部ソース（Web API)

ユーザーインターフェースは、ユーザーが入力したものやDOMのデータになります。
家計簿アプリやtodoアプリなどを想像するとわかりやすいでしょう。
データを整理するには、次の2ステップが必要となります。

• データを集める
• データを構造化する

そして、データを構造化する際に、JavaScriptでは、配列とSetとオブジェクトとMapという選択肢があります。
MapとSetはデータを管理するための箱です。このような箱のことをコレクションと呼ぶことがあります。