Chrome console already declared variables throw undefined reference errors for let

by

This happens when you introduce the temporal dead zone to the global scope. As you might know, let declarations are hoisted but left uninitialised. Due to control flow, it can happen that a variable is never initialised:

function …() {
    if (false)
        example; // would throw a ReferenceError if it was evaluated
    … // do something
    if (true)
        return; // stop!
    let example = 5; // never executed
}

This is fine in a function scope. Maybe something went wrong, maybe the variable wasn’t needed at all – in the next call, a new scope with a new variable will be created.

A similar thing can happen in the global scope, when you throw an exception before the variable is initialised (only exceptions work here as a control flow construct, nothing else achieves the same effect).

throw new Error;
let example = 5;

In contrast to the function scope, it does matter here that the variable stays uninitialised. The global scope lasts forever, and the variable is eternally dead. It was not and will never be initialised, and lexical variables cannot be re-declared (which helps preventing mistakes).

This was discussed on es-discuss, but deemed irrelevant. If top-level <script> execution throws an error, you have bigger problems than uninitialised variables. There is no path to recover. If you need one (e.g. by trying to re-declare it in successive scripts), you have to use var anyway.

That you have the same problem in the devtools console is a bit of a nuisance, but could be solved for the console as a special scope.

More Related Contents:

  1. What’s the difference between using “let” and “var”?
  2. What is the difference between “let” and “var”?
  3. Are variables declared with let or const hoisted?
  4. Do let statements create properties on the global object?
  5. What is the temporal dead zone?
  6. Will const and let make the IIFE pattern unnecessary?
  7. ECMAScript 2015: const in for loops
  8. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  9. Programmatically accessing function scope using Chrome DevTools console
  10. `export const` vs. `export default` in ES6
  11. Javascript – arrow functions this in event handler?
  12. ES6 Iterate over class methods
  13. Can’t require() default export value in Babel 6.x
  14. ES6 Destructuring and Module imports
  15. forEach is not a function error with JavaScript array
  16. ES6: Is it dangerous to delete elements from Set/Map during Set/Map iteration?
  17. where is create-react-app webpack config and files?
  18. Extending Error in Javascript with ES6 syntax & Babel
  19. Shallow-clone a Map or Set
  20. Why is the response object from JavaScript fetch API a promise?
  21. Tool to track down JavaScript memory leak
  22. javascript variable scope in the IF statement
  23. Importing multiple files in react
  24. JavaScript object destructuring and aliasing
  25. Alternative version for Object.values()
  26. `if __name__ == ‘__main__’` equivalent in javascript es6 modules
  27. Get the description of a ES6 Symbol
  28. How to create an array of objects from multiple arrays
  29. Console.log not working at all
  30. How to understand JS realms

Leave a Comment