JS memo

お洒落にJavaScript。

2019年1月23日5:32

Javascriptのfor vs while

メインビジュアル

Javascriptのfor vs while

ループには大きく分けてforループとwhileループがあります。一般的にwhileループの方が速いと言われていますが、本当に速いのか?検証してみました。

    目次

  1. ループとは
  2. 比べる方法
  3. for ループ
  4. while ループ
  5. 結果
  6. まとめ

ループとは

例えば以下のような自分の好きな食べ物の配列データがあったとしましょう。
const loveFoods = [ "アイスクリーム", "たこ焼き", "チョコ", "白子", "さつまいも", "唐揚げ" ];
これを一つずつ表示させたい場合、jsのコードは以下のようになります。

console.log(loveFoods[0]); //アイスクリーム
console.log(loveFoods[1]); //たこ焼き
console.log(loveFoods[2]);  //チョコ
console.log(loveFoods[3]); //白子
console.log(loveFoods[4]); //さつまいも
console.log(loveFoods[5]);  //唐揚げ

このように一つずつ書き出します。しかし、もし好きな食べ物が1000個あったら、このやり方で書き出すのは面倒極まりないですよね。そのため、以下のような同じことを何回も実行してねと指示できるとても便利な機能があります。

let n = 0;
while( n <= 5 ){
  console.log(loveFoods[n]);
  n = n + 1;
}

上記のコードをループと言います。コードは最初にnという変数を宣言し、0を代入しています。そして、nの値を+1ずつ増やしていき、nが5になるまでwhile内のコードを実行してねと指示しています。このようなコードをwhileループと呼びます。


これはもう一つのforループというやり方でも同様に実装することができます。

for( let = n; n <= 5; i++ ){
  console.log(loveFoods[n]);
}

さらにループについて知りたい方はこちら


OK!二つのループは分かった!けど実際、どっちを使った方がいいの?という疑問が湧いたため、今回は速度の観点から二つを比べてみました。

比べる方法

今回実装するコードの実装時間の計測にはperformance.now()を用います。performance.now()とはこのコードが読み込まれた時の時間を計測するものです。

以下のように速さを調べたいコードの始まりから終わりに記述します。このperformance.now()はマイクロ秒(1/1000ミリ秒)まで計測してくれます。

const startTime = performance.now();
// 計測したいコード
const endTime = performance.now();
console.log( endTime - startTime );   //コードの実行にかかった時間

今回は1〜10000までをconsoleに表示させるコードをhtmlのscriptタグ内に実装します。このコードをそれぞれのループで10回ずつ実行し、平均速度を比べてみました。今回使用したブラウザはChromeです。

while ループの実装

以下のjsをhtmlファイルのscriptタグに直書きして検証します。

<html>
<body>
<script>
  const startTime = performance.now();
  let n = 1;
  while( n <= 10000 ) {
    console.log(n);
    n++;
  }
  const endTime = performance.now();
  console.log(endTime-startTime);
</script>
</body>
</html>

forループの実装

forループもwhileループと同様にhtmlのscriptタグ内に書きます。
<html>
<body>
<script>
  const startTime = performance.now();
  for( let n = 1; n <= 10000; n++ ) {
    console.log(n);
  }
  const endTime = performance.now();
  console.log(endTime-startTime);
</script>
</body>
</html>

結果

結果は以下のようになりました

実験結果

whileループの平均は約1600ミリ秒(1.6秒)に対し、forループは約1770ミリ秒(1.7秒)でした。

まとめ

コードの速度は実装環境や方法によって左右されますが、今回の実装ではwhileループの方がわずかに速いという結果になりました。また別の方法で実験してみたいと思います!