JavaScript で let を下階層 if 内で再宣言すると値がリセットされてしまう

Question

以下で➀と➁のように同じ変数名でletを宣言したとします。

なぜ➁がある場合に、結果から「元のデータ」のobj1がなくなるのでしょうか？

const obj1 = {initdata:'元のデータ'};
let obj2 = {}; // ➀

if( true ){

  let obj2 = {}; // ➁

  if( true ){
    obj2 = obj1;
  }

}

obj2.newdata = '追加されたデータ';
console.log(obj2);

上記の➁を削除するときちんと「元のデータ」のobj1があります。
つまり➁がobj1を削除する要因になっているのですが、なぜなのかわかりません。

だって➁はobj2を初期化して空のオブジェクトとして扱っているだけで、その下のobj2 = obj1によってobj2にはobj1が入るはずですから、obj1を削除する要因になるという理屈が理解できないのです。

・なぜ➁があると、obj2 = obj1による代入が、最後のobj2に効かないのか？（➀の宣言に対して効かないのか？）
・なぜ➁がないと、obj2 = obj1による代入が、最後のobj2に効くのか？（➀の宣言に対して効くのか？）

という方向でご解説頂けましたら幸いです。（➁の有無で、➀の宣言に対して効いたり効かなかったり、とスコープの範囲が変わる点が納得いきません）

Answer 1

②がある場合は、
obj2は、ifブロック内スコープ限定の変数となり、そもそも、
**その外側スコープのobj2**に代入が行えなくなるからです。

obj2 = obj1による代入が、最後のobj2に効かないのか？

効かないのではなく、そもそも別物になる、ってことです。

そういった事を考えるならば、
今回のケースでは特に、内側スコープで、その外側スコープの変数と同名の変数は宣言すべきではないと言えます。

今回のように短いコードなら特に問題なくとも、
規模が大きくなればなるほど、
どこで何をやっているかわけわからなくなるでしょう。

Comments

[think49]

> グローバルスコープのobj2に代入が行えなくなるからです。

letを使用している限り、グローバル変数が定義される事はありません。
letはグローバルコード上であっても、グローバルスコープの一つ下にブロックスコープを形成しているかのように振る舞います。
つまり、グローバルオブジェクトのプロパティ(=グローバル変数)にはなりません。

[miyabi_pudding]

そうでした、グローバルとローカルと言っちゃうと、varと同じ仕様になっちゃいますね　汗
回答修正しました。

Answer 2

スコープチェーン

ブロックスコープとスコープチェーンを調べる事をお勧めします。

• ブロックスコープ · JavaScript Primer #jsprimer
• スコープチェーン · JavaScript Primer #jsprimer

スコープチェーンによって、先に発見する変数は「if文内のobj2」です。

let

let は同一スコープ上で同じ名前の変数が定義されることを許可しません。

let obj2 = {};
let obj2 = []; // SyntaxError

let で同名変数を定義しても SyntaxError にならないのなら、別のスコープにある変数を定義している事になります。

Re: owly さん

Answer 3

つまり➁がobj1を削除する要因になっているのですが

なっていません。

ブロック内でのobj2は➁のほうだけを指していて、➀のobj2はそもそも変化していません（同じ名前ですが両者は別な変数として振る舞います）。

Comments

[maisumakun]

> ➁の有無で、➀の宣言に対して効いたり効かなかったり、とスコープの範囲が変わる点が納得いきません

何に納得がいかないのかわからないですが、➁の宣言がある場合、ブロック内でのobj2は➁を指し、➀をブロック内から読み書きすることはできません。

[maisumakun]

> ➁はobj2を初期化して空のオブジェクトとして扱っているだけで

違います。全く同じ名前の、「別な変数」を作成しています。

[owly]

直近の変数にだけ効くということでしょうか？

直近の➁の obj2 にだけ効くから、一つ遠い➀には`obj2 = obj1`が効かない
もし➁がなければ➀が直近となり、➀に`obj2 = obj1`が効く

というイメージですか？

[miyabi_pudding]

効く、効かないの問題ではなく、
①と②は別物になるということをご理解下さい。
②を定義してしまった時点で、
同スコープでは、①に対して読み書きできません。

[think49]

「obj2 = obj1;」において、スコープチェーン上で発見される変数は➁です。
また、①と②は名前衝突している為、①を参照する事は出来ません。

[think49]

回答でも書きましたが、「スコープチェーン」を理解したほうが良いです。
https://jsprimer.net/basic/function-scope/#scope-chain
どういう手順で②が参照されるのか、が説明されています。

Answer 4

let
ちょうど質問者様の質問と同じ内容で解説があります。
ご参考にされてはいかがでしょう。