全要素を作り変える

01 / 05

選ぶんじゃなく作り変えたい

filter は条件に合うものを選ぶメソッドだった。中身はそのままで、数が減るだけ。

でも「全部の値段を税込みにしたい」「全員の名前に さん を付けたい」というときに欲しいのは、数はそのままで中身が変わった配列だよね。

02 / 05

map は変換した結果を並べる

map に渡す関数は、return で変換後の値を返す。map はその戻り値を集めて新しい配列にしてくれるよ。

条件を返す filter と、変換後の値を返す map。何を return するかが違うだけなんだ。

const nums = [1, 2, 3];const twice = (n) => {  return n * 2;};console.log(nums.map(twice));

実行結果

[2, 4, 6]

03 / 05

要素の数は変わらない

map は1件ごとに1件を返すので、要素の数は必ず同じ。減ることも増えることもないよ。

そして元の配列は変わらない。filter と同じで、新しい配列を作って返すだけなんだ。

const nums = [1, 2, 3];const plusTen = (n) => {  return n + 10;};const result = nums.map(plusTen);console.log(result);console.log(result.length);console.log(nums);

実行結果

[11, 12, 13]
3
[1, 2, 3]

04 / 05

種類が変わってもいい

変換後の値は、元と同じ種類でなくてかまわない。数値の配列から文字列の配列を作ってもいいんだ。

文字列だけダブルクォート付きで表示されるので、種類が変わったのが見た目でも分かるよ。

const nums = [1, 2, 3];const toText = (n) => {  return `${n}ばん`;};console.log(nums.map(toText));

実行結果

["1ばん", "2ばん", "3ばん"]

05 / 05

欲しい情報だけ抜き出す

オブジェクトの配列から、プロパティ1つだけの配列を作るのも map の得意技。

return を書き忘れると、変換後の値が決まらないので undefined が並んでしまう。うまくいかないときはまず return を探そう。

それじゃあ、作り変えてみよう。

const items = [  { name: "ペン", price: 120 },  { name: "ノート", price: 180 },];const toName = (item) => {  return item.name;};console.log(items.map(toName));

実行結果

["ペン", "ノート"]