Function declaration in nested block scopes

Question

As with this reference, Function declaration statement and variable declaration do NOT have block scope. So I am asking for why the code below executed this way.

    //javascript es6
    {
        function bar() {
            console.log("1");
        }
    }
    function bar() {
        console.log("2");
    }

    bar(); //prints "1" not "2"
    this.bar() //also prints "1" not "2"

what I know is that the code above should consider the two functions in the global scope, but it seems like function declaration is affected by the block scope.

this.bar() triggers an error in FF (and window.bar() as well) ("TypeError: this.bar is not a function"). — Teemu
– Teemu, Commented Nov 6, 2019 at 13:35
It's complicated: What are the precise semantics of block-level functions in ES6? — Felix Kling
– Felix Kling, Commented Nov 6, 2019 at 13:40

Dokt · Accepted Answer · 2019-12-09 15:16:12Z

4

Basically, function declarations run before the code is executed. Let me try to make it clearer.

Let's rename the functions to this first so I can better explain how it works:

    {
        function bar() {
            console.log("1");
        }
    }
    function foo() {
        console.log("2");
    }

What your compiler does is it scans through your js file and sees that there is one function declaration which is the foo function (ignoring the one inside the brackets). Then it runs the js file as it normally would, goes inside your brackets and sees that there is another function declaration (the bar() function) which is declared after the foo() function.

So basically, this is the result you would get :

bar() // returns "2"

{
    function bar() {
        console.log("1")
    }
}
bar() // returns "1"

function bar() {
    console.log("2")
}

bar() // returns "1"

I hope it makes sense.

For more information, try looking for function expression vs function declaration and also, see how the javascript compiler works, this will give you a better understanding of how hoisting works.

edited Dec 9, 2019 at 15:16

answered Nov 6, 2019 at 13:50

Dokt

1991 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kirollos Nasr Over a year ago

Great, but why using var when declaring variables it doesn't work this way.

Dokt Over a year ago

Hoisting for var , let and const variables is different. I recommend reading this (scotch.io/tutorials/understanding-hoisting-in-javascript)

Dokt Over a year ago

No problem. I hope it helps

Proo1931 Over a year ago

Nice answer but plz change 2 with 1 in your second code example just it is in original question :) I lost 2 minutes till get notice that there mixed the other way around.

Strike Eagle · Accepted Answer · 2019-11-06 13:46:37Z

1

It looks like this problem is due to javascript hoisting. For some reason from what I can tell declaring your function within block scope changes the way that it gets hoisted. Read more here: https://www.w3schools.com/js/js_hoisting.asp

answered Nov 6, 2019 at 13:46

Strike Eagle

8615 silver badges20 bronze badges

Collectives™ on Stack Overflow

Function declaration in nested block scopes

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related