JavaScript var let const

The introduction of ES6 has fueled an ongoing debate surrounding identifiers in javascript. While some argue that the introduction of const and lets has drastically improved code maintainability, others believe it has made things unnecessarily complex. This article explores the different options available to you, which to use, and why.

When should I use var?

Var is widely used for function scope. When you declare a variable with var, you are giving it meaning only to the function it's defined in. For example:

x = 1
function myFunction(){
var x = 2
console.log(x)
//prints 2 to the console
}
console.log(x)
//prints 1 to the console

Notice how the global variable (x) retains its value of 1 even after a variable with the same name (x) is defined within the function definition. By declaring our variable with var, we are only giving it relevance to the function it's defined in. In other words, the variable x is limited to its function's scope.

The var identifier has been used for years. They are ES5 compliant and make for a simple way of distinguishing between global and local variables. Use var whenever you want to limit a variable to it's parent function's scope and not the whole script.

When should I use let?

ES6 has introduced the let clause. This gives you block level scope. How does this differ from function scope you may ask? Take this example:

//everything before knows about x
for(var x = 0; x < 5; x++){
let x = 4
}
//everything after knows about x

This is a basic for loop. While this usually works fine, it's important to remember what var is doing. Remember that var gives you functional scope. This means the variable you've defined in your for loop now applies to the parent function's scope.

When you use let, you limit the variables scope to it's block. If we were to use let x = 0 instead, everything outside the for loop would not know about the x variable.

Using let gives you block-level scope, meaning variables will only have relevance to their parent block.

When should I use const?

Another bi-product of the ES6 standard is the const declaration. This nearly achieves immutability with your javascript variables. We say nearly because while string and numeric values have always been immutable, objects and arrays can still be altered after assigned as a constant. If we assign an empty array with:

const array = [];

we can still push values to the array instance. What we can't do is assign a different array to our array variable. In this way, const provides a clear way to define global variables. This also makes code more maintainable and easier to read, as intention is made clear.

Conclusion

ES6 has made javascript identifiers a bit more complex. While scope creep is a concern with var, if you can understand function scope then it's unlikely you will run into issues. However let and const are more declarative in that they clarify the developer's intent. Adopting ES6 standards (like let and cons) will help you avoid the potential for scope creep and maintain code readability. The noticable differences may be subtle, but it's quickly becoming recognized as 'best practice' to utilize let and const over var moving forward.