What causes the different behaviors between “var” and “let” when assign them a returned value of a function which throws an error

by

Declarations of var variables get hoisted – the variable name initialization gets hoisted to the top of the containing function (or, if no function, to the top of the outer block). So

var withVar = (function() {throw 'error!'})()

is parsed by the interpreter as

var withVar;
withVar = (function() {throw 'error!'})()

The same is not true for let – let variables become initialized once the let __ line runs. When there’s assignment, the right-hand side is parsed first; if the right-hand side throws an error, it never gets to the left-hand side, and the variable declared with let never gets properly initialized; it’ll stay in the demilitarized zone / temporal dead zone forever, so trying to reassign it throws an error.

It’s kind of weird because the code is being run in the console – ordinarily, JS runs inside a <script> tag, and if such an error occurs, usually no more code will run, and the fact that a variable declared with let is no longer reassignable is the least of your worries.

The above was an issue in earlier Chrome versions. But in Chrome 80+, re-declarations of let are now permitted, so the error

Uncaught SyntaxError: Identifier ‘withLet’ has already been declared

should no longer occur, regardless of whether the previous initialization of the variable succeeded or not:

enter image description here

More Related Contents:

  1. What’s the difference between using “let” and “var”?
  2. Why let and var bindings behave differently using setTimeout function? [duplicate]
  3. What is the difference between “let” and “var”?
  4. What is the scope of variables in JavaScript?
  5. Are variables declared with let or const hoisted?
  6. Do let statements create properties on the global object?
  7. What is the temporal dead zone?
  8. Why can I not throw inside a Promise.catch handler?
  9. how to display a javascript var in html body
  10. v8 JavaScript performance implications of const, let, and var?
  11. ReferenceError: variable is not defined
  12. What is the difference between `throw new Error` and `throw someObject`?
  13. Chrome console already declared variables throw undefined reference errors for let
  14. When to use var in Javascript [duplicate]
  15. Open a URL in a new tab (and not a new window)
  16. Disable/enable an input with jQuery?
  17. ECMAScript template literals like ‘some ${string}’ are not working
  18. OnChange event handler for radio button (INPUT type=”radio”) doesn’t work as one value
  19. How to print a number with commas as thousands separators in JavaScript
  20. Angular 5 Service to read local .json file
  21. angularjs to output plain text instead of html
  22. How to access DOM elements in electron?
  23. Can you pass parameters to an AngularJS controller on creation?
  24. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  25. How to detect in iOS webapp when switching back to Safari from background?
  26. How to get access to private field via square brackets in JavaScript
  27. Node.js: When to use Promises vs Callbacks
  28. Export Highcharts to PDF (using javascript and local server – no internet connection)
  29. Webstorm: “Cannot Resolve Directory”
  30. Why does the radix for JavaScript’s parseInt default to 8?

Leave a Comment