JavaScriptの変数宣言について var と let の使い分け

Question

###前提・実現したいこと
JavaScriptの変数宣言について var と let の使い分けについて

質問 51551：JavaScriptでradioボタンで選択して背景色を変える(for loop を使って)
https://teratail.com/questions/51551
に関連して、変数の宣言の仕方 let について調べました。

参考資料：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let#内部関数でのクリーンなコード

var や let の他にも、const という宣言の方法もあることがわかりました。

今のところ、let はすごく便利だった！という印象と、↑のような説明が、なんとなくわかるような気がするといったところなのですが、以前にvar で書いたものの中には、let や const では動かないものもあります。便利なことを知った分怖くなったところもあり、どのように使い分けたらよいのかを理解することができたらよいなと思っています。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

1.let でしか動かない

<form id="myForm">
  <input type="radio" name ="color" value="green">green
  <input type="radio" name ="color" value="red">red
</form> 

<script>
var c = document.getElementsByName('color');  
for(let i=0; i<c.length; i++){
    c[i].onclick= function(){document.body.style.background = c[i].value;
                 }
    }
  </script>

2.var でしか動かない

<p id="demo">default</p>
  
<script>
  var flws = ["Rose", "Tulip", "Pansy"];
  for (var i = 0, text = ""; i < flws.length; i++) {
      text += flws[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
</script>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
関連質問：質問： JavaScriptでradioボタンで選択して背景色を変える(for loop を使って)
https://teratail.com/questions/51551

Answer 1

varでしか動かないという2.のほうはtextをfor文内部のletで宣言しています。ですので、for文のあとにtextを使おうとする処理があるため、動かないのです。

varとletの使い分けはスコープだけ意識すればできると思います。まず、var宣言はすべて関数の最初に持ってきてください。varは関数の途中であっても関数の最初にあるものと見なされるため、動作は変わりません。**関数の途中でvarを書くと言う習慣をなくせば、varのスコープに悩むことは無くなります。**次に、変数宣言は一つだけにしてください。**varやletは複数の変数宣言をまとめてできますが、分離して考えられないため、混乱の元に過ぎません。**つまり、2.のコードは下記のようにします。

var flws = ["Rose", "Tulip", "Pansy"];
var i = 0;
var text = "";
for (; i < flws.length; i++) {
    text += flws[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;

という形であれば、iはfor文の中だけで使っているので、letにしてfor文の中に押し込めますが、textはできないと言うことがわかると思います。

var flws = ["Rose", "Tulip", "Pansy"];
var text = "";
for (let i = 0; i < flws.length; i++) {
    text += flws[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;

---

【追記】

1.の方はあまり言及してませんでした。letはブロックスコープです。ですので、ブロック内部に押し留まります。ちょっと例を書いてみます。

var list = [];
for (let i = 0; i < 10; i++) {
  let x = i * 2;
  list.push(function() {
    console.log(i, x); // それぞれのループで i と x は異なる。
  });
}
list[0](); // => 0 0
list[1](); // => 1 2
list[9](); // => 9 18

このコードのiとxをみてください。これらはlet宣言のため、for文のブロックの中でのみ有効です。for文のブロックは10回繰り返しますが、それぞれのブロックは独立しており、そのため、iとxもそれぞれ10個作られます(ただしiは、次ループに行くときに以前のiの値を引き継ぎ、i++の処理をしてから別のiとして作られることになります)。listに入れられた無名関数の中のiとxもそれぞれが独立していることになります。

もし、これらがvar出会った場合は、関数(この場合は関数がありませんので、全体の先頭)にあるものとみなされます。

var list = [];
for (var i = 0; i < 10; i++) {
  var x = i * 2;
  list.push(function() {
    console.log(i, x); // 全体で一つの i と x しかないため、同じものになる。
  });
}
list[0](); // => 10 18
list[1](); // => 10 18
list[9](); // => 10 18

そのため、ブロック内部のiとxはそれぞれたった1個を十回のループで共通して使うようになります。こうなるとlistに入れていく無名関数の中のiとxは全て同じものを指すことになってしまいます。これでは同じ事になりません。

では、どうやって考えれば良いのか。それは、変数をどのスコープ(範囲)で有効にしたいのかです。varを使った場合、関数全体がスコープになり、関数全体でたった一つしかありません。新たな関数の中でさらにvarで宣言しない限り、常に同じものを指します。対して、letであればブロックの内側だけです。**もし、そのブロックがfor文やwhile文などのループであれば、それぞれのループの中で独立して存在することになります。**そのようなループで独立して使うには、別途何らかの関数を用意しない限り、varでは実現できません。他にも、各ブロックで同じ変数を使ってしまった場合の影響を避けるために、letを使うという手法があります。

最後に、もし、letの場合をletを使わずに等価な形にした場合どうなるか、ですが、下記のようになります(変換にはBabelを使用)。

"use strict";
var list = [];
var _loop = function _loop(i) {
  var x = i * 2;
  list.push(function () {
    console.log(i, x); // それぞれのループで i と x は異なる。
  });
};
for (var i = 0; i < 10; i++) {
  _loop(i);
}
list[0](); // => 0 0
list[1](); // => 1 2
list[9](); // => 9 18

_loop関数のiとfor文のiは異なるiです。_loop関数は10回呼び出されるため、iとxも10個作られると言うことがわかるかと思います。

Comments

[margutta]

解答を書いてくださりありがとうございます。

1.　i (counta?) 以外の変数は、ループが始まる前に、とりあえず var で定義しておく.
2.　for()の（）内で、i の初期値を定義するときは、let で定義しておけば、再代入が必要になったときでも対応できる.

まだ、どういう場合が、再代入なのかはわかっていないのですが、とりあえず、↑のように理解し、↓のように書いておけば、自分なりに納得できるのですが、問題ないでしょうか？

○　https://teratail.com/questions/51569　の場合
<script>
var flws = ["Rose", "Tulip", "Pansy"];
var text="";
var len=flws.length;
for (let i = 0 ; i < len; i++) {
text += flws[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

○　https://teratail.com/questions/51551 の場合

<script>
var c = document.getElementsByName('color');
len=c.length;

for(let i=0; i<len; i++){
c[i].onclick= function(){document.body.style.background = c[i].value;
}
}

</script>

お忙しい中、回答を書いてくださり、ありがとうございました。自分一人では気付けないことを教えていただき感謝しています。

[raccy]

1.について余り書いてませんでしたね。追記しました。

iだから…ではなく、iをどこで使いたいかです。関数全体で一つなのか、ブロックの中だけで各ループではそれぞれ別のもとして扱いたいのか。見える範囲を意識するとletはどう使うのかが意識できると思います。

[margutta]

この説明を胸に自分の成長を待ちたいと思います。ありがとうございました！

Answer 2

2.var でしか動かない

書くならこうとか。

const flws = ["Rose", "Tulip", "Pansy"];
let text = "";
for (let i = 0; i < flws.length; i++) {
	text += flws[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
```**動くサンプル：**[https://jsfiddle.net/90fgtrgq/](https://jsfiddle.net/90fgtrgq/)

---

【JavaScriptにおけるvar/let/constの使い分け】
[https://sbfl.net/blog/2016/07/14/javascript-var-let-const/](https://sbfl.net/blog/2016/07/14/javascript-var-let-const/)

【var, let, constの使い分けについて｜もっこりJavaScript｜ANALOGIC（アナロジック）】
[http://analogic.jp/var-let-const/](http://analogic.jp/var-let-const/)

Comments

[margutta]

let を 教えていただき、大変ありがたかったです。教えていただいた資料もじっくり拝見したいと思います。ありがとうございました。

[kei344]

「再代入」については、下記のようなことを指します。
var a = 0;
a = 1; // 再代入

「const 」は再代入禁止なので出来ません。コードの中で再代入する必要が無い変数というものは結構多いので、それに使います。
const b = 0;
b = 1; // エラー「TypeError: invalid assignment to const `b'」

[margutta]

納得！！　できた！！　と思います。
あまたの本で、var が、幅を利かせている、ということのほかに、再代入をすごく難しく考えていてしまっていたので、
わかりませんでした。スッキリした感じがします。

1つだけ、なんとなく、もやっとしているのは、51551（https://teratail.com/questions/51551）で、
「onclick を実行する時点で変数 i が c.length（2？or c.length）になっている」とおっしゃっていらしたところ。
それが、var を　let にかえると直ってしまうのはどうしてなんだろう....と、その辺のわけは、まだちょっとわからないままでいます。

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

[kei344]

raccyさんの追記に回答が追記されていますので、そちらを参考にしてみてください。「スコープ」が重要です。