0

I know Javascript create Global Execution Context and put them on the Execution stack and go through two stages, Creation stage, and Execution stage, on the second stage when it finds a function being invoked it creates an another execution context and put that execution context on the top of the execution stack, and repeats the same thing, once the code in the function finishes executing, it popped off the top of stack, return to execution context below in the stack. But my question is that how does Javascript deal with code blocks of condition statements or loops?

if (true) {
  //this is not the right way to write code.

  var var1 = 1;
  var var2 = 2;
  var3 = 3;

  function someFunction(arg1, arg2) {
    //code
  }
  someFunction('value1', 'value2');
}

Does the Javascript engine do the same thing when it enters a code block of condition statements or loops? what actually it does?

Harry
  • 1,282
  • 12
  • 17

3 Answers3

1

Variables declared with var and function have function scope, not block scope. So if you write:

function foo() {
    if (true) {
      //this is not the right way to write code.

      var var1 = 1;
      var var2 = 2;
      var3 = 3;

      function someFunction(arg1, arg2) {
        //code
      }
      someFunction('value1', 'value2');
    }
}

the variable declarations are hoisted to the top of the function. But the assignments are still done where the appear in the flow of the code. It's as if you'd written.

function foo() {
    var var1, var2, someFunction;
    if (true) {
      //this is not the right way to write code.

      var1 = 1;
      var2 = 2;
      var3 = 3;

      someFunction = function(arg1, arg2) {
        //code
      }
      someFunction('value1', 'value2');
    }
}

However, if you declare variables with the EcmaScript-6 let or const keywords, they have block scope and aren't hoisted.

Barmar
  • 741,623
  • 53
  • 500
  • 612
0

But my question is that how does Javascript deal with code blocks of condition statements or loops?

Traditionally, these blocks would not get their own scopes, which means that you cannot declare local variables in them (they would instead be hoisted up to become function-level).

That behaviour is very unexpected for people coming from other programming languages, and has led to bugs without end.

To mitigate that, there is now (ECMAScript 6) a let keyword that allows you to declare variables local to individual code blocks. But keep in mind that a var will still work the same way it always has.

Thilo
  • 257,207
  • 101
  • 511
  • 656
-1

If what you said code block is a kind of { } in C or C++ etc, javascript has no such one or has different one.

In javascript, it is called scope chain. Maybe other languages also concept about it.

And Javascript only make scope chain on

1) function () { }

2) with () { }

3) catch () { }

For example, the most famous example is following.

for (var i = 0; i < 5; i++) { 
    // setClickEventToDiv(i)
}

If we click any div, has event by setClickEventToDiv(i), will have 5 since scope chain.

So, fix it by

for (var i = 0; i < 5; i++) {
    (function (index) { 
        //setClickEventToDiv(index) 
    }(i));
}

since function () {} has own scope

wallah
  • 1,964
  • 5
  • 27
  • 48
  • 3
    With the `let` keyword, block level scopes have been introduced to JavaScript. The same is with `for (var i = 0; i < 5; i++) {` you can write `for (let i = 0; i < 5; i++) {` and you can get rid of the self invoking function. – t.niese Feb 13 '18 at 07:29
  • Yes that is right. But if we use ES5 javascript, we always consider of scope chain more carefully – wallah Feb 13 '18 at 07:31
  • ES5 is used just about everywhere, and ES6 is growing in popularity too, so considering block scopes is important now. – Scimonster Feb 13 '18 at 07:33
  • There seems to be a bit of confusion; the example as given doesn't solve any problem. The extra function in this case just adds useless overhead. That aside, +1 to just using `let` instead. – jmrk Feb 13 '18 at 17:54