Javascript language has immensely evolved in the last couple of years where a lot of new features were introduced in the last versions beginning with es6. One of these areas that have improved to the better is the declaration of variables and keywords used to achieve the goal namely; var, let, and const.
Before this the most used declaration keyword was var. This article explains why the use of var in your javascript code is problematic and instead use let or const.
The first reason why you should avoid using var in your javascript code is var has a poor definition of scope.
var does not prevent a variable from being redefined in a scope. This means that var allows the definition of a variable more than once in the same scope. Example;
// jshint esversion:6
"use strict";
/* jshint node: true */
var target = 20;
console.log(target);
var target = 'twenty';
console.log(target);
This example clearly indicates that despite being defined the first time with the datatype of a number, var allows redefining of the same variable with a data type of string within the same scope.
This is a huge issue especially if the variable is redefined in the same function. In fact, javascript doesn’t acknowledge this as an error or give an indication of problematic or erroneous code.
If the intention was to reassign the first variable to the second, then there should be no reason to redefine the variable the second time. This basically erases the first variable and replaces it with the second.
The second reason why using var in your javascript code may result in erroneous code is that var does not have block scope.
When a variable is defined using var in a function, the scope of that variable is within the function, but there are times when more restriction is required, for example when working with loops inside a function.
A variable defined inside a loop should be constricted to operate inside that loop which is not the case when var is used for declaring the variables. Example;
// jshint esversion:6
"use strict";
/* jshint node: true */
console.log(target);
console.log('entering the loop');
for (var i = 0; i < 4; i++) {
console.log(target);
var target = 'target' + i;
}
console.log('Exiting loop');
console.log(target);
In this example, both the variable (target) and the loop index(i) are defined using var.
The variable is defined inside the loop. Having no block scope simple means poor encapsulation of variables - meaning that var has a poor way of restricting a variable to its defined scope.
Although defined inside the loop, we can already access the variable target before the loop begins b when we use the code console.log(target); a problem referred to as variable hoisting. Basically var allows the use and access of variables even before they are declared like in this example.
By using var in this example, both the variable (target) and the loop index ( i) become available outside the expected scope (loop).
In another post, we learned about linting and running on strict mode in javascript. Unfortunately, these awesome features of the new javascript will not aid in these scenarios as evident in our code where they are well applied.
There is a reason behind this and it's the same reason why var is still in use today, eliminating the use of var entirely would arise in a lot of compatibility issues between the old and new javascript engines, and this would be a huge problem especially when deploying javascript code in different browsers.
Moving forward with your development career, javascript's latest versions (from es6) have introduced two alternatives namely let and const. To learn how and when to use the two, have a look at this article, then follow this blog or follow me on Twitter and more content will flow your way.
I hope you enjoyed this small insight into javascript and hopefully, you'll stick around for more that's on the way.