5

I thought I grasped the concept of hoisting, but the code below got me confused. How does it return 1? Will the second example() function be hoisted above the first one?

function example() {
  return 9;
}

console.log(example());

function example() {
  return 1;
}

If a function declaration is hoisted in a compilation phase and a function expression is executed in the execution phase. How come the code below returns 7? Is it simply due to example expression being declared first?

var example = function() {
  return 7;
}

console.log(example());

function example() {
  return 0;
}

Thank you in advance!

Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
Roma Kim
  • 321
  • 1
  • 8
  • 1
    Just implicitly move every `function example` declaration to the top of your code; replacing any previous `function` of the same name. *Everything else*, including `var example = ...`, happens afterwards. That's hoisting, and that explains the behaviour perfectly. – deceze Dec 10 '21 at 08:40
  • 1
    So the replacement happens? In the first example `function example()...` with value 9 will be hoisted first and then `function example()...` with a value of 1 will replace it right? And in the second example, we would hoist the `function example() ...` first, then when the `var example = ...` executes it will replace the hoisted one, therefore returning 7. Did I understand it right? Correct me if I'm wrong. – Roma Kim Dec 10 '21 at 08:48
  • 3
    @deceze While you are technically correct (the best kind of correct!), you say it as if `var` doesn't get hoisted, which it does. I think the better answer is that functions gets hoisted before vars. https://stackoverflow.com/a/28246653/1497533 – ippi Dec 10 '21 at 08:53

1 Answers1

2

The reason why var example = function() is getting called instead of function example() is the order of hoisting.

Functions are hoisted first, then variable declarations, per ECMAScript 5, section 10.5 which specifies how hoisting happens.

Read more here: Order of hoisting in JavaScript

Lars Flieger
  • 2,421
  • 1
  • 12
  • 34
  • So to clarify, since `function example()` gets hoisted first and `var example = ...` is second. `var example = ...` replaces the `function example()` right? – Roma Kim Dec 10 '21 at 09:21
  • @RomaKim Yes, exactly. However you have to write `var` first and then `function`. If you switch this order it will call `function` since var can not overwrite the function declaration. There is a good example here (with g and f): https://stackoverflow.com/questions/28246589/order-of-hoisting-in-javascript/28246653#28246653 Just keep in mind that the declaration is something different then hoisting. – Lars Flieger Dec 10 '21 at 09:40
  • 1
    I've looked at the example, but I'm still a little bit confused. From what I understand, `function declaration` will always have higher hoisting priority over `function expression`. Since `var` can't overwrite the `function declaration`, `function declaration` will always be logged first if declared before 'var'. In my second example, `example is 0` during compilation phase, but then `var` overwrites it during execution phase, therefore making `example = 7` and console logging `7`. I think I understand now. @LarsFlieger Thank you so much! – Roma Kim Dec 10 '21 at 10:04