【JS】map関数について理解する

map関数の基本を復習したのでメモ。

map関数とは

一言で表すと、新しい配列を作る関数。
元となる配列の要素を読み込み、一つずつ同じ処理を加え新たな配列を生成する。
for文よりもスッキリかけちゃうことがメリット。

例えば、下記の配列の値全てを2倍にした新たな配列を作りたい。

  const list = [1, 2, 3, 4];
  // 出力後↓
  // [2,4,6,8]

main

const list = [1, 2, 3, 4];
const newList = list.map((x) => x * 2);
console.log(newList); // =>[2,4,6,8]が出力される

サンプルコード

詳細説明

list配列を取り出し、要素一つずつ（変数x）に対して処理を行う。（処理内容はmap関数のカッコ内）
処理した結果を新しい配列として変数newListに格納する。

const newList = list.map((x) => x * 2);

連想配列

参照する配列が連想配列の場合、下記のように出力する。

const obj = {
  hoge: { text: "fuga" },
  foo: { text: "bar" }
};

const objToArray = Object.keys(obj).map((key) => {
  const value = obj[key];
  value["id"] = key;
  return value;
});

console.log(objToArray);

詳細説明

Object.keys(obj)は、配列objのkeyだけを取り出して配列を作ってくれる。

console.log(Object.keys(obj)); // ['hoge', 'foo']

map関数を加えることで、上記配列に対して要素一つずつを取り出し処理（アロー関数カッコ内の内容）を行う。これらトータルの内容を変数objToArrayに格納。

const objToArray = Object.keys(obj).map((key) => {処理});

アロー関数カッコ内の内容を説明していく。
まずは、Object.keys(obj)で作られた配列の要素を、変数valuに格納。

  const value = obj[key]; //console.log(value); → {text: "fuga"} {text: "bar"}

配列の要素に対してidというkeyを追加し、Object.keys(obj)のkeyを代入していく。
結果、連想配列をオブジェクトの配列として出力することができた。

  value["id"] = key; 
//console.log(value); → {text: "fuga", id: "hoge"} {text: "bar", id: "foo"}

サンプルコード