【JavaScript】 mapメソッドについて徹底解説！

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メソッドの応用的な使い方

リンクをコピーしました

この章では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を使った繰り返し処理を使うことを検討しましょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ