What are the precise semantics of block-level functions in ES6?

by

As far as I can see, strict refers to the [[Strict]] internal slot of the function object.

No. And yes. It does refer to the strictness of the function (or script) in which the block that contains the function declaration occurs. Not to the strictness of the function that is (or is not) to be declared.

The “web extensions” do only apply to sloppy (non-strict) code, and only if the appearance of the function statement is “sane” – that is, for example, if its name doesn’t collide with a formal parameter or lexically declared variable.

Notice that there is no difference between strict and sloppy code without the web-compatibility semantics. In pure ES6, there is only one behaviour for function declarations in blocks.

So we basically have

                 |      web-compat               pure
-----------------+---------------------------------------------
strict mode ES6  |  block hoisting            block hoisting
sloppy mode ES6  |  it's complicated ¹        block hoisting
strict mode ES5  |  undefined behavior ²      SyntaxError
sloppy mode ES5  |  undefined behavior ³      SyntaxError

1: See below. Warnings are asked for.
2: Typically, a SyntaxError is thrown
3: The note in ES5.1 §12 talks of “significant and irreconcilable variations among the implementations” (such as these). Warnings are recommended.

So now how does an ES6 implementation with web compatibility behave for a function declaration in a block in a sloppy-mode function with legacy semantics?
First of all, the pure semantics still apply. That is, the function declaration is hoisted to the top of the lexical block.
However, there is also a var declaration that is hoisted to the top of the enclosing function.
And when the function declaration is evaluated (in the block, as if it was met like a statement), the function object is assigned to that function-scoped variable.

This is better explained by code:

function enclosing(…) {
    …
    {
         …
         function compat(…) { … }
         …
    }
    …
}

works the same as

function enclosing(…) {
    var compat₀ = undefined; // function-scoped
    …
    {
         let compat₁ = function compat(…) { … }; // block-scoped
         …
         compat₀ = compat₁;
         …
    }
    …
}

Yes, that’s a bit confusing, having two different bindings (denoted with the subscripts 0 and 1) with the same name. So now I can succinctly answer your questions:

Visible outside of block?

Yes, like a var. However, there’s a second binding that is visible only inside the block.

Hoisted?

Yes – twice.

Up to which point?

Both to the function (however initialised with undefined) and the block (initialised with the function object).

“TDZ”?

Not in the sense of the temporal dead zone of a lexically declared variable (let/const/class) that throws on referencing, no. But before the function declaration is encountered in the execution of the body, the function-scoped variable is undefined (especially before the block), and you’ll get an exception as well if you try to call it.

Just for reference: in ES6, the above-described behaviour was specified only for blocks in function scopes. Since ES7 the same applies to blocks in eval and global scopes.

More Related Contents:

  1. Is it spread “syntax” or the spread “operator”?
  2. `export const` vs. `export default` in ES6
  3. Javascript – arrow functions this in event handler?
  4. Can you bind ‘this’ in an arrow function?
  5. ES2015 import doesn’t work (even at top-level) in Firefox
  6. Getting Unexpected Token Export
  7. How can I access constants in the lib/constants.js file in Meteor?
  8. How to add multiple classes to a ReactJS Component?
  9. How to create an instance of a subclass from the super class?
  10. JavaScript ES6: Test for arrow function, built-in function, regular function?
  11. How can I construct a Template String from a regular string? [duplicate]
  12. Javascript: What is the difference between Function and Class
  13. Why es6 react component works only with “export default”?
  14. How to publish a module written in ES6 to NPM?
  15. Best way to polyfill ES6 features in React app that uses create-react-app
  16. What is the defined execution order of ES6 imports?
  17. JSON stringify ES6 class property with getter/setter
  18. Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?
  19. How to create new instance of an extended class of custom elements
  20. Get the description of a ES6 Symbol
  21. How to loop over object properties with ngFor in Angular
  22. How to create an array of objects from multiple arrays
  23. How should I import the Spatial Illusions milsymbol library into my webpage?
  24. set withCredentials to the new ES6 built-in HTTP request API : Fetch
  25. How does JavaScript import find the module without an extension?
  26. What is ‘global symbol registry’?
  27. Exporting functions with reactjs and babel
  28. object destructuring: how to use intermediate nested property
  29. Compare two Arrays with Objects and create new array with unmatched objects
  30. When is the body of a Promise constructor callback executed?

Leave a Comment