CODEWITHSUNDEEP
javascript
Ali
Ali

Reputation: 267317

Variable scope in Javascript for loop

What's the difference between:

function bar()
{
  for (x=0; x< 100; x++) {}
}

And

function bar()
{
  var x;
  for (x=0; x< 100; x++) {}
}

If x wasn't declared outside of that function, and so it wasn't a global variable? I always wonder this because I generally don't declare throwaway variables which are used only in a loop, but I wonder if this might break comparability in a browser or such.

Upvotes: 22

Views: 25505

Answers (3)

Iman Mohamadi
Iman Mohamadi

Reputation: 6839

Always remember, in JavaScript, scopes are defined by functions. In the example

function () {
    var x = 15;
    bar();
    function bar() {
      for (x=0; x< 100; x++) {}
    }
    //here x will be 100
}

You might accidentally access a higher scope. What I mean of higher scope is a wrapper function or window.x (if no more wrapper function is there). It's much better to stick to the second example if you just want to use x for your loop.

function () {
    var x = 15;
    bar();
    function bar() {
        var x;
        for (x=0; x< 100; x++) {}
    }
    //here x will be 15
}

Upvotes: 2

Norbert Hartl
Norbert Hartl

Reputation: 10851

A variable is created at the time you declare/use it. If you omit the var keyword than the variable is created automatically in the global scope. So you produce a side effect. This is generally to be avoided.

Assume you use global variables and then you chose the name of variable that some other piece of the software has already taken. This will lead to a situation where to pieces of code overwrite their values. This produces errors and is most of the time hard to debug. In your example you might overwriting a global variable x that another software is using.

Using var is also faster. If you access a global variable it has to scan all scopes up to the global one for the variable name. By using var it is bound to your local scope.

It is good practice to use always use var. Or better: it is always good to select the most narrowed scope for your variables. Now you have global and var. A var declaration is visible in the whole function no matter where you declare it. In javascript 1.7 there is new keyword introduced: let. Let narrows the scope even more. If you declare your for loop with

for(let x = 0; x < 100; i++) {}

than x is visible only inside the {} block.

Upvotes: 16

cobbal
cobbal

Reputation: 70805

The first example will either add or modify the global variable x, which is generally to be avoided if not the desired outcome.

While your second example works as desired (no side effects) an alternative that looks better in my opinion would be

function bar()
{
  for (var x=0; x< 100; x++) {}
}

Upvotes: 34

Related Questions