2

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?

Lex Power
  • 40
  • 4

3 Answers3

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.

theAlexandrian
  • 870
  • 6
  • 18
  • If you also try to declare it beforehand (for instance, in a generator fashion that might return null), it throws an `already declared` error. I didn't think it would do that. – Jared Farrish Feb 17 '18 at 03:30
  • Thanks! I found this post after reading your answer. Helped further understand what was happening: https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6 – Lex Power Feb 24 '18 at 05:22
  • I'm glad I could help you :) – theAlexandrian Feb 24 '18 at 05:29
4

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.

Parama Kar
  • 462
  • 3
  • 8
0

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.

Lior Elrom
  • 19,660
  • 16
  • 80
  • 92