JavaScriptで使用できるfor文の実行速度を比較してみた

この記事では、当ブログ「ダメ系ITエンジニア」で初の技術記事の投稿で気になることを検証してみました。

検証してみたことは、JavaScriptで使用できるfor文の実行速度を比較してどれが一番早いのかの比較になります。

for文とは 、繰り返し処理を実行するための構文でJavaScriptだけでなく、ほとんどのプログラミング言語に実装されている構文です。

顧客常駐はもう嫌だ！社内SEへ転職するなら

選ばれて15年。ITエンジニアの気持ちが分かる転職エージェント

社内SE転職ナビ詳しくみる

JavaScriptで使用できるfor文

以下の4つのfor文が使用できます。

• for文
• for…in
• for…of
• forEach()

検証環境

今回はjsFiddleで検証してみました。

jsFiddleは、HTML、CSS、JavaScriptのコードが実装して動作を確認できるWebサービスになります。

会員登録は不要ですぐに無料で使うことができます。

ちょっとした動作をWebブラウザで確認したいときにおすすめです。

https://jsfiddle.net

検証したソースコード

それぞれのfor文で1000回ループして実行時間を測定してみます。

for文

const start = performance.now();
for (let i = 0; i < 1000; i++) {
  console.log(i);
}
const end = performance.now();
console.log(end - start);

for…in

// for...inは配列は非推奨なので使わないでね
const array = [];
let len = 1000;
for(let i=0; i<len; i++){
  array.push(i);
}

const start = performance.now();
for (const element in array) {
  console.log(`${element}: ${array[element]}`);
}

const end = performance.now();
console.log(end - start);

for…of

const array = [];
let len = 1000;
for(let i=0; i<len; i++){
  array.push(i);
};

const start = performance.now();
for (const element of array) {
  console.log(element);
}

const end = performance.now();
console.log(end - start);

forEach()

const array = [];
let len = 1000;
for(let i=0; i<len; i++){
  array.push(i);
};

const start = performance.now();
  array.forEach((element, index) => {
  console.log(`${index} : ${element}`)
});

const end = performance.now();
console.log(end - start);

実行速度を比較した結果

4つのfor文で1000回ループするのを3回分実行して平均値（ms）をそれぞれのfor文で取ってみました。

う～ん……結果を見ると平均値は「for…in」が一番早いように見えますが、実行するたびにバラつきもあって明確な差は出なかったということで、どれが速いとか遅いとかなさそうですね。

普通に1000回ループを回したいだけなら定番のfor文を使えばいいし、配列や型に応じてfor文を使い分ければいいのでしょうね？

ちなみに今回は速度検証のために使っていますが、for…inでは配列を使うことは非推奨のようですので、使わないようにしてくださいね。

まとめ

この記事では、JavaScriptで使用できる4つのfor文の実行速度を比較してみました。

だから何？

とか言わないで～。

意味がないこと記事にするな

なんて言わないで～。

技術的な記事になってねえじゃねーか！

とか怒らないで～。

ちょっと気になったので、どうでもいいことだとは思ったけど、今回は気になったから調べてみたっていうだけのことになります。

とはいえ無能なできないエンジニアが執筆している当ブログ「ダメ系ITエンジニア」でこの記事が技術記事の初投稿になります。

今までエンジニアブログとして50記事以上執筆していますが、エンジニアブログなのに技術的な話題をここまで書くことがなかったというブログはなかなか珍しいことではないでしょうか？

ダメ系

本当にすみませんでした。

もう少しITエンジニアのことを勉強したり、最新のトレンドのことを知る、などして技術的な記事を増やして行ければと思っていますので、次はまともな技術系のブログを書けるように精進いたします。