Javascriptのletについて

Question

閲覧いただき、ありがとうございます。
現在、独学でJsを勉強しております。
最近はじめ、グローバルスコープ、ローカルスコープ
（関数スコープ・ブロックスコープ）について調べていたところ、
下記のブログにたどり着きました。

https://qiita.com/wannabe/items/b2a0d63fc786eab13c48

上記ブログの「let(変数)」の章で下記のコードが示されていますが、
このコードの６行目から１３行目の、x=3;で
ブロックスコープの中で、letをx=3;と再代入しているにも関わらず、
ブロックスコープ外の下の部分で、console.log(x);で3が出力されていることの理由がわからず、
お聞きさせていただきました。

function(){
    let x = 0;
    console.log(x); //0
    let x = 1; //error  x has already been declared
    console.log(x); //0
    x = 2;
    console.log(x) //2
    if (true){
        console.log(x); //2
        x = 3;
        let y = "a";
    }
    console.log(x); //3
    console.log(y); //error y is not defined
}

function (){
    console.log(x); //x is not defined
}

お分かりの方、ご教授いただけますと幸いです！！
お手数ですが、宜しくお願いいたします。

Answer 1

ブロックスコープ外の下の部分で、console.log(x);で3が出力されていることの理由がわからず、

理解が間違ってます。

2行目でlet x = 0;で「宣言」されているので、この宣言文が含まれる{}の中がスコープになります。
そのため、13行目でxを参照できます。この時のスコープの範囲は2から14行目です。

9,10,13行目でxに値を代入したり参照したりするのは、スコープの中なので当然可能です。

Comments

[kahosayshello]

ご回答ありがとうございます！あるスコープでした宣言にあたるものだけが、
そのスコープ外からアクセスできないということですね！
なので、再代入（x）の場合は、スコープの宣言がこの関数スコープ全体からアクセス可能なため
そのさらに内側のブロックスコープの中で再代入した場合でも、
外側の親のスコープとして代入されるということですね？＞＜

なん度もすみません＞＜

[gentaro]

たぶん「宣言」と「代入」の違いを理解されてないんでしょう。
スコープは「宣言」で決まります。

Answer 2

スコープチェーン というものがあります。

【#スコープチェーン | 関数とスコープ · JavaScript Primer #jsprimer】
https://jsprimer.net/basic/function-scope/#scope-chain

Comments

[kahosayshello]

ありがとうございます！読ませていただきます＞＜

Answer 3

スコープというのは、"変数の値"の範囲ではなく、"変数そのもの"の範囲です。
変数を、「箱」という例えをすると、
2行目でxという箱を用意し、10行目でその箱に3を代入します。
箱の存在自体は変化しない（xの箱のスコープはfunctionのため）ので、13行目にいくと、箱に入っている"3"が返される、ということになります。

逆に、11行目では、
yという箱を用意しますが、その箱はif文のスコープ内でしか効果がないので、12行目で破棄され、14行目では存在していない箱となり、エラーになります。

Comments

[kahosayshello]

ご回答ありがとうございます！＞＜
箱の中にさえあれば、ブロックスコープ（{}）（８行目）のなかで再代入していたとしても、その大きな箱の中全体に反映されてしまうということですか？
では、８行目の中でだけ、再代入したい時はどのようにすればいいのでしょうか？

[yuuyu]

xにこだわる理由がなければ別の変数を用意すれば事足ります。
もしxにこだわる場合は、即時関数を利用することで擬似的なものは作成できます。

[kahosayshello]

なるほど、そういうことですね！
ありがとうございました！！????‍♂️