let と const について >> ループと反復処理

[mimosafa]

for … in ならびに、for … of の例示コードの中で、key, value が const のもとで宣言されている(ように見える)のが、どうしても理解できませんでした。
コラムでその辺りの合点が得られるのかと期待したのですが、そうはいかず…
どうかその辺りのご解説をいただければ幸いです。

URL : https://github.com/asciidwango/js-primer/blob/master/source/basic/loop/README.md

[azu]

@mimosafa フィードバックありがとうございます。

このケースだとlet iなのに

let total = 0; // 初期値は0
for (let i = 0; i < 10; i++) {
    total += i + 1; // 1...10
}
console.log(total); // => 55

次のケースだとconst key となぜできるかという話ですかね?

const object = {
    "a": 1,
    "b": 2,
    "c": 3
};
for (const key in object) {
    const value = object[key];
    console.log(`key:${key}, value:${value}`);
}

書いてるときに確か解説を一度入れようとして、きれいな解説が思いつかなくて結局入らなかった感じがしますね。
(どこかにログが残ってないか探しましたがなさそうでした)

• loop: for/for in/for of/while/do while · Issue #68 · asciidwango/js-primer

原理的にはforループにかかれているconst keyの部分はループのたびに別々のスコープとなるため、毎回同じ名前で定義できるという感じですね。

例えば次のコードはconst itemに1、2、3と値が入ってループします。

const array = [1,2,3]
for (const item in array) {
    console.log(item);
}

このループを擬似的に展開すると次のようになります。
ループのたびに毎回新しいブロック{}で囲まれて実行されます。

const array = [1,2,3]
// 1回めのループ
{ 
   const item = 1;
   console.log(item);
}
// 2回目のループ
{
   const item = 2;
   console.log(item);
}
// 3回目のループ
{
   const item = 3;
   console.log(item);
}

ループ内で定義したitemは外から参照できないのも同じ理由です。

const array = [1,2,3]
for (const item in array) {
    console.log(item);
}
// ここでitemを参照しようとしても、ループ内はブロックスコープで囲まれているからアクセスできない。
console.log(item); // => ReferenceError: item is not defined

forループごとに別々のブロック{}で実行されるため、おなじitemという名前で定義できる感じになります。(ブロック{}があれば同じ名前が使えるのは、letやconstはブロックスコープ https://jsprimer.net/basic/function-scope/#block-scope だからという話です)

一方で、最初のlet i がletになっているのは、このiが++ インクリメントされているからですね。
const i = 1; i++がエラーになるからletになっているという理由です。
constで定義した変数に対しては宣言後に代入(インクリメントも代入の一部)はできないからという理由です

let total = 0; // 初期値は0
for (let i = 0; i < 10; i++) {
    total += i + 1; // 1...10
}
console.log(total); // => 55

const for loop why とかで検索すると多分いろいろな解説がでてくると思います。

• JavaScript - constがインクリメントできない理由｜teratail
• JavaScript - loop内でconstはOK?｜teratail
• ES6 Variable Declaration & For Loops — Why ‘const’ works in a ‘for…in’ loop but not in a normal…

ここで解説がなかったのは、コードの見た目と動きが違ったり、スコープの概念を知ってないと理解できない挙動だったりするからですね…
なんとかコラムで解説できないかを考えてみます。

[mimosafa]

ありがとうございます！理解できました。
「関数とスコープ」で解説されてましたね。コラムでなくてもその導線が提示されていれば（私的には）良いと思います。

[azu]

#852 で「関数とスコープ」への動線を追加しました