Why is a function declaration within a condition block hoisted to function scope in Chrome but not Firefox?

by

ECMAScript 5, the current official specification of the JavaScript language, does not define the behavior for function declarations inside blocks.

Quoting Kangax:

FunctionDeclarations are only allowed to appear in Program or FunctionBody. Syntactically, they can not appear in Block ({ ... }) — such as that of if, while or for statements. This is because Blocks can only contain Statements, not SourceElements, which FunctionDeclaration is. If we look at production rules carefully, we can see that the only way Expression is allowed directly within Block is when it is part of ExpressionStatement. However, ExpressionStatement is explicitly defined to not begin with “function” keyword, and this is exactly why FunctionDeclaration cannot appear directly within a Statement or Block (note that Block is merely a list of Statements).

Because of these restrictions, whenever function appears directly in a block (such as in the previous example) it should actually be considered a syntax error, not function declaration or expression. The problem is that almost none of the implementations I’ve seen parse these functions strictly per rules (exceptions are BESEN and DMDScript). They interpret them in proprietary ways instead.

Also worth quoting the ECMAScript 6 draft – B.3.3 Block-Level Function Declarations Web Legacy Compatibility Semantics:

Prior to the Sixth Edition, the ECMAScript specification did not define the occurrence of a FunctionDeclaration as an element of a Block statement’s StatementList. However, support for that form of FunctionDeclaration was an allowable extension and most browser-hosted ECMAScript implementations permitted them. Unfortunately, the semantics of such declarations differ among those implementations. […]

As ES5 does not define the behavior for function declarations inside blocks while allowing proprietary extensions, there are technically no “rights” or “wrongs”. Consider them “unspecified behavior” which is not portable across different ES5-compliant environments.

Those are easy to rewrite into portable code anyway:

  • Should the function declaration be hoisted to the top of the current function/global scope? Make sure the function declaration is not directly inside of a block.
  • Should the function be declared only when the block executes? Assign a function expression to a variable (var f = function() {};). Note that there is no hoisting and the variable is still accessible outside of the block (var declarations are function-level scoped).

As per ECMAScript 6, function declarations are block-scoped, so Firefox implements the correct behavior ES6-wise.

More Related Contents:

  1. Why are regular expressions taking the helm in my JavaScript, and how do I insist “this is a string”? [closed]
  2. Is it possible to display a custom message in the beforeunload popup?
  3. new Date() is working in Chrome but not Firefox
  4. Detecting the onload event of a window opened with window.open
  5. How can I set default homepage in FF and Chrome via javascript?
  6. style.display=’none’ doesn’t work on option tags in chrome, but it does in firefox
  7. Cryptic “Script Error.” reported in Javascript in Chrome and Firefox
  8. Breakpoint on property change
  9. How to getting browser current locale preference using javascript?
  10. JavaScript Time Zone is wrong for past Daylight Saving Time transition rules
  11. How JavaScript closures are garbage collected
  12. Does execCommand SaveAs work in Firefox?
  13. Open IE browser in Firefox/Chrome page
  14. Animated gif only loops once in Chrome and Firefox
  15. What happens to code after a javascript redirect (setting window.location.href)?
  16. Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn’t work in Chrome)?
  17. Chrome – Fetch API cannot load file. How to workaround?
  18. How can I inspect disappearing element in a browser?
  19. Get cursor or text position in pixels for input element
  20. Why are function declarations handled differently in different browsers?
  21. How to get result of console.trace() as string in javascript with chrome or firefox?
  22. Silence net::ERR_CONNECTION_REFUSED
  23. How to detect if user has enabled full screen in browser
  24. How to use “segments” mode at SourceBuffer of MediaSource to render same result at Chomium, Chorme and Firefox?
  25. chrome Pop-up blocker when to re-check after allowing page
  26. Chrome won’t play WebAudio getUserMedia via WebRTC/Peer.js
  27. Chrome doesn’t delete session cookies
  28. \u200b (Zero width space) characters in my JS code. Where did they come from?
  29. google chrome extension :: console.log() from background page?
  30. Can’t find serviceWorker in navigator anymore

Leave a Comment