How does an empty function declaration work with hoisting in javascript?

Question

Looking at the hoisting example from this site, I don't get why the below alters 1 even after the hoisting:

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a); // alerts 1

is actually

var a = 1;
function b() {
  function a() {}
    a = 10;
    return;
}
b();
alert(a);

Shouldn't it alter 10 because a is still assigned to 10 before b function returns? Why does calling an empty a function cause this? On a related note, why does the below not alert function but still alter 1? Doesn't a get reassigned to a function with the declaration?

var a = 1;
function a() {}
alert(a);

function a(){} is just like var a;. The a in b is not the a outside. Also a is never called. — Sebastian Simon
– Sebastian Simon, Commented Oct 27, 2016 at 11:16
function a(){} will create a pointer for function and a=10 is assign/ replacing value to this pointer and not a defined outside — Rajesh Dixit
– Rajesh Dixit, Commented Oct 27, 2016 at 11:17
Your first code snippet is not actually parsed as the second one. a variable always remains outside the scope of the function a(). — haim770
– haim770, Commented Oct 27, 2016 at 11:21

Rajshekar Reddy · Accepted Answer · 2016-10-27 13:36:21Z

4

Let's take it line by line,

Here, b(); you call the function b. What has the function b in its body? The declaration of a new function whose name is a. When you access a inside the b, you actually don't access the global variable a, but the function you just declared. So the 10 will be set to the pointer that points to function called a and not the global variable called a

But why does the first block of code alerts 1? I am confused

Because when the JavaScript engine goes to execute the assignment:

 a = 10;

checks where a has been defined. Since in the current scope, where you try to set 10 to a, there is a function declaration, whose name is a, Then will happen that I described above. But you would say why? The function declaration is below the assignment. The reason why this is happening is the fact the JavaScript engine first process the declarations in your script and then proceeds to the execution of your script. So when the engine would questioned about a, where a is defined, as always it will look first at the current scope. If there isn't there then it will look in the scope where the current scope is enclosed. In your case this is the global scope, as I can infer from your code. So if you hand't defined this function, the the second step I mentioned before would have been done and since there is variable called a, would had alter it's value. If there isn't there any variable then a would have been defined on the global scope and it's value would have been 10.

var a = 1;
function b() {
    a = 10;
    return;
    // I renamed the function from a to c to notice the hoisting
    function c() {}
}
b();
console.log(a);

edited Oct 27, 2016 at 13:36

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

answered Oct 27, 2016 at 11:18

Christos

54.1k9 gold badges82 silver badges114 bronze badges

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

6 Comments

Rajshekar Reddy Over a year ago

But why does the first block of code alerts 1? I am confused

Sebastian Simon Over a year ago

@Reddy “[Y]ou actually don't access the global variable a”.

Rajshekar Reddy Over a year ago

@Xufox but a = 10; will access the global defined a right?

Rajshekar Reddy Over a year ago

Chris so you mean even if the function declaration is under the assignment since they have same names the meaning is same for first and second block of code

Sebastian Simon Over a year ago

@Reddy No, it won’t. It will redefine the function a declared and hoisted in b.

|

Collectives™ on Stack Overflow

How does an empty function declaration work with hoisting in javascript?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related