公開日:
【JavaScript】 mapメソッドについて徹底解説!
![ぴっかちゃん](/packs/media/images/chara-right-e7bf4fa3096d5c964215b40162534f2f.png)
mapメソッドは配列の各要素に対して特定の処理を実行し、新しい配列を作成するメソッドです。
1
2
3
配列.map(function(配列内の各要素) {
return 新しい配列の要素を生成する処理
});
mapメソッドの基礎情報
この章では、map
メソッドの基礎情報について解説します。
mapメソッドの基本的な使い方
map
メソッドは配列に対して使用するメソッドです。map
メソッドを使うと配列の各要素を順番に取り出し、引数でその各要素に対して何らかの処理を実行するコールバック関数を渡すことで、その結果を新たな配列として作成します。
以下が基本的な書き方です。
1
配列.map(コールバック関数);
わかりやすく書くと以下のようになります。
1
2
3
配列.map(function(配列内の各要素) {
return 何らかの処理
});
もしくは以下のようにも書くことができます。
1
配列.map(配列内の各要素 => 何らかの処理);
これだけではわかりにくいので実際に使用してみましょう。
この例では1
から5
までの数値が入った配列に対して、それぞれに1
を足した数が入る配列に変換してみます。
1
2
3
4
5
6
const numbers = [1, 2, 3, 4, 5];
const newArray = numbers.map(function(number) {
return number + 1;
});
console.log(newArray); // [2, 3, 4, 5, 6]
または以下のようにも書けます。
1
2
3
4
const numbers = [1, 2, 3, 4, 5];
const newArray = numbers.map(number => number + 1);
console.log(newArray); // [2, 3, 4, 5, 6]
上のようにアロー関数を用いた書き方にするとコードがより簡潔になり、可読性が向上します。
今回の例では、配列から最初に1
を取り出し、それをnumber
という変数に代入します。そしてnumber + 1
という処理が実行されます。その後、新たな配列に結果が格納され、次の要素である2
がnumber
に代入され、同様の処理が再度実行されます。これが最後の要素まで繰り返され、新たな配列が結果として返されます。そしてその配列を新たに作成した変数newArray
に代入しています。
map
メソッドは使用した配列の内容を変更するのではなく、使用した配列から新たな配列を作成します。そのため、新たな配列を格納するための変数を定義することが重要です。
また、以下のような使い方もできます。
1
2
3
4
5
6
7
const users = [
{ name: '山田', age: 25 },
{ name: '中村', age: 30 },
{ name: '新井', age: 35 }
];
const names = users.map(user => user.name);
console.log(names); // ['山田', '中村', '新井']
この例では、各ユーザーオブジェクトからname
プロパティだけを抽出し、新しい配列として返しています。
forEachとの違い
map
メソッドと同じような繰り返し処理のメソッドにforEach
メソッドがあります。forEach
メソッドも配列に対して使用し、各要素に対して何らかの処理を繰り返し実行するメソッドです。
違いとして、map
メソッドは新しい配列を作成するのに対し、forEach
メソッドは新たな配列を作成せず、コールバック関数の処理を行うだけになります。そのためforEach
メソッドの返り値はundefined
になります。
1
2
3
4
5
6
const numbers = [1, 2, 3, 4, 5];
const newArray = numbers.forEach(function(number) {
return number + 1;
});
console.log(newArray); // undefined
このようにforeach
はただ単に繰り返し処理を行うだけのメソッドです。以下がmap
とforEach
の違いになります。
特徴 | map | forEach |
---|---|---|
戻り値 | 新しい配列を生成して返す | undefined を返す |
元の配列への影響 | 元の配列は変更されず、新しい配列が生成される | 元の配列は変更されず、処理のみを行う |
使用用途 | 各要素を変換して新しい配列を生成するのに適している | 各要素を反復処理するのに適している |
mapメソッドの応用的な使い方
この章ではmapメソッドの応用的な使い方を解説していきます。
オプションで使えるコールバック関数の引数
map
メソッドでは応用的な使い方をすることで、元の配列の中身を書き換えることができます。
実はコールバック関数の引数にはオプションとして2つの引数を使うことができます。
1
2
3
配列.map(function(各要素, インデックス, 使用した配列) {
return 新しい配列の要素を生成する処理
});
使わない場合は省略します。
以下の例ではオプションとしてインデックスを引数として渡しています。
この例では、配列内の要素は3つあるため、index
にはそれぞれ0
、1
、2
が代入されます。
1
2
3
4
5
6
const numbers = [2,4,6]
const newArray = numbers.map(function(number, index) {
return index
});
console.log(newArray) // [0, 1, 2]
map
メソッドでは、第3引数にmap
を使用している配列、つまり元の配列が代入されます。そのため、以下のようにすると元の配列の中身を書き換えることができます。
1
2
3
4
5
6
const numbers = [2,4,6]
numbers.map(function(number, index, array) {
array[index] = number + 1;
});
console.log(numbers) // [3, 5, 7]
mapの第2引数
map
メソッドで第2引数として別のオブジェクトを指定することで、this
の参照先を変更することができます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 人物のデータを表すオブジェクト
const peopleData = {
'田中': 25,
'山本': 30,
'菅原': 35,
'宮崎': 40
};
// 特定の人物を選択する
const selectedPeople = ['宮崎', '田中'];
// 選択された人物の年齢を取得する
const result = selectedPeople.map(function(name) {
return this[name];
}, peopleData);
console.log(result); // [40, 25]
上の例ではmap
メソッドのコールバック関数内でthis[name]
を使用して、指定された人物の年齢を取得しています。この場合のthis
はコールバック関数の第2引数で渡したpeopleData
のことを指します。name
の中にはselectedPeople
の要素が順番に入るので、peopleData
の配列から対応する人物の年齢を取得しています。
このようにthis
を使うことで、より柔軟なプログラミングが可能となります。this
について詳しく知りたい方はこちらの記事を参考にしてみてください。
使う際の注意点
この章ではmap
メソッドを使う際の注意点を紹介します。
元の配列は変更されない
前述した通りmap
メソッドは新しい配列を作成するため、元の配列には影響を与えません。ですので、新たな変数を作成し、代入するのを忘れないようにしましょう。
元の配列を変更したい場合は、引数のオプションを渡すと覚えておきましょう。
1
2
3
4
5
6
const numbers = [2,4,6]
numbers.map(function(number, index, array) {
array[index] = number + 1;
});
console.log(numbers) // [3, 5, 7]
繰り返し処理からは抜けられない
map
メソッドのコールバック関数内ではbreak
が使えないため、繰り返し処理から抜け出すことができません。間違って記述するとエラーが発生するので注意しましょう。
1
2
3
4
5
6
7
8
9
10
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => {
if (num === 3) {
break; // ここでbreakを使ってループを終了しようとするが、エラーが発生する
}
return num * 2;
});
console.log(doubledNumbers); // この行は実行されない
この場合以下のエラーが発生し、コードが止まります。
メモリ消費が大きい
map
メソッドは新しい配列を生成して返すため、元の配列と新しい配列の両方がメモリ上に存在します。そのため、大きな配列に対して使用するとメモリ消費量が増える可能性があるので注意が必要です。その場合はfor
を使った繰り返し処理を使うことを検討しましょう。
この記事のまとめ
- mapメソッドは配列に対して使い、繰り返し処理を行った後に新しい配列を作成するメソッド
- 同じようなメソッドにforEachメソッドがある
- コールバック関数には3つの引数を渡せる
![ぴっかちゃん](/packs/media/images/chara-general-3dd00c379ab4c2fc7a7bfe5f2d667314.png)