変数の巻き上げについて

変数の巻き上げについてです。
変数の巻き上げという挙動について最近知ったのですが、
まず以下のサイトに記述されているコードです。
http://analogic.jp/hoisting/

javascrip
1var myname = "global";
2 
3function func() {
4    console.log(myname);    //出力内容は？undefined
5    var myname = "local";
6    console.log(myname);    //出力内容は？local
7}
8 
9func();

「最初のコード例の5行目の変数宣言
var myname = "local";
が巻き上げられ、関数の先頭で宣言されたように扱われます。ただし、巻き上げられるのは宣言部分のみなので、この時点ではその中身（= “local”)の代入までは行われません。つまり関数の先頭部分は
var myname;
となり、これは
var myname = undefined;
と同じ意味ですので、最初のconsole.logでは「undefined」が出力された、ということです。」

とのことだったのですが、以下のteratailでの質問の答えを見て訳が分からなくなってしまいました。
https://teratail.com/questions/241241

javascrip
1{ // A
2  let x = 0;
3  { // B
4    console.log( x ); // (2)
5  }
6}

「上記のコード、(2)で変数xを参照していますが、やはりここでJavaScriptは変数xを探しに行きます。
まず、参照しているスコープ、Bの中で探したところ、定義文が見つかりませんでした。
そこで、その外側のスコープ、Aの中で探したところ、let x = 0;という定義文が見つかりました。
なので、(2)の変数xは、スコープAのlet x = 0;で定義されている変数だ、とJavaScriptは判断します。」

とあります。この場合undefinedと表示されないのは何故なのでしょうか。

###追記

そもそも入れ子になっているスコープを別物、と捉えており余計ややこしい質問となりました..!
すいませんでした！

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

回答2件

この場合undefinedと表示されないのは何故なのでしょうか。

実行されるのがlet x = 0;よりも後だからです。

投稿2020/07/20 01:36

編集2020/07/20 01:37

maisumakun

総合スコア146018

maisumakun

2020/07/20 02:42

なお、letやconstで「宣言のスコープ内ではあるけど初期化が行われていないタイミング」で変数を参照した場合、undefinedという値は取れず、ReferenceErrorとなります。

..o

2020/07/20 03:05 編集

そうなんですね！ご回答ありがとうございます！一つ疑問なのですが、 { // A let x = 0; { // B console.log( x ); // (2) } } のコードで値が取得できてしまうのは、スコープが入れ子になっているから、ということなのでしょうか？スコープが違えば別々のスコープにある変数にはお互いアクセスできない、という認識でした。

maisumakun

2020/07/20 04:07

> スコープが入れ子になっているから、ということなのでしょうか？はい、JavaScriptでは外側のスコープの変数に内側からアクセスできます。

..o

2020/07/20 04:13

なるほど！初歩的な質問ですいませんでした！ありがとうございます！

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

ベストアンサー

定義のみが巻き上げられるので、

var myname = "global";

function func() {
    console.log(myname);    //出力内容は？undefined
    var myname = "local";
    console.log(myname);    //出力内容は？local
}

func();

は下記のように解釈できます

var myname = "global";

function func() {
    var myname;
    console.log(myname);    //出力内容は？undefined
    myname = "local";
    console.log(myname);    //出力内容は？local
}

func();

試しにfunctionの中のvarだけ消したら理解しやすいかもしれません

投稿2020/07/20 02:39

hentaiman

総合スコア6426

..o

2020/07/20 03:01

なるほど、勘違いしておりました... ちなみになのですが質問の二つ目のコードで { // A let x = 0; { // B console.log( x ); // (2) let x = 1; } } このようなletの場合は巻き上げというのは起こらず、ReferenceErrorがでる、という認識で大丈夫でしょうか??

hentaiman

2020/07/20 03:20

違います