variable without assigned value in javascript

Question

why we are using variable without assigned value like in this function var i; :

function showSlides() {
    var i;

    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 2000); 
}

I mean its working without this, so im curious what is it for, i know that we can check in the loop whether the value is undefined, but i dont see another usage

Answer 1

The variable is used within the loop a few lines later. When using the var keyword to declare variables, the variables are "hoisted" to the start of the function, so even if you write:

function showSlides() {
    var slides = document.getElementsByClassName("mySlides");
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 2000); 
}

The variable i is still technically declared at the top of the function.

If you omit the variable declaration altogether, the i variables ends up in the global scope, which will cause you problems as it will be shared with other functions that also fail to declare the variable locally - so you will eventually have side-effects (and they are hard to debug).

Answer 2

It is important to define variables with var (or, in modern JavaScript, with let or const ) to set the scope of the variable.

A variable defined with var is valid within the function where it is defined. If you omit the declaration, the code will still work, but i will be defined in the global scope and may interfere with other functions that use the same variable name.

Where you put your var statement actually doesn't matter, but it is good practice to put it at the beginning of the function to make the code easier to read and avoid errors.

You might also have written your code like this:

function showSlides() {
    var slides = document.getElementsByClassName("mySlides");
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 2000); 
}

Answer 3

One of the reasons is scoping (if you are inside of your global scope) :

Lats say I have the following function

function test(){
   //code code code
   i=3
   //code code code
}

There is now way I can access that i from outside the function test. But if I do :

var i;
function test(){
   //code code code
   i=3
   //code code code
}

Now the "i" outside the function test is the same as the "i" inside of that function. Whether or not this is good code design is an other discussion.

Answer 4

Because it's used for index value in for loop and initialized in the for loop's initial value part, it's safe to use it. It's acting like this:

 var some_value = 10; for(var i = 0; i < some_value; i++){ console.log(i, "looped"); } console.log(i); 

is equal to

 var some_value = 10, i; for(i = 0; i < some_value; i++){ console.log(i, "looped"); } console.log(i); 

i can be used in the same scope (function body for your case), because it's defined in the same scope.

Answer 5

To add to @fenton's answer:

• in legacy JavaScript, you don't even need to declare variables. But you definitely should. Add "use strict"; at the beginning of your source code to make sure you don't forget;

• the scope of variables in legacy JavaScript is not obvious. Even though JavaScript is C-style, variables don't have block scope, but function scope. So it's a good idea to declare all your variables at the start of the function to make the clear and explicit.