Why doesn't const App = App || {}; work but using var does?

Question

In the past I have used

var App = App || {};

to assign or instantiate a common App object in various js scripts loaded separately into the browser.

However, using let and const instead of var throws a reference error:

const App = App || {}; // or let App = App || {};

Uncaught ReferenceError: App is not defined
at <anonymous>:1:11

What's going on here? If I want to continue using this pattern, do I have to stick to var ?

Answer 1

This is because when you are declaring a variable using let or a constant, the variable is in the temporal dead zone before being initialized.

In other words, trying let foo = foo will throw an error because foo is still in the temporal dead zone, and cannot be used. The same goes for const .

Note also that a variable defined whith let or a constant defined with const cannot share its name space in the same scope with another variable, be it with let , const , or var .

Answer 2

When javascript engine sees the statement, var App = App || {} var App = App || {} , it breaks the statement down as follows:

var App;
App = App || {};

Due to variable hoisting, var App = App || {} var App = App || {} is broken down into two parts.

1. Declaration: var App
2. Assignment: App = App || {} App = App || {}

The let and const declarations on the other hand, don't involve variable hoisting. Hence, the ReferenceError , as no variable called App exists yet.

Answer 3

var is behaving differently than let or const .

In case of var , JS engine first creates a variables definitions, allocate memory space for them and initialize them with an undefined value. Only then it start executing the code line by line.

In case of let or const , it initialize it to undefined only when the declaration actually happens (and only if there is no immediately assignment).

In your example, the variable App is still in the Temporal Dead Zone and trying to access it at that point results in a Reference Error.