Explanation of `let` and block scoping with for loops

by

Is this just syntactic sugar for ES6?

No, it’s more than syntactic sugar. The gory details are buried in §13.6.3.9
CreatePerIterationEnvironment.

How is this working?

If you use that let keyword in the for statement, it will check what names it does bind and then

  • create a new lexical environment with those names for a) the initialiser expression b) each iteration (previosly to evaluating the increment expression)
  • copy the values from all variables with those names from one to the next environment

Your loop statement for (var i = 0; i < 10; i++) process.nextTick(_ => console.log(i)); desugars to a simple

// omitting braces when they don't introduce a block
var i;
i = 0;
if (i < 10)
    process.nextTick(_ => console.log(i))
    i++;
    if (i < 10)
        process.nextTick(_ => console.log(i))
        i++;
        …

while for (let i = 0; i < 10; i++) process.nextTick(_ => console.log(i)); does “desugar” to the much more complicated

// using braces to explicitly denote block scopes,
// using indentation for control flow
{ let i;
  i = 0;
  __status = {i};
}
{ let {i} = __status;
  if (i < 10)
      process.nextTick(_ => console.log(i))
      __status = {i};
}   { let {i} = __status;
      i++;
      if (i < 10)
          process.nextTick(_ => console.log(i))
          __status = {i};
    }   { let {i} = __status;
          i++;
          …

More Related Contents:

  1. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  2. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  3. What is destructuring assignment and its uses?
  4. Null-safe property access (and conditional assignment) in ES6/2015
  5. Why shouldn’t JSX props use arrow functions or bind?
  6. using brackets with javascript import syntax
  7. ES6 variable import name in node.js?
  8. What are the precise semantics of block-level functions in ES6?
  9. What do curly braces inside of function parameter lists do in es6?
  10. javascript extract certain properties from all objects in array
  11. Fulfill (don’t resolve) promise with another promise
  12. ES6 modules in local files – The server responded with a non-JavaScript MIME type
  13. What is the difference between using constructor vs state = {} to declare state in react component?
  14. What does @@ (“at at”) mean in ES6 JavaScript?
  15. Javascript ES6 export const vs export let
  16. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  17. Arrow functions and the use of parentheses () or {} or ({})
  18. ES6 tagged templates practical usability
  19. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  20. What does calling super() in a React constructor do?
  21. How to use javascript proxy for nested objects
  22. How to call another function within the same object?
  23. What is the best general practice to timeout a function in promise [closed]
  24. Wrap long template literal line to multiline without creating a new line in the string
  25. Declare a class property outside of a class method
  26. Importing javascript file for use within vue component
  27. React cannot read property map of undefined
  28. What is the technical definition of a Javascript iterable and how do you test for it?
  29. functional way to iterate over range (ES6/7) [duplicate]
  30. ES6 module scope

Leave a Comment