mapメソッドのまとめ

はじめに

今日はmapメソッドについて学習したので内容をアウトプットしていきたいと思います。
最近、転職活動中で勉強時間に十分な時間を充てらなくもっと生産性を持って学習していきたいと思っている次第であります。

mapメソッドとは

配列のArrayオブジェクトが持つメソッド。配列の全てのデータに対して指定した処理をおこない、新しい配列を作ることが可能。

MDNリファレンス

mapメソッドの使用例

数字の配列に対して一つずつ２倍にして新しい配列を作りたいと思います。

エディター

var numbers = [1,2,3];
// ２倍した数字を置ける配列を作る
var doubledNumbers = [];

for(var i = 0; i < numbers.length; i++) {
    // 対象となる配列を２倍して配列に入れる
    doubledNumbers.push(numbers[i] * 2);
}

doubledNumbers;

結果

[2,4,6]

メモ書き

エディター

var numbers = [1,2,3];
// ２倍した数字を置ける配列を作る
var doubledNumbers = [];

なぜ新しい配列を作るのか？それに対してはすでにあるデータを変えるない方が良いとされている（ミューテート）。
numbersに元々入っていたものを変えてしまい[2,4,6]にして状態となっています。
大きな規模になるとnumbers = [1,2,3]が入っているもととしてプログラムを組んでしまった・・・。
しかし中身が変更されていたケースがあったりする。結果、意図しない動作になることもある。
つまり、元のデータを変えないようにすることが思考が必要である！

for(var i = 0; i < numbers.length; i++) {
 numbers[i] = numbers[i] * 2
}
numbers;

では、mapメソッドで書いてみよう！！！

エディター

var doubled = numbers.map(function(number) {
    return number * 2;
})

doubled;

イメージとしてnumbers配列を２倍して新しい配列に渡される

ポイントはreturnを忘れないこと！新しい配列に何を入れたら良いかわからなくなりnullが返ってくる。

return number * 2;