map（Array、配列）
このページでは豊富な例を用いてJavaScript（js）のArrayオブジェクト（配列）のmapの使い方を学ぶことができます。
JavaScript（js）のmapはArrayオブジェクト（配列）のメソッドの1つです。
呼び出し元の配列の各要素に対して第1引数で指定した関数が実行され、
この関数の各戻り値が格納された配列がmapメソッドの戻り値となって返されます。
mapメソッドのコールバック関数（関数の引数として与える関数）は第1引数に配列の各要素を取り、コールバック関数の中での処理に使用することができます。
TL;DR
基本
// mapは第1引数に関数を指定する
const array1 = [1, 2, 3, 4, 5];
const map_array1 = array1.map(function (element) {
return element * 2;
});
console.log(map_array1);
==> [ 2, 4, 6, 8, 10 ]
// 呼び出し元の配列には影響がありません
console.log(array1);
==> [ 1, 2, 3, 4, 5 ]
// 上記の記述は以下に書き換え可能です
function func1(element) {
return element * 2;
}
const map_array2 = array1.map(func1);
console.log(map_array2);
==> [ 2, 4, 6, 8, 10 ]
// アロー関数での指定方法
const array2 = ['js', 'py', 'ts'];
const map_array3 = array2.map((e) => {
return e.toUpperCase();
});
console.log(map_array3);
==> [ 'JS', 'PY', 'TS' ]
// 上記の処理をアロー関数の短縮形で記述する
const map_array4 = array2.map(e => e.toUpperCase());
console.log(map_array4);
==> [ 'JS', 'PY', 'TS' ]
const array3 = [{ id: 100 }, { id: 200 }, { id: 300 }];
const map_array5 = array3.map(e => {
e.id *= 10;
return e.id.toString();
});
console.log(map_array5);
==> [ '1000', '2000', '3000' ]インデックスの取得
// コールバック関数（関数の引数として与える関数）の第2引数として、
// 呼び出した配列の現在の要素のインデックス番号を取ることができる
const array1 = [1, 2, 3];
const map_array1 = array1.map((element, index) => {
return index + ':' + element;
});
console.log(map_array1);
==> [ '0:1', '1:2', '2:3' ]
const array2 = ['js', 'py', 'ts'];
const map_array2 = array2.map((e, i) => {
return {
id: i,
name: e
};
});
console.log(map_array2);
==> [ { id: 0, name: 'js' }, { id: 1, name: 'py' }, { id: 2, name: 'ts' } ]呼び出し元の配列の取得
// コールバック関数の第3引数で呼び出し元の配列をとることができる
const array1 = ['py', 'js', 'ts'];
const map_array1 = array1.map((e, i, arr) => {
return i + ':' + arr[i];
});
console.log(map_array1);
==> [ '0:py', '1:js', '2:ts' ]コールバック関数内のthisの指定
// mapメソッドの第2引数にコールバック関数実行時のthisを指定できます
const array1 = ['python', 'javascript', 'typescript'];
const obj1 = { python: 'py', javascript: 'js' };
// コールバック関数をアロー関数で定義するときには第2引数をthisとして使用できません
const map_array1 = array1.map(function (e) {
// thisはobj1となる
return this[e];
}, obj1);
console.log(map_array1);
==> [ 'py', 'js', undefined ]
// コールバック関数としてアロー関数を使用する
const array2 = ['python'];
const obj2 = { python: 'py', javascript: 'js' };
const map_array2 = array2.map((e) => {
// thisはundefined
console.log(this);
}, obj2)
==> undefined解説
基本
mapメソッドは呼び出し元の配列の各要素に対して第1引数で指定した関数が実行され、この関数の各戻り値が格納された配列を戻り値として返します。
この コールバック関数（関数の引数として渡される関数、ここではmapメソッドの第1引数） に第1引数を定義すると、実行時に呼び出し元の配列の各要素を得ることができ、コールバック関数内で値を利用することができます。
const array1 = ['JS', 'PY', 'TS'];
const map_array1 = array1.map(function (element) {
return element.toLowerCase();
});
console.log(map_array1);
==> [ 'js', 'py', 'ts' ]
// 呼び出し元の配列には影響がありません
console.log(array1);
==> [ 'JS', 'PY', 'TS' ]
const array2 = [1, 2, 3, 4, 5];
const map_array2 = array2.map((ele) => {
return ele * ele;
});
console.log(map_array2);
==> [ 1, 4, 9, 16, 25 ]
// アロー関数の短縮形
const array3 = ['Julia', 'Ivanka', 'Alijah'];
const map_array3 = array3.map(e => ({ name: e }));
console.log(map_array3);
==> [ { name: 'Julia' }, { name: 'Ivanka' }, { name: 'Alijah' } ]インデックスの取得
mapメソッドのコールバック関数に第2引数を定義することで、現在処理されている要素のインデックスを取得することができます。
配列のインデックスは0から始まるので注意してください。
const array1 = ['A', 'B'];
const map_array1 = array1.map((element, index) => {
return { index, element }; // { index: index, element: element }と同じ
});
console.log(map_array1);
==> [ { index: 0, element: 'A' }, { index: 1, element: 'B' } ]
const array2 = [100, 200, 300];
const map_array2 = array2.map((_, i) => {
return i;
});
console.log(map_array2);
==> [ 0, 1, 2 ]呼び出し元の配列の取得
mapメソッドのコールバック関数に第3引数を定義すると、呼び出し元の配列を取得することができます。
const array1 = [100, 200, 300];
const map_array1 = array1.map((e, i, arr) => {
return i + ':' + arr[i];
});
console.log(map_array1);
==> [ '0:100', '1:200', '2:300' ]コールバック関数内のthisの指定
mapメソッドは第2引数を与えることで、コールバック関数内で使用されるthisを指定することができます。
注意点として、コールバック関数としてアロー関数を使用する場合にコールバック関数内のthisは
レキシカルスコープ（lexical scope）のthis
を使用することが挙げられます。
この点に注意して第2引数を使用してください。
const array1 = ['apple', 'kiwi'];
const fruits = {
apple: { name: 'Apple', price: 100 },
banana: { name: 'Banana', price: 50 },
kiwi: { name: 'Kiwi', price: 200 }
};
const map_array1 = array1.map(function (value) {
return this[value];
}, fruits);
console.log(map_array1);
==> [ { name: 'Apple', price: 100 }, { name: 'Kiwi', price: 200 } ]
// コールバック関数としてアロー関数を使用する
const array2 = ['apple'];
const fruits2 = {
apple: { name: 'Apple', price: 100 },
banana: { name: 'Banana', price: 50 },
kiwi: { name: 'Kiwi', price: 200 }
};
const map_array2 = array2.map((value) => {
console.log(this);
}, fruits2);
==> undefined