Function declaration inside conditional

Question

In a book You Don't Know JS: Scope & Closures There is this sample of code I don't understand fully.

"Function declarations that appear inside of normal blocks typically hoist to the enclosing scope, rather than being conditional as this code implies:"

foo(); // "b"

var a = true;
if (a) {
   function foo() { console.log( "a" ); }
}
else {
   function foo() { console.log( "b" ); }
}

What does it mean? How is it even possible? Is the conditional not working?

*"What does it mean?"* It means that function declarations are hoisted just like everywhere else. *"Is the conditional not working?"* It is working, but hoisting happens before any code is executed. It's actually more complicated then that because function *declarations* inside blocks are actually invalid. Yet browsers allowed them and implement different behaviors. See [Why are function declarations handled differently in different browsers?](http://stackoverflow.com/q/8871974/218196) — Felix Kling, Apr 19 '17 at 22:49
if you did `var a = true; const foo = a ? () => console.log('a') : () => console.log('b'); foo();` Then the console would log 'a' because `foo` wouldn't be hoisted. — Josep, Apr 19 '17 at 22:53
Also see [*Why are function declarations handled differently in different browsers?*](http://stackoverflow.com/questions/8871974/why-are-function-declarations-handled-differently-in-different-browsers). — RobG, Apr 19 '17 at 22:58
@RobG I disagree with your duplicate marking. He is clearly not asking about browser differences. He did not understand function hoisting. — Chip Dean, Apr 19 '17 at 23:11

score 0 · Answer 1 · edited Apr 19 '17 at 22:59

0

It's happening because function declarations are moved to the top of the file by the javascript parser. That's what they mean by hoisting. The last declaration of foo overwrites the first when they are hoisted.

edited Apr 19 '17 at 22:59

Josep

12,926
2
42
45

answered Apr 19 '17 at 22:50

Chip Dean

4,222
3
24
36

1

Your explanation is incorrect. Function declarations were not allowed inside blocks, so some browsers "hoisted" them, some didn't (treating them as function statements, an extension to ECMA-262) and some threw errors. The behaviour has been more or less standardised in the current spec, but their use is discouraged. See the [*duplicate link*](http://stackoverflow.com/questions/43135925/why-javascript-function-declaration-behave-differently-in-chrome-and-safari). – RobG Apr 19 '17 at 22:52
@RobG - That's not correct. Please see the section on this page about function hosting: http://adripofjavascript.com/blog/drips/variable-and-function-hoisting – Chip Dean Apr 19 '17 at 22:54
In particular, on that page, you can search for `isItHoisted` and look at the function and the explanation accompanying. – Chip Dean Apr 19 '17 at 22:55
@RobG The answer in that duplicate link is different than this person's question... – Chip Dean Apr 19 '17 at 22:58
@ChipDean have you read [this answer](http://stackoverflow.com/questions/43135925/why-javascript-function-declaration-behave-differently-in-chrome-and-safari#answer-43136985) though? – Josep Apr 19 '17 at 22:59
@Josp So you are saying You don't know JS is wrong?It's saying exactly what I'm saying here: https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch4.md – Chip Dean Apr 19 '17 at 23:01
@Josep Here is the line from that page: While multiple/duplicate var declarations are effectively ignored, subsequent function declarations do override previous ones. – Chip Dean Apr 19 '17 at 23:01
@ChipDean I was just asking if you actually read [that answer](http://stackoverflow.com/questions/43135925/why-javascript-function-declaration-behave-differently-in-chrome-and-safari#answer-43136985). I'm asking that because until 5 minutes ago I would have thought that your answer is completely accurate. After reading that one though I feel that's a more complete answer, therefore more accurate... Also, no point arguing here, since this is a duplicate question. Maybe you should elaborate your answer better in the original question. – Josep Apr 19 '17 at 23:05
1

I'm well aware of "hoisting". There is nothing in your linked article about function statements, which is what the OP is about. If the section of code is not treated as a function declaration, then it isn't "hoisted", which is why there are different behaviours in different browsers. – RobG Apr 19 '17 at 23:11
@RobG Umm he's asking about function declarations, which is what the linked article is about. Did you even look at it? – Chip Dean Apr 19 '17 at 23:16
@Josep i can't respond on that question because it's different than this one. He's clearly not asking about browser differences. – Chip Dean Apr 19 '17 at 23:27

Function declaration inside conditional

1 Answers1