JavaScript fundamentals confusion [duplicate]

Question

Hi I am trying to understand the JavaScript fundamentals, and stuck in one condition.

    var foo = 1;
    function bar(){
        foo = 10;       
        return;
        function foo(){}
    }
    bar();
    alert(foo);

Here alert(foo), will give me 1, and I know after return statement, function foo() will not execute. But now if change the code:

    var foo = 1;
    function bar(){
        foo = 10;       
        return;
    }
    bar();
    alert(foo); 

In bar function, If I will remove function foo(). then alert(foo) will give me 10

Please help, if someone can explain me why?

Answer 1

This is called Javascript hoisting

I will try to explain it in details.. This is what we have

var foo = 1;

function bar(){
  foo = 10;       
  return;
  function foo(){}
}

bar();
alert(foo);

The interpreter will rewrite this as

var foo = 1;

function bar(){
  function foo(){}  // this is also equal to var foo = function(){};
  foo = 10;       
  return;      
}

bar();
alert(foo);

So now explaining you the hoisted code.

var foo = 1; // global variable; 

function bar(){
  var foo = function(){};  // foo is local variable of type function
  foo = 10;                // foo is changed to hold a number
  return;      
}

bar();
alert(foo);  // you alert global variable.

As you can see if the code function foo(){} is present it is treated as a local variable within the bar() scope and any change to the foo is treated as a local variable change..

• When you have function foo(){} in your bar() you are not even touching the global variable.. hence alerts 1.

• When you don't have function foo(){} you are touching the global variable and hence alerts 10.

  Now I hope you understand the output..

Answer 2

I know after return statement ,function foo() will not execute.

That's not true.

Function declarations are hoisted.

function foo(){} creates a local variable called foo (assigning the new function to it) and then foo = 10 overwrites it. You never test the value of that foo variable though.

In bar function , If I will remove function foo(). then alert(foo) will give me 10

You no longer have a local variable called foo so you are overwriting the global variable with the same name.

---

Compare:

(function() {
  console.log("Version 1");
  var foo = 1;

  function bar() {
    console.log("At top of bar, foo is " + foo);
    foo = 10;
    console.log("After assignment in bar, foo is " + foo);
    return;

    function foo() {}
  }
  bar();
  console.log("Global foo is " + foo);
}());

(function() {
  console.log("Version 2");
  var foo = 1;

  function bar() {
    console.log("At top of bar, foo is " + foo);
    foo = 10;
    console.log("After assignment in bar, foo is " + foo);
    return;
  }
  bar();
  console.log("Global foo is " + foo);
}());