【JavaScript】新しい配列を生成するmapメソッドを理解する

JavaScriptでは配列の処理を行うメソッドとして、map() が頻繁に使用されています。

このmapメソッドは与えられた関数を配列データの全要素に対して実行し、その結果を新しい配列を生成することができます。

この記事では、配列のmapメソッドについて利用方法やポイント、使用例を紹介しています。これからmapメソッドを利用する方におススメの記事です。

mapメソッドについて

JavaScriptの配列を扱うArrayオブジェクトには開発する上で欠かせないメソッドが標準で用意されています。mapメソッドはその中の１つです。

mapメソッドを利用することで、配列の全ての要素を１つずつ取り出してcallback関数を実行し、処理した結果を新しい配列として返します。

このメソッドを利用する、基本的な書き方は次の通りです。

mapによって配列の要素がvalueに格納され、そのvalueを利用してcallback関数内で処理が実行されます。

callback関数は、いくつかの引数を受け取ることが可能です。例えば引数が３つの場合は次のように使用します。

valueに配列から取り出した要素、indexに取り出した要素のインデックス番号、thisArrayが現在処理している配列となります。

mapメソッドのポイント

mapメソッドに近い処理を行うメソッドとして、forEachメソッドがあります。forEachメソッドは返り値がない一方で、mapメソッドは返り値があります。

この返り値があることで対象の配列はそのままにして、対象の配列の中から特定のオブジェクトを抜き出すことが可能です。

const students = [
    {name : '田中', age : 24 },
    {name : '佐藤', age : 19 },
    {name : '原田', age : 20 },
    {name : '有田', age : 21 },
    {name : '木村', age : 25 }
];

const studentName = students.map(student => student.name);
console.log(studentName);

// ['田中', '佐藤', '原田', '有田', '木村']

対象の配列の中から特定のオブジェクトを抜き出すことができました。

このmapメソッドの弱点として、配列の中で特定の条件に一致した要素のみを抜き出すことができない点です。

特定の条件に一致する配列を作成するなら、Arrayオブジェクトで用意されているfilterメソッドやforEachなどを利用しましょう。

mapメソッドの使用例

ここからはmapメソッドの使用例について紹介をします。

数値を倍に変換

const values = [1, 5, 13, 24, 30];
const multiple = values.map (value => value * 2);
console.log(multiple);

// [2, 10, 26, 48, 60]

Callback関数の処理で要素に２を掛けることで倍に変換された新しい配列を作成することができます。

要素の文字の長さを取得

const array = ['onion', 'carrot', 'potatp', 'meat', 'pumpkin'];
const arrayLength = array.map (value => value.length);
console.log(arrayLength);

// [5, 6, 6, 4, 7]

Callback関数の処理でlengthプロパティを使って要素の文字の長さを取得します。取得した文字長さで新しい配列を作成します。

文字列を大文字に変換

const array = ['onion', 'carrot', 'potatp', 'meat', 'pumpkin'];
const arrayUppercase = array.map (value => value.toUpperCase());
console.log(arrayUppercase);

// ['ONION', 'CARROT', 'POTATP', 'MEAT', 'PUMPKIN']

文字列を大文字に変換するには「toUpperCaseメソッド」を使用します。mapメソッドと組み合わせることで、配列の要素を全て大文字に変換して新しい配列を作成します。

文字列を小文字に変換

const array = ['ONION', 'CARROT', 'POTATP', 'MEAT', 'PUMPKIN'];
const arrayLowercase = array.map (value => value.toLowerCase());
console.log(arrayLowercase);

// ['onion', 'carrot', 'potatp', 'meat', 'pumpkin']

文字列を小文字に変換するには「toLowerCaseメソッド」を使用します。mapメソッドと組み合わせることで、配列の要素を全て小文字に変換して新しい配列を作成します。

配列からオブジェクトの配列を作成

const array = ['onion', 'carrot', 'potatp', 'meat', 'pumpkin'];
const arrayObject = array.map (value => ({id, value}));
console.log(arrayObject);

// [{id,'onion'}, {id,'carrot'}, {id,'potatp'}, {id,'meat'}, {id,'pumpkin'}]

idと要素の組み合わせでオブジェクトを生成し、新しい配列を作成します。

ここで注意してほしいことが、オブジェクトを作成するには中括弧をさらに丸括弧で囲む必要があります。

アロー関数を使用しているので丸括弧の記述をしないと、Callback関数の中括弧 （引数）=>｛ 処理 ｝ なのか曖昧になってしまいエラーとなってしまいます。

２つの配列を合体させたオブジェクトの配列を作成

const foods = ['gummy', 'crisps', 'chocolate', 'gum', 'senbei'];
const calories = [34, 139, 89, 43, 18];
const arrayObject = foods.map ((food, index) => ({
    food : foods[index],
    calorie : calories[index]
}));
console.log(arrayObject);

// [{food:'gummy', calories:34}, 
//  {food:'carrot', calories:139}, 
//  {food:'potatp', calories:89}, 
//  {food:'meat', calories:43}, 
//  {food:'pumpkin', calories:18}]

mapの第2引数は要素のインデックス番号になります。このインデックスを扱うことで、異なる２つの配列の要素を取り出して、オブジェクトが配列に格納されます。

元の配列をmapメソッドで変更

mapメソッドは上述している通り、基本的に新しい配列を作成します。

const values = [0, 1, 2, 3, 4];
values.map ((value, index, array) => {
    array[index] = value * 3
});
console.log(values);

// [0, 3, 6, 9, 12]

第３引数には元の配列データが渡されるので、arrayに処理した結果を代入することで、元の配列データを変更することができます。

まとめ

この記事でArrayオブジェクトで用意されているmapメソッドの使い方と使用例について紹介しました。

mapメソッドは配列の全ての要素に対して処理を行うことができ、元の配列を残しつつ新しい配列を作成することが可能です。

新しく作成された配列の要素を使用しない場合は、mapメソッドを使うケースに当てはまりませんので、filterメソッドやforEachメソッドを利用しましょう。

以上、最後まで読んでいただきありがとうございました。

関連記事

あわせて読みたい

【JavaScript】配列（Array）の基本的な使い方を紹介！ プログラミングでデータを格納する方法として「配列（Array）」というものがあります。 複数のデータを1度に扱うとき、効率よくデータを操作することができるので、とて...

あわせて読みたい

【JavaScript】forEachメソッドで配列の要素を取得する方法 javaScriptの配列を繰り返して処理する方法として、forEachメソッドがあります。 今回はforEachメソッドの使い方をはじめ、メリットや使うにあたってのポイントや注意点...

あわせて読みたい

【JavaScript】配列の繰り返し処理でfor文を扱う方法 JavaScriptで条件に応じて繰り返しの処理をするために用意されているのが for文です。 for文は基本となる構文ですが、使い方を間違えるとfor文から抜け出すことができず...

あわせて読みたい

【JavaScript】便利な正規表現の使い方を理解する 「正規表現て何だろう」や「正規表現て難しそう」と感じている方は多いのではないでしょうか。 JavaScriptに限らず、さまざまなプログラミング言語で登場する正規表現。...

あわせて読みたい

【JavaScript】if文で条件分岐をしよう！使い方の基礎と注意点を解説 条件分岐はさまざまなプログラミング言語でよく使われる基本です。JavaScriptの場合は「if文」を使った条件分岐が最も使われます。 本記事では、JavaScriptで扱う「if文...