mapによる要素変換 | 高度な配列メソッド | JavaScript 超完全入門 基本から発展までのすべて

mapメソッドとは？

mapメソッドは、JavaScriptの配列操作において非常に強力なメソッドの一つです。このメソッドは、配列内のすべての要素に対して、指定した関数を適用し、その結果を新しい配列として返します。元の配列は変更されず、各要素に変換を施すことができます。

mapメソッドの基本的な使い方

const numbers = [1, 2, 3, 4, 5];

// 各要素を2倍にする
const doubled = numbers.map(function(num) {
    return num * 2;
});

console.log(doubled);  // [2, 4, 6, 8, 10]

この例では、numbers配列の各要素が2倍に変換され、新しい配列doubledに結果が格納されます。元のnumbers配列は変更されません。

mapメソッドの引数

mapメソッドのコールバック関数には、3つの引数を取ることができます。

• currentValue: 現在の要素の値
• index: 現在の要素のインデックス（オプション）
• array: メソッドが呼び出された配列そのもの（オプション）

インデックスを使用する例

const numbers = [1, 2, 3, 4, 5];

// インデックスを利用して各要素に変換を適用
const withIndex = numbers.map(function(num, index) {
    return num * index;
});

console.log(withIndex);  // [0, 2, 6, 12, 20]

この例では、mapメソッド内でインデックスを利用して、各要素をインデックスの値で掛けています。その結果、新しい配列では[0, 2, 6, 12, 20]となります。

mapメソッドの利点

mapメソッドの最大の利点は、元の配列を変更せずに新しい配列を返す点です。このため、mapは不変性を保ちながらデータを操作するのに適しています。また、コードがシンプルかつ読みやすくなるため、配列の要素を一括で変換する際に非常に便利です。

mapメソッドの使用例

次に、文字列の配列を使って、mapメソッドを活用する例を紹介します。

配列の要素を文字列の長さに変換する例

const words = ["apple", "banana", "cherry"];

// 各文字列の長さに変換
const lengths = words.map(function(word) {
    return word.length;
});

console.log(lengths);  // [5, 6, 6]

この例では、words配列の各要素（文字列）の長さを新しい配列lengthsとして返しています。結果として、[5, 6, 6]という配列が得られます。

mapメソッドと他の配列メソッドの比較

mapメソッドは、他の配列メソッドと似た動作をすることがありますが、異なる特性を持っています。以下の表でmapメソッドと他の配列メソッドの違いを確認してみましょう。

まとめ

mapメソッドは、JavaScriptの配列操作において、要素を変換して新しい配列を作成する強力な手段です。元の配列に影響を与えずに変換結果を取得できるため、データの不変性を保ちながら柔軟に操作を行うことができます。また、シンプルで読みやすいコードを実現できるため、複雑な配列操作にも適したメソッドです。