javascript - function definitions not hoisted - Stack Overflow

W.r.t Hoisting of fxn definitions.

if (true) {
  function foo() {
    alert(1)
  }
} else {
  function foo() {
    alert(2)
  }
}
foo()

W.r.t Hoisting of fxn definitions.

if (true) {
  function foo() {
    alert(1)
  }
} else {
  function foo() {
    alert(2)
  }
}
foo()

Chrome, some 2-3 months ago - would print 2. Now, it's printing 1. Did I miss something or, did console stop hoisting on fxn's!

DEMO -- prints 1. I'm not sure where to find demo of the older browser version. Probably older v8 engine's node installation?. Current chrome version - 49

• javascript
• hoisting

Share Improve this question Follow edited Nov 18, 2016 at 12:53 Vivek Chandra asked Nov 18, 2016 at 12:47 Vivek ChandraVivek Chandra 4,35699 gold badges3535 silver badges3939 bronze badges 12

• How does the second foo() definition ever get executed? Surely true is always true... – Jazcash Commented Nov 18, 2016 at 12:49
• 2 @Jazcash That's the beauty of hoisting. Just because the code inside the else statement doesn't get executed doesn't mean the function definition does not get processed. – krillgar Commented Nov 18, 2016 at 12:51
• 3 That code will cause errors in strict mode. Defining functions in conditional clauses like that is bad practice. – Pointy Commented Nov 18, 2016 at 12:54
• 1 Wow, you're right, I just tested in Chrome 37 on Browserstack and it does indeed print 2. I'm perplexed, guess I should do more JS homework! – Jazcash Commented Nov 18, 2016 at 12:56
• 1 Why are you writing code like this? – user663031 Commented Nov 18, 2016 at 13:26

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 7

The code you have is invalid in strict mode. Functions don't get hoisted out of blocks (or at least they shouldn't), function declarations inside blocks were pletely illegal until ES6. You should write

"use strict";
var foo;
if (true) {
  foo = function() {
    alert(1)
  };
} else {
  foo = function() {
    alert(2)
  };
}
foo()

to get the desired behaviour with reproducible and expected results.

Did I miss something or, did console stop hoisting on fxn's!

Looks like V8 was updated to align with the ES6 spec. It does "hoist" them to the function/top scope, but only when the declaration is actually encountered (in your case, conditionally).

You should avoid using conditionally created functions.

For example, assume the following code:

if (false){
 function foo(){
  console.log(1)
 }
}
foo()

Firefox will not hoist the function and this will result in ReferenceError: foo is not defined. Chrome, however, hoists the function nonetheless and prints 1. So obviously you have deal with different browser behaviour. Therefore, do not do things like that at all (or use function expressions if you really want to).

Also see https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/function

Functions can be conditionally declared, that is, a function statement can be nested within an if statement. Most browsers other than Mozilla will treat such conditional declarations as an unconditional declaration and create the function whether the condition is true or not, see this article for an overview. Therefore they should not be used, for conditional creation use function expressions.

Especially look at the linked article which somewhat explains the issue you are seeing. So Chrome seems to have changed something in that regard. But again, do not use conditionally created functions.

And note that, as FREEZE mented, you should use 'use strict'; which would not allow such code but throws an exception instead.