Home > Enterprise >  function hoisting - why is my function not defined properly?
function hoisting - why is my function not defined properly?

Time:02-18

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?

CodePudding user response:

By definition hoisting only happens for the block.

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

Specifically for functions:

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

CodePudding user response:

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()

CodePudding user response:

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();
  • Related