【JavaScript】mapメソッドとは（備忘録）

１．map()メソッドとは

・配列内の全要素を更新し、更新された新しい配列を生成するメソッドです。

mapメソッドの文法

配列名.map((変数) => 変数に対する更新処理)

以下の場合、mapメソッドの使用は推奨されません。
・返された配列を使用しない場合
・コールバック関数から値を返さない場合

・map() メソッドのコールバック関数には最大で3つの引数を指定できます。

引数を３つ指定した書き方

配列名.map((value, index, array) => {
    // 処理内容
});

配列名.map(function callback(value, index, array) {
    // 処理内容
});

各引数とその役割

引数名	役割
value	処理対象となっている配列の要素
index	処理対象となっている要素が、配列の何番目かを示すインデックス
array	処理対象となっている配列

２．サンプルプログラム

〇例１：

Sample_1.js

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

// 配列の全要素に10を足す
const result = array.map(value => value += 10);
console.log(result);

実行結果

[11, 12, 13, 14, 15]

〇例２：

Sample_2.js

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

const result = array.map((value) => {
  	// 配列の要素数が5個以上の場合、全要素が更新された新しい配列を返す
	if　(array.length >= 5)　{
		return value += 10;
	} else {
		// それ以外の場合、元の配列を返す
		return value;
	}
});

console.log(result);

実行結果

[11, 12, 13, 14, 15]

〇例３：

Sample_4.js

const customers = ["yamada", "tanaka", "yamamoto", "suzuki"];

// コールバック関数
function upperCase(customer) {
    // 配列の要素を大文字化
    return customer.toUpperCase();
}

const result = customers.map(upperCase);

console.log(result);

実行結果

[ 'YAMADA', 'TANAKA', 'YAMAMOTO', 'SUZUKI' ]

解説：map メソッドの引数として関数（upperCase）を渡しています。

アロー関数を使用して、書き直してみました。。。

Sample_5.js

const customers = ["yamada", "tanaka", "yamamoto", "suzuki"];

const result = customers.map(customer => customer.toUpperCase());

console.log(result);

〇例４：

Sample_6.js

const fruit_list = [
    {
        no: 1,
        name: "バナナ",
        price: 250
    },
    {
        no: 2,
        name: "パイナップル",
        price: 350
    },
    {
        no: 3,
        name: "ブドウ",
        price: 600
    }
];

const new_list = fruit_list.map((fruit) => {
    return { [fruit.no]: fruit.name }
});

console.log(new_list);

実行結果

[ { '1': 'バナナ' }, { '2': 'パイナップル' }, { '3': 'ブドウ' } ]

３．参考

・Array.prototype.map()
・【最新版】JavaScriptにおけるmapの基本的な使い方
・JavaScript コールバック関数の引数
・JavaScript map() method in 7 minutes! 🗺️

４．その他

・実行環境