array.map()

アレイ・マップ（組み込みオブジェクト）

意味要素を変換

array.map()とは？

`array.map()`メソッドは、配列の全ての要素に対して関数を呼び出し、その結果から新しい配列を生成します。

array.map()の具体的な使い方

商品価格に消費税を追加する例

const prices = [100, 200, 300, 400, 500];
const taxRate = 1.1;
const pricesWithTax = prices.map(price => Math.round(price * taxRate));

console.log('元の価格:', prices.join('円, ') + '円');
console.log('税込価格:', pricesWithTax.join('円, ') + '円');

👇出力結果

元の価格: 100円, 200円, 300円, 400円, 500円
税込価格: 110円, 220円, 330円, 440円, 550円

この例では、`prices`配列の各要素（商品価格）に消費税を加えて新しい配列を作成し、結果をコンソールに表示します。Math.round()を使用して、計算結果を整数に丸めています。

文字列配列を大文字に変換する例

const fruits = ['りんご', 'バナナ', 'みかん', 'ぶどう'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);

// 元の配列は変更されていないことを確認
console.log(fruits);

👇出力結果

['リンゴ', 'バナナ', 'ミカン', 'ブドウ']
['りんご', 'バナナ', 'みかん', 'ぶどう']

文字列の配列の各要素を大文字に変換する例です。また、元の配列が変更されていないことも確認しています。

array.map()に関するよくある質問

Q. mapは元の配列を変更しますか？

A. いいえ、map()メソッドは元の配列を変更しません。新しい配列を返します。元の配列はそのまま保持されます。

Q. mapとforEachの違いは何ですか？

A. 主な違いは、map()が新しい配列を返すのに対し、forEach()は戻り値がないことです。map()は各要素を変換して新しい配列を作成する場合に適しています。

Q. mapでnullを含む配列を処理すると？

A. map()はnullやundefinedを含む要素も処理します。これらの要素に対しても関数が呼び出されますが、結果はその関数の実装に依存します。

array.map()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのarray.map()やarray.forEach()、Object.seal()、string.replace()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。