JavaScriptの学習を進めていく上では必ず出てくるmap関数。
しかしぶっちゃけ仕組みとかよくわからんという方もいるのではないでしょうか。
今回はそんなmap関数について、forEachなどとの違いもあわせて解説していきます。
おねしゃす
map関数とは？
map関数は、JavaScriptの配列メソッドの一つで、元の配列の各要素に対して指定した関数を適用し、その結果を新しい配列として返します。元の配列は変更されません。
map関数の基本形
map関数の基本的な構文は以下の通りです。
array.map(function(element, index, array) {
// 新しい配列の要素となる値を返す
});各パラメータの説明は以下のような感じです。
element: 配列の現在の要素index: 現在の要素のインデックスarray:mapが呼び出された元の配列
map関数を使ったサンプルコード
以下にmap関数を使った実際の処理に近いサンプルを書いてみます。
こんな感じでmap関数は使われています。
例1: 配列の各要素を2倍にする
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]
例2: オブジェクトのプロパティを操作する
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const userNames = users.map(function(user) {
return user.name;
});
console.log(userNames); // ['Alice', 'Bob', 'Charlie']
例3: アロー関数を使ったシンプルな例
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]map関数を使う際の注意点
map関数を使用する際に注意しておくべきこと、覚えておくべきことがあります。
map関数は常に新しい配列を返す
map関数はもとの配列を変更せずに、常に新しい配列を返します。この点がforEachなど他のループと異なる点です。
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4]map関数は同じ長さの新しい配列を返す
map関数は元の配列と同じ長さの新しい配列を返します。
関数がundefinedを返しても、その位置にはundefinedが入ります。
const numbers = [1, 2, 3, 4];
const undefinedArray = numbers.map(() => {});
console.log(undefinedArray); // [undefined, undefined, undefined, undefined]
上記の例では、map関数内のコールバックが何も返さないため、新しい配列にはundefinedが入りますが、長さは元の配列と同じです。
要素の削除やスキップはできない
map関数は、全ての要素に対してコールバック関数を実行します。要素を削除したりスキップしたりすることはできません。これが、filter関数やforEach関数と異なる点です。
const numbers = [1, 2, 3, 4];
const noChange = numbers.map(num => {
if (num > 2) return num;
});
console.log(noChange); // [undefined, undefined, 3, 4]
forEachと何が違うの？
map関数と似たメソッドにforEachがありますが、
forEachは、各要素に対してコールバック関数を実行しますが、新しい配列を返しません。
処理結果を保持したい場合は、手動で配列を作成する必要があります。
const numbers = [1, 2, 3, 4];
const doubled = [];
numbers.forEach(num => {
doubled.push(num * 2);
});
console.log(doubled); // [2, 4, 6, 8]
mapとforEachの比較
const numbers = [1, 2, 3, 4];
// mapを使った場合
const doubledWithMap = numbers.map(function(num) {
return num * 2;
});
console.log(doubledWithMap); // [2, 4, 6, 8]
// forEachを使った場合
const doubledWithForEach = [];
numbers.forEach(function(num) {
doubledWithForEach.push(num * 2);
});
console.log(doubledWithForEach); // [2, 4, 6, 8]
mapは新しい配列を直接返すためシンプルに書けますが、forEachを使う場合は新しい配列に要素を手動で追加する必要があります。
以上がJavaScriptのmap関数の基本的な使い方と注意点です。適切に使い分けることで、効率的なコードを書くことができます。
なるほどなぁ
