JavaScript setInterval loop not holding variable

Question

Here is my code:

    var showNo = 1;     
    window.setInterval(function() {
          console.log(showNo);
          if(showNo === 1) { var nextNo = 2;  }
          else if(showNo === 2) { var nextNo = 3;  }
          else if(showNo === 3) { var nextNo = 4;  }
          else if(showNo === 4) { var nextNo = 5;  }
          else if(showNo === 5) { var nextNo = 1;  }
          else { var showNo = 1; var nextNo = 2; }

          var showNo = nextNo;
          }, 500);

My question is, why is the showNo variable not holding when the setInterval loop starts? The console displays 'undefined' in the above example. This may be a simple question, but I am trying to teach myself query and this has me stuck..

Any answers would be great.

Thanks.

Answer 1

You are re-creating a new LOCAL variable called showNo, this is not referencing the GLOBAL variable called showNo.

It is very bad practice to use global variables, I advise wrapping this inside of an anonymous function

I think this is what you're looking to do:

  (function() {
      var showNo = 1;     
      window.setInterval(function() {
            console.log(showNo);

            if( showNo >== 1 && showNo <== 4 ) {  
                showNo++;
            } else if( showNo === 5 ) {
                showNo = 1;  
            } else { 
                showNo = 2; 
            }

            }, 500);
    })();

Answer 2

what @Jacob said is true, but you might want to look at simplifying your code a little like this:

var showNo = 1;     
window.setInterval(function() {
      console.log(showNo);
      showNo++;
      if(showNo > 4)
          showNo = 1;
      }, 500);

Answer 3

I would recommend you to read Javascript Closures, then you'll have a deep understanding about how identifiers are resolved in JavaScript.

Answer 4

In the wide world of JavaScript, var declarations are function scoped, not block scoped. They are also elevated to the top of a function. So, you might as well have written:

var showNo = 1;     
    window.setInterval(function() {
          var showNo; // I'm localizing it
          var showNo; // and again
          var nextNo; // Now I'm declaring a new variable
          var nextNo; // and I just can't stop
          var nextNo; // myself from declaring it again
          var nextNo; // its like beating
          var nextNo; // a
          var nextNo; // dead horse.
          console.log(showNo);
          if(showNo === 1) { nextNo = 2;  }
          else if(showNo === 2) { nextNo = 3;  }
          else if(showNo === 3) { nextNo = 4;  }
          else if(showNo === 4) { nextNo = 5;  }
          else if(showNo === 5) {  nextNo = 1;  }
          else { showNo = 1; nextNo = 2; }

          showNo = nextNo;
          }, 500);

You can probably see the problem now.

Everyone else's advise on refactoring this is important as well. But understand scoping in javaScript, and these annoyances will disappear.