function hoisting - why is my function not defined properly?

Question

 function goo(){ console.log(foo) console.log(foo()) { function foo() {return 'im foo'} } } goo()

I'm trying to see where the foo function definition is hoisted to when it's inside a block.

I've learnt that in non-strict mode a function definition is hoisted to the top of function scope. So I expected the foo function to be defined right after goo() is executed cuz I expect it to be hoisted to the top of the goo function.

After the hoisted definition of foo, console.log(foo) and console.log(foo()) would run and I expected it to each give me a function definition and 'im foo'.

But what ended up happening is that the console says foo is initialized to undefined and foo is not a function. I thought initalization to undefined only happened when a var variable is hoisted. When function definition is hoisted, don't they define themselves? I'm not sure why foo is defined to undefined. Console didn't raise a reference error that says foo is not declared. foo is declared alright but console says it's not a function. Why is it initalized to undefined when I wrote it to be a function that returns 'im foo' in the definition?

 function goo(){ console.log(foo) console.log(foo()) function foo() {return 'im foo'} } goo()

I expected it to run like this code above. The only difference between the two is that foo function is defined inside a block. But why would there be a difference between the two if the foo function is hoisted to the top of goo function? Does this mean I was wrong about function definition being hoisted to top of function scope?

Answer 1

Both the functions foo() and goo() are hoisted during the interpretation phase, but the only catch is that foo is kept inside a block scope and hence access is not possible and you receive an error. Remember that, Block Level Scoping always affects identifier resolution(nothing to do with Hoisting ). In this example, the function declarations are defined and hoisted but a function declared within a block may or may not be available outside the block.

Answer 2

By definition hoisting only happens for the block.

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting#:~:text=JavaScript%20Hoisting%20refers%20to%20the%20process%20whereby%20the%20interpreter%20appears%20to%20move%20the%20declaration%20of%20functions%2C%20variables%20or%20classes%20to%20the%20top%20of%20their%20scope%2C%20prior%20to%20execution%20of%20the%20code .

Specifically for functions:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function#conditionally_created_functions

Answer 3

function goo(){
    console.log(foo)
    console.log(foo())
    {
        alert(1)
        function foo() {return 'im foo'}
        
    }
}
goo()

is equal to:

function goo(){
    console.log(foo)
    console.log(foo())
    {
        function foo() {return 'im foo'}
        alert(1)
        
    }
}
goo()

but not equal to:

function goo(){
    {
        function foo() {return 'im foo'}
        alert(1)
        
    }
    console.log(foo)
    console.log(foo())
}
goo()

Answer 4

You can initialize your function before call it to resolve "something is not a function" error

function goo() {  
          function foo() {
           return "im foo"
   }     
  console.log(foo);   
  console.log(foo()); 
  } 
goo();