ARRAY METHOD
Array.prototype.map()
配列の一つひとつを同じルールで変換し、その結果を新しい配列として受け取りたいときに使います。 元の配列はそのままなので、変換前と変換後を安心して見比べられます。
TRY IT
遊んでみよう
数値と変換ルールを変えて、元の配列と新しい配列を見比べてみましょう。
元の配列
各要素は -100〜100 の数値に制限しています。
入力・元の配列変わらない
出力・新しい配列新しく作られる
const numbers = [1, 2, 3, 4];
const mapped = numbers.map((number) => number * 2);
console.log(mapped); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4]NAME
mapの意味
map /mæp/
英語の map には「対応づける」という意味があります。JavaScriptでは、元の配列の各要素を 別の値へ1対1で対応づけ、新しい配列を作るイメージです。
SYNTAX
構文
array.map(callbackFn)
array.map(callbackFn, thisArg)| 名前 | 型 | 省略 | 説明・既定値 |
|---|---|---|---|
callbackFn | 関数 | 不可 | 各要素に対して呼ばれ、返した値が新しい配列の要素になります。 |
thisArg | 任意 | 可 | コールバック内の this に使う値。既定値は undefined です。 |
callbackFnが受け取る3つの値
element（任意の型）: 現在処理している要素index（number）: 現在の要素の位置番号。先頭は0array（Array）:map()を呼び出した元の配列
const labels = [10, 20, 30].map((element, index, array) => {
return `${index + 1}/${array.length}: ${element}`;
});
console.log(labels); // ["1/3: 10", "2/3: 20", "3/3: 30"]RETURN VALUE
戻り値と元の配列
戻り値
型は Array。コールバックの返り値を順番に並べた、新しい配列です。空配列なら空配列を返します。
元の配列
map() 自体は元の配列を変更しません。ただし、コールバック内でオブジェクトを変更すると、その変更は共有された参照へ反映されます。
QUICK REFERENCE
早見表
| 目的 | 配列のすべての要素を変換する |
|---|---|
| 返すもの | 変換結果を入れた新しい配列 |
| 元の配列 | map() 自体は変更しない |
| コールバック回数 | 値がある各要素につき1回 |
| 空配列 | コールバックを呼ばず [] を返す |
| 配列の長さ | 疎配列を含め、基本的に元の配列と同じ長さ |
EXAMPLES
よくある使い方
数値を計算する
const prices = [100, 250, 400];
const taxIncluded = prices.map((price) => Math.round(price * 1.1));
console.log(taxIncluded); // [110, 275, 440]オブジェクトから値を取り出す
const users = [{ name: "Aki" }, { name: "Mio" }];
const names = users.map((user) => user.name);
console.log(names); // ["Aki", "Mio"]位置番号を使う
const tasks = ["読む", "書く"];
const numbered = tasks.map((task, index) => `${index + 1}. ${task}`);
console.log(numbered); // ["1. 読む", "2. 書く"]CAUTIONS
例外と注意点
callbackFn は必須
コールバックを渡さない、または関数ではない値を渡すと TypeError が発生します。null や undefined に対して呼び出すこともできません。
コールバックでは値を返す
return を忘れると、その位置には undefined が入ります。処理だけを行い戻り値を使わないなら、forEach() の方が意図が伝わります。
疎配列の空きはそのまま
値が存在しないスロットではコールバックが呼ばれず、戻り値にも同じ位置の空きが残ります。
const sparse = [1, , 3];
const mapped = sparse.map((value) => value * 2);
console.log(mapped); // [2, empty, 6]
console.log(1 in mapped); // falseRELATED
関連する関数
REFERENCES