Till now in this course we have been using let
keyword to declare variables. let
was added in ES6(ECMAScript 2015). Earlier var
keyword was used to declare variables. In many tutorials, articles you will find the usage of var
if they are written before ES6 was released.
Although both let
and var
are used to declare variables, usage of var
is discouraged while that of let
is recommended. This is because variables declared with var
can be problematic in a couple of situations and this section will discuss them.
Variable scope in function
In most programming languages, a variable declared inside a block in a function is scoped to that block. That is, a variable declared inside a loop block or an if
block will not be accessible outside these blocks.
In javascript, a variable declared inside such blocks with let
behaves in the same way but if a variable is declared with var
, then it will be available inside the entire function body(even outside the block in which it is declared). Example,
// function definition function demo() { // i is also a variable for(let i= 0; i < 10; i++){ if(i == 5) { // declare a variable with var in if block var lang = 'javascript'; } } // print both the variable console.log(lang); console.log(i); } // call function demo();
In above code, a function is defined which contains a loop with a loop variable i declared using let
. The loop also declares another variable lang inside an if
block using var
keyword. After the loop ends, both the variables are printed to the console and below is the output produced.
javascript
Uncaught ReferenceError: i is not defined
at demo (<anonymous>:6:13)
at <anonymous>:8:1
It is clear from the output that the variable declared inside the for
and if
blocks using var
is accessible outside the loop also while the variable declared with let
is not.
This becomes confusing for learners and developers since most programming languages do not behave in the same way. Variables declared inside a block in most languages are scoped to that block only.
Global scope
If a variable is declared outside of any block or function with var
, it is attached to the window(or global) object while that declared using let
keyword does not. Example,
// declare a variable with var var car='Audi'; // print it using window object console.log(window.car); // declare a variable with let let laptop='sony'; // print it using window object console.log(window.laptop);
Above code creates two different variables using var and let keywords and prints them using window object. A window object is the global javascript object associated with each web page. Below is the output
Audi
undefined
As you can see, the variable created with let
is not accessible using window
object while that created with var is. This becomes a big problem if a variable with the same name is also declared in some other library used in an application.
Since the variable declared with var
becomes a global variable, it can be easily overwritten by the external library making your code to behave unexpectedly and it will be very hard to debug the cause.
Thus, if you are using javascript to write code after ES6, it is highly recommended to use let
to declare variables and not var
.