Javascript variable declaration

var, let and const

In the beginning there was only var and all was good, but soon it was noticed that although it was good it was also bad.


function TestVars() {
    var index = 0;
   
    var data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    output = "";

    for (var index = 0; index < data.length; index++) {
        output += data[index] + ":";
        var moredata = [5, 10, 15, 20];

        for (var index = 0; index < moredata.length; index++) {
            output += moredata[index] + ":";
        }
        alert(index);
    }
    var outputField = document.getElementById('result');
    outputField.value = output; 
}

Here is a bit of code that looks simple enough, It's a contrived bit of code but it still looks simple but if you try to run it then it will never end and hang your page. The reason that it never ends is that the variable index is redefined, it has the scope of the function so not only does it effect the inner loop it also effects the outer, it never gets past the value 4. The outer loop would never progress past a certain index value. This is a result of hoisting. Basically javascript default behaviour is to move all variables to the top of the current scope and for var's this is the function. Not a problem I here you say I'll just rename the inner var to something else like indexInner and its all fine again, and that is true but if the code is more complex then you have to think of other variable names just on the off chance that it may suffer from this issue. the names my become convoluted and verbose, all because you can't trust that there may be some part of the code that may of used this name.

Personally I like using index, it says what it does, so what can I do. well I can use let.


function TestVars() {
    let index = 0;

    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    output = "";

    for (let index = 0; index < data.length; index++) {
        output += data[index] + ":";
        const moredata = [5, 10, 15, 20];

        for (let index = 0; index < moredata.length; index++) {
            output += moredata[index] + ":";
        }
    }
    var outputField = document.getElementById('result');
    outputField.value = output;
}

This minor little change fixes all our issues as let is based on the scope of the block not the function.

const

So whats const all about. const has block scope and is readonly, its not to say that if I declare an array then I can't change the elements of the array, but what you cant do is redefine it in another place. Its really all about the semantics, let suggest a variable that will change, as opposed to const which suggests that it shouldn't change. w3schools variables has a great description of the syntax and use of variables.


const store = "dB";
const store = "local"; // this line will cause design time error


const store = "dB";
store = "local"; // this line will cause a runtime error


	//this is OK
const store = ["dB"];
store[0] = "local";
store.push('local-dB');

var

After all of this bad news about var why would you use it? There seems to be no advantage and quite a lot of disadvantages. About the only reason I can see for using var is if you have to support old browsers for backwards compatible. Other than that I would say no.

As let and const were introduced in 2015 most current browsers support these language elements, if you would like to see which browsers supportletandconstthen just look at 'can i use'. The only other reason that I would use var is more on a semantic level as it suggests that this has a broader scope within the procedure, but this is a very moot point.

From a performance perspective then I would say that in the majority of situations it is unlikely to make any difference or at least negligible.