Understanding the difference between let and var

Before ECMA 6, the common way of creating a variable was with the use of var. However, using var sometimes introduces bugs that mostly show up at runtime and others that are not revealed at runtime but may affect the way your code works.

Some of the properties of var that introduce bugs as mentioned in the previous paragraph are as follows:

• var allows the redeclaration of variables.
• var is not blocked scope; hence, it is either attached to the global scope or to a function scope.

Let's discuss the two properties listed above in detail.

var allows the redeclaration of variables

var gives users access to redeclare variables along the line, hence overriding the previous variable of the same name. This feature might not show an error if not caught, but will certainly affect the behavior of the code:

var population_count = 490; 
var new_count = 10; 
 
//along the line; you mistakenly re-declare the variable 
var population_count = "490"
 
//do some arithmetic operation with the variable 
var total_count = population_count + new_count 
 
//output: "49010" 

In the preceding code snippet, there won't be any error, but the main objective of the code is altered just because var did not alert us that such a variable has been declared already.

Let's say we replace var with let, as shown in the following code:

let population_count = 490;
// ...some other code goes here 
let population_count = "490"
 
//output: Error: Identifier population count as already being declared 

You can see from the preceding error output that let, unlike var, will not allow you to declare a variable in the same namespace twice.

Next, let's look at the scope property of variables declared with var.

var is not a blocked scope

Variables declared with var have the following properties:

• They are readily available in the scope to which they are defined.
• They are available to scope within the range they are being declared.

In the following code, we will check how the estimate variable declared with var is accessible across all the scope within the variable declaration scope:

var estimate = 6000;
function calculate_estimate() {
  console.log(estimate);
}
calculate_estimate() // output 6000
 
if(true){
 console.log(estimate);
}

Now, for a blocked scope such as if, while loop, and for loop, the code within the blocked scope is meant to be run when the scope is available. Likewise, the variable is meant to exist only when the scope is available, and once the scope is not available again, the variable should not be accessible.

Declaring variables with var makes the preceding statement not possible. In the following code, we declare a variable using var and investigate its availability across all possible scopes:

if(true){
 var estimate = 6000;
}
console.log(estimate)

This will output the estimate as 6000. The variable is not meant to exist outside the if block. Using let helps to solve this:

if(true){
 let estimate = 6000;
}
console.log(estimate)
//output: ReferenceError: estimate is not defined

This shows that using let to declare variables helps reduce unprecedented bugs in your code. In the next section, we'll discuss another important concept called destructuring.