しびら

技術ネタのメモとか。

JavaScriptのmapとforを比較してみる

   

コードの書き方がどう変わってくるかなという視点で比較してみました。

for文とは

 

for文は繰り返し実行するための文です

for文(フォーぶん)はプログラミング言語において条件が真の間だけ与えられた文の実行を繰り返すというループを記述するための文である。 forループは、whileループと違って、ループに入る前の初期化(通常カウンタ変数の初期化を行なう)を含む点で異なる。

for文 – Wikipedia

 

mapとは

mapとは与えられた関数を全ての要素に対して呼び出して、新しい配列を作るものです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

numbersの配列データをmap関数を使って新しい配列resultを作りました。

map内は無名関数で、numbersの配列データが1つ1つこの無名関数で処理されて新しい配列の要素を生成します。
今回の関数は与えられた数値を2倍するというものです。

 

 

それぞれの違い

ここでそれぞれの書き方を比較してみましょう。

for
  • 処理結果を格納しているresult1に初期値として配列を代入している
  • forは添字へのアクセスにiを使用している
  • 関数化されていない
map
  • 初期値の代入が不要
  • 添字へのアクセスが不要
  • 関数化されている

 

もう少し複雑な例

次に、配列以外の変数にも同様の(値を2倍にする)処理が必要になった場合、forループ内の処理(mapのcallback関数)を外出ししたくなると思います。

掛け算を実行できるmul関数を作成してみました。mapの方のmul関数はカリー化しておりmap関数で直接使用できるようになっています。

 

更に複雑な例

受け取った値を100倍して1加算するという関数を作ってみましょう。

mapの方は関数合成してみました。for文はiやtmpなどの手続き上必要になってくる変数がでてきますが、map(と関数合成)を使用している方はそういった無駄が見えてきません。

 

 - Javascript