0

I wanted to learn more about when to use function expressions vs function declaration in JavaScript and stumbled across this article which has the following code snippet:

function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
alert(foo());

To my surprise, and because of hoisting, this evaluates to 8. When a declaration gets hoisted, does it get moved all the way to the top of the function (it would be hoisted before the first bar() that returns 3) or, would it be hoisted after all other function declarations (it would be hoisted after the first bar() that returns 3)?

User 5842
  • 2,849
  • 7
  • 33
  • 51
  • https://stackoverflow.com/questions/3887408/javascript-function-declaration-and-evaluation-order – Chiller Jan 01 '19 at 20:29
  • All declarations are "[hoisted](https://stackoverflow.com/a/32475965/1048572)" together, not individually. – Bergi Jan 01 '19 at 20:50

2 Answers2

2

The javascript compiler hoist the first bar function, then when it comes to second function it overrides the first bar function. That's why we are getting the output as 8

Mohamed Yaseen
  • 81
  • 5
1

Hoisting occurs during the compile phase, and so the order of declarations in a given scope is preserved during hoisting. Imagine the interpreter reading the code in two passes, and in the first it only cares about what is declared in a given scope, and then a later pass actually evaluates.

This is why your example returns 8; if the second declaration of bar was above the first, then the call to bar() would return 3.

See also: MDN documentation on hoisting.

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
  • @User 5842 did this answer your question? Don’t forget to [upvote/accept answers to your questions](http://meta.stackoverflow.com/a/5235/158402) `:)` – Andrew Marshall Sep 02 '19 at 19:35