In the past I have used

var App = App || {};

to assign or instantiate a mon 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?

In the past I have used

var App = App || {};

to assign or instantiate a mon 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?

• javascript
• ecmascript-6

Share Improve this question Follow edited Feb 17, 2018 at 3:21 Lex Power asked Feb 17, 2018 at 3:15 Lex PowerLex Power 4055 bronze badges 2

• 4 Well if you think about it, declaring a new constant called "App" if there's a symbol "App" already defined doesn't make sense anyway. – Pointy Commented Feb 17, 2018 at 3:19
• As stated in the question, let also throws the error. – Lex Power Commented Feb 17, 2018 at 3:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

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

var App;
App = App || {};

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

1. Declaration: var App
2. Assignment: 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.

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.