JavaScript Fundamentals

Question

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

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

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

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

In the bar function, if I remove the function foo(). then alert(foo)give me10

Please help if anyone can explain to me why?

Answer 1

This is called javascript hoisting

I will try to explain this in detail. 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 you explain that you created the 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.

, function foo(){}, bar(), foo .

• function foo(){} bar(), .. , 1.

• function foo(){}, , , 10.

  , .

Answer 2

return, foo() .

.

.

function foo(){} foo ( ), foo = 10 . foo.

bar, foo(). alert (foo) 10

foo, .

---

:

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

Hide result

Answer 3

:

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

javascript :

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

foo bar. foo = 10, foo , .

, 1, .

Answer 4

hoisting closure.

function foo(){} , , , , .

function foo(){} , foo = 10; foo, . foo === 10.

function foo(){}, foo = 10; foo , foo , , foo === 1

var foo = 1;
function bar(){
   console.log(typeof foo) // function      
   return;
   function foo() {}
}
bar();
alert(foo); 

:

var foo = 1;
function bar(){
   console.log(typeof foo) // number      
   return;
   // function foo() {}
}
bar();
alert(foo); 

Answer 5

, , , var foo = 10 javascript complier .

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

foo = 10 foo; . .

Answer 6

, JavaScript, OP .

,

JavaScript

JavaScript . , . Ive JavaScript, . , JavaScript , , C-. C:

#include <stdio.h>
int main() {
    int x = 1;
    printf("%d, ", x); // 1
    if (1) {
        int x = 2;
        printf("%d, ", x); // 2
    }
    printf("%d\n", x); // 1
}

1, 2, 1. , C C . , if, , . JavaScript. Firebug:

var x = 1;
console.log(x); // 1
if (true) {
    var x = 2;
    console.log(x); // 2
}
console.log(x); // 2

Firebug 1, 2, 2. , JavaScript . C. , if, . .

, , C, ++, # Java, . , - JavaScript . , :

function foo() {
    var x = 1;
    if (x) {
        (function () {
            var x = 2;
            // some other code
        }());
    }
    // x is still 1.
}

, , . , , JavaScript. . , , .

---

,

JavaScript :

Language-defined: this arguments.

Formal parameters: , .

• : function foo() {}.
• : var foo;.
• ( "" ) JavaScript.
• , , . , :

:

function foo() {
        bar();
        var x = 1;
    }

:

function foo() {
    var x;
    bar();
    x = 1;
}

, , , . :

function foo() {
    if (false) {
        var x = 1;
    }
    return;
    var y = 1;
}

function foo() {
    var x, y;
    if (false) {
        x = 1;
    }
    return;
    y = 1;
}

, . . , . , . JavaScript:

function test() {
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // function expression assigned to local variable 'foo'
        alert("this won't run!");
    }
    function bar() { // function declaration, given the name 'bar'
        alert("this will run!");
    }
}
test();

In this case, only the function declaration has its body raised at the top . The name "foo" is raised, but the body is left behind, which must be assigned at runtime.

This covers the basics of lifting. The full 100% credit of this answer corresponds to ben cherry . I do not want to post this link in my answer, because the links may break, and I found it completely informative and should read for any javascript developer.