2つの配列からペアを作る(zip操作)

このレッスンでは、2つの配列からペアを作るzip操作を学び、対応する複数のデータをまとめて扱えるようになることを目標にします。「JavaScript 配列 zip」「JavaScript 複数配列 組み合わせ」で調べている方向けの内容です。

「名前の配列」と「点数の配列」のように、対応する2つの配列を1つずつ組み合わせてペアの配列にすることをzip操作と呼びます。「靴下を左右ペアにする」ようなイメージです。JavaScriptには専用のzipメソッドはありませんが、.map()を使えば簡単に実現できます。

サンプルコードでは、names.map((name, i) => [name, scores[i]])という書き方で、名前の配列を基準にループしながら、同じ添字の点数を組み合わせて[名前, 点数]というペアの配列を作っています。.map()の第2引数に渡される添字(index)をうまく活用しているのがポイントです。

初心者がよくつまずくのが、2つの配列の長さが異なる場合の扱いです。基準にした配列より短い方の配列にアクセスするとundefinedが返ってくるため、長さが揃っていることを事前に確認するか、短い方に合わせて処理する工夫が必要になる場合があります。

別々に管理していたデータをひとまとめのオブジェクトに変換してから表示したい、といった場面で役立つテクニックで、他の言語でも共通して使われる考え方です。複数のリストを1つのオブジェクト配列にまとめ直す、実務でもよくある下ごしらえの処理です。