Why defining function inside an if is a bad idea?

Question

From Eloquent Javascript by Marijn Haverbeke

Different JavaScript platforms in different browsers have traditionally done different things in that situation, and the latest standard actually forbids it.

but why is it bad?

function example () {
    function a () {} // Okay
    if ( something ) {
       function b () {} // Danger !
    }
}

Could you please share with us *how* browsers differ on this, and perhaps link to any particular statement from the ECMAScript standard that discourages this? — Sampson, May 30 '15 at 19:30
I think its also largely pointless due to hoisting, the function would just be moved to the top of its parent function and exist regardless of the if statement. This is probably what he means when browsers handle it differently. http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html — Kevin F, May 30 '15 at 19:31
Because different JavaScript platforms in different browsers have traditionally done different things in that situation. Your code will not be guaranteed to be working on all environments. — thefourtheye, May 30 '15 at 19:34

score 3 · Answer 1 · edited May 23 '17 at 11:58

3

It's considered "bad" because its behavior is inconsistent and sometimes doesn't do what most people would expect. Consider the following snippet:

if (true) {
    function f() { return "t"; }
} else {
    function f() { return "f"; }
}

What would calling f() return? On IE and Firefox, it will return "t", but on Chrome and Safari, it will return "f". Why? A combination of hoisting and JavaScript's scoping rules. For information on how that works, see this question on JavaScript scoping and hoisting.

Effectively, this means that, on some browsers, the branch is completely ignored when it comes to function definitions using the function name() { ... } form. If you really need to do something like this (and you probably don't, since it would be very poor style, anyway), use the name = function () { ... } form instead, since that will not be hoisted, so the behavior is well-defined and will not be inconsistent across platforms.

edited May 23 '17 at 11:58

Community

1
1

answered May 30 '15 at 19:39

Alexis King

43,109
15
131
205

Are you sure it will return `f`...? – Matías Fidemraizer May 30 '15 at 19:45
@MatíasFidemraizer It will on any JavaScript platform I've seen. If you can point out a counterexample of where it will have different behavior, I'd certainly be interested in seeing it. – Alexis King May 30 '15 at 19:46
So now check that on jsFiddle... copy-paste the code and try it – Matías Fidemraizer May 30 '15 at 19:47
@MatíasFidemraizer [This fiddle](http://jsfiddle.net/ym2ab50q/) prints out `f` for me. Is it different on your browser? If so, what browser are you using? – Alexis King May 30 '15 at 19:49
IE11 also prints `t` :D – Matías Fidemraizer May 30 '15 at 19:54
It's Chrome who's printing `f` – Matías Fidemraizer May 30 '15 at 19:55
@MatíasFidemraizer Thanks! I fixed my answer to reflect that. – Alexis King May 30 '15 at 19:57
in chrome, it returns "f" :), press F12->Console->>> if (true) { function f() { return "t"; } } else { function f() { return "f"; } } f() – Soley May 30 '15 at 20:01

Alexander Bell · Answer 2 · 2015-05-30T19:46:16.757

The short answer is already given to you, namely: such practice negatively affects the portability/compatibility of the solution between various browsers. What is even worse: it leads to the added ambiguity regarding the local variables, namely: which variables will be "visible" to which nested functions. Even though it could be considered allowed technique, but it doesn't mean that such technique is a good practice. "Code for the clarity" is the utterly important programming paradigm, so always try avoiding the practices which add to the ambiguity. Best regards,

score 0 · Answer 3 · answered May 30 '15 at 19:41

This is standardized in ES6 and is valid to nest function declaration inside blocks. Here is the spec Block-Level-Function-Declarations

You can try in latest browsers with strict-mode turned on. And for reasons why that behavior is present in old environments look here: Functions

Why defining function inside an if is a bad idea?

3 Answers3