LoginSignup
52
50

【熱望】javascript の for 文で var i を宣言するのはやめて下さい

Last updated at Posted at 2024-04-19

皆さんは javascript の for 文で
以下の書き方をしたことがありますか?

for(var i = 0; i < array.length; i++) {

}

この書き方でも for 文は正常に動作します。

しかしながらこの書き方は
以下の書き間違いが生じることがあります。

for(var i = 0; i < array1.length; i++) {
  //長い処理
  for(var i = 0; i < array2.length; i++) {
  
  }
}

長い処理の中で
i を宣言したことを忘れて
再び i を宣言してしまうことで
外側の for 文のカウントにバグが発生し
期待した動作にならない例になります。

私も他の人が作成した web アプリで
このバグを見かけたことがあります。

for の変数を宣言する場合
必ず let で宣言して下さい。
var でなければ正常に動作しないのは
構造的欠陥のハズです。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

for(let i = 0; i < array1.length; i++) {
  console.log(array1[i]);
  //長い処理
  for(let i = 0; i < array2.length; i++) {
    console.log(array2[i]);
  }
}

上記のコードでは

var で宣言していたならば
console.log(array1[i]); が
1 回と
console.log(array2[i]); が
3 回しか通りませんが

let ならば期待通り
console.log(array1[i]); が
3 回と
console.log(array2[i]); が
9 回通ります。

let ならば上記のようなコードは
array1[i] も
array2[i] も
正しい値が取得できます。

長い処理を挟む事により
変数を宣言したことを忘れて再宣言しても
外側の for が正常に評価されるため
バグは発生しない可能性が高いのです。


以上 for 文の変数は let で
宣言しましょうという記事でした。

バグ発生のリスクを抑えるため
何卒よろしくお願いしたい所です。

調べてはいませんが有名な話で
同じことを言う記事はたくさんあると思います。
しかしながらこの書き方を現時点で行う人は
一定数いらっしゃるようなのです。

例えバグが出なくても
後でソースを見る人は
多重宣言していないか
気を遣うことになります。

百害あって一利無しのハズです。

for 文で var を宣言して
バグが発生するのは時間の浪費なのです。
for 文で var を宣言している人は
是非 let を検討頂きたいと思います。
私はそれを切実に願っています。

この記事が皆さんのバグ取りの
無駄な時間を抑えるきっかけになれれば
嬉しいです。

閲覧ありがとうございました。


追記

コメント欄で本当に恐ろしい点を
挙げている方がいらっしゃいました。

言われてみればかなり恐ろしい点なので
時間のある方はコメント欄も
確認頂けると幸いです。

コメントありがとうございました。


追記

私の記事の誤りをコメントで指摘頂きました。

let i = 10;

for(let i = 0; i < 3; i++) {
  for(let i = 0; i < 4; i++) {
    console.log(i);
  }
}

上記のコードは正常に機能して
console.log(i) は 12 回実行されるようです。

しかしながら
この挙動ならば外側の for 文が
正しく評価されるため
バグの発生する確率は let の方が低くなります。
長い処理を挟んだ結果再宣言して
バグが発生する事を私は悪としているため
その場合は let ならばバグが発生しません。
保守管理面で問題があるかもしれませんが
var の使用率を少しでも減らすための活動として
この記事はその事を結論としました。

ご指摘ありがとうございます。

また、修正前の記事で
誤った知識を植え付けてしまった事に関して
謝罪したいと思います。

申し訳ございませんでした。

52
50
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
50