var, let, and const in JS

The good old JS had only "var" for the purpose of declaring variables. "let" and "const" was later added to the language. Let us see in this article, that what was the need for this addition?

It is better to be familiar with scoping in JS to understand this topic well. If you are not familiar with scoping, you can read my article on Scoping in JS

So, what is "var" in JS? "var" is a keyword used to declare variables in JS, and such variables are function scoped as the default behavior of JS. Let us understand this with an example.

Example 1

function fun(){
  var a = 5;
  console.log(a);
}

fun();

In the above example, we declared a variable "a" using the "var" keyword and stored the value 5, which we later used inside the console.log statement.

Example 2

var a = 9;

function fun(){
  var a = 5;
  console.log('a inside function: ', a);
}

fun();
console.log('a outside function: ', a);

The output for the above code is following

a inside function:  5

a outside function:  9

The above code demonstrates that variables declared using the "var" keyword are functional scoped, and hence the variable "a" inside the function and outside the function did not conflict, they both have their own copy.

When we say that variables are only function scoped that also means that variables are not block scoped. Let us see an example to make this point clear.

function fun(){
  var a = 10;
  for(var a = 1; a<5; a++){
    console.log('Itteration Number: ',a);
  }
  console.log('a inside function but outside for block: ',a)
}
fun();

The output for the above code is

Itteration Number:  1
Itteration Number:  2
Itteration Number:  3
Itteration Number:  4
a inside function but outside for block:  5

Did you expect "a" to be 10 in the last line? But remember that "var" is function scoped and not block scope, which simply means that inside the function, a variable once declared is available across the function and any change made will be done straight to this variable only.

The other point to notice is that we redeclared the variable "a" in the for loop but JS does not complain about this, rather it uses the available variable and updates the value.

Now, this 2 behavior of "var" was felt very uncomfortable by developers experienced in other languages where variables are blocked scoped, and this used to make JS extremely confusing and difficult for the developers who were willing to switch to JS. So in order to make JS similar to the other languages, "let" and "const" were added to the language that has a similar behavior as other language variables. Let us see this with an example.

function fun(){
  let a = 10;
  for(let a = 1; a<5; a++){
    console.log('Itteration Number: ',a);
  }
  console.log('a inside function but outside for block: ',a)
}
fun();

The output for the above code is

Itteration Number:  1
Itteration Number:  2
Itteration Number:  3
Itteration Number:  4
a inside function but outside for block:  10

Now here you see, "let" is block-scoped, let is an alternative of "var" with its own specific behavior. here in the above example, for the block has its own copy of variable "a" which is declared inside for, which is different from the one declared inside the wrapping function.

We also cannot redeclare a "let" variable. Let's see an example

function fun(){
  let a = 10;
  let a = 5;
}
fun();

The above code will throw error execution

Uncaught SyntaxError: Identifier 'a' has already been declared

"const" also follows the same things I mentioned about "let", with one extra rule. The extra rule is that the value of "const" will be constant and cannot be changed, it will throw an error if we try to change the value. Let us see an example

const a = 10;
a = 5;

The above code throws the following error on execution

Uncaught SyntaxError: Identifier 'a' has already been declared

This simply means that value once assigned to const cannot be changed. The value must be assigned while declaring the const variable. This solves the problem of accidentally overwriting a variable.

There is one last thing that must be covered, that is the behavior of these variables with respect to hoisting. let us first see an example

console.log('var a: ',a);
console.log('let b: ',b);
console.log('const c: ',c);

var a = 5;
let b = 10;

const c = 15;

the output for the above code is following

var a:  undefined
Uncaught ReferenceError: b is not defined at <anonymous>:2:22

You see? "var a" followed hoisting but when we tried to print "let b" it shows error! same will the error for "const" also.

So does that mean that "let" and "const" are not hoisted? WE CANNOT SAY THAT "LET" AND "CONST" ARE NOT HOISTED. Technically every variable in JS is hoisted and so are "let" and "const" variables. But these 2 variables are hoisted with a restriction that we cannot access these variables before the declaration. So even if it is hoisted JS cut's down it's hoisting flexibility for these 2 type of variables making it behave like other languages, but it is hoisted internally.

So as a summary let and const are

• Blocked Scope
• Cannot be redeclared in the same scope
• Are hoisted but we cannot use the hoisting flexibility

So that's all for this article. I hope, I added something valuable to your knowledge.