Javascriptのletについて

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

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

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

Js
1function(){
2    let x = 0;
3    console.log(x); //0
4    let x = 1; //error  x has already been declared
5    console.log(x); //0
6    x = 2;
7    console.log(x) //2
8    if (true){
9        console.log(x); //2
10        x = 3;
11        let y = "a";
12    }
13    console.log(x); //3
14    console.log(y); //error y is not defined
15}
16
17function (){
18    console.log(x); //x is not defined
19}

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

行動規範の内容に同意します

回答3件

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

理解が間違ってます。

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

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

投稿2020/05/31 04:19

編集2020/05/31 04:20

gentaro

総合スコア8947

kahosayshello

2020/05/31 05:12

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

gentaro

2020/05/31 05:44

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

行動規範の内容に同意します

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

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

投稿2020/05/31 04:23

kei344

総合スコア69583

kahosayshello

2020/05/31 05:13

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

行動規範の内容に同意します

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

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

投稿2020/05/31 04:19