JavaScriptのmap関数は、配列の各要素に対して関数を適用し、その結果から新しい配列を作成する非常に便利な高階関数です。この関数の利点は、元の配列を変更せずに、新しい配列を生成できることにあります。
map関数の基本構文
map関数の基本構文は以下の通りです：
const newArray = array.map(function(element, index, array) {
// ここに変換のロジックを記述
return newValue;
});elementは配列の現在処理している要素、indexはその要素のインデックス、arrayはmapが呼び出された元の配列です。この関数は各要素に対して呼び出され、その戻り値が新しい配列の対応する要素になります。
map関数の使用例
ここからは具体的にmap関数を使っていきましょう。
例1: 各要素を二乗する
ここでは、すでにある「numbers」という配列から、各要素を二乗した新たな配列をmap関数を用いて生成します。
const numbers = [1, 2, 3, 4];
const squares = numbers.map(function(number) {
return number * number;
});
console.log(squares); // 出力: [1, 4, 9, 16]例2: オブジェクトの配列から特定のプロパティのみを抽出
さらに複雑な連想配列で特定のプロパティのみを抽出し、新たな配列を作成してみます。
const people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const names = people.map(function(person) {
return person.name;
});
console.log(names); // 出力: ['Alice', 'Bob', 'Charlie']例3: アロー関数を使用する
ES6では、アロー関数を使用してより簡潔にmapを書くことができます。
const numbers = [1, 2, 3, 4];
const doubles = numbers.map(number => number * 2);
console.log(doubles); // 出力: [2, 4, 6, 8]注意点
mapは新しい配列を返しますが、元の配列は変更されません。- 元の配列の要素数と新しい配列の要素数は同じになります。
mapを使う場面は、配列の各要素に何らかの操作を施して新しい配列を作りたい場合に適しています。
このように、map関数は配列のデータを加工する際に非常に強力なツールであり、関数型プログラミングのアプローチを取り入れる際に重宝します。
map()は文法を覚えたあと、どんなデータ加工に使えるかを知るところから面白くなります。その感覚を課題を通して掴みたい方に向けて、SiiDの概要をまとめておきます。
