var vs let vs const

Let’s see what is the difference between the var, let, and const in the JavaScript.

In this article we are going to see:

#var var

All we are familiar with the var keyword. We use it to define the variables.

The variables which are not defined with keyword var are considered as var keywords.

E.g.

var a = 10;
console.log( a );
// Here a print value 10

is equal to

a = 10;
console.log( a );
// Here a print value 10

In both of above examples the var a = 10; and a = 10 works same without any error and print the value 10.

#Function Scope Function Scope

The var variables are function scoped. Let’s see it with example.

function foo() {
     var a = 20;
}
foo();
console.log( a );

We get an error Uncaught ReferenceError: a is not defined

Why?

Because of the variable a is defined inside the function foo, So we only access it inside function foo.

Lets define log inside the function and call the foo function.

function foo() {
     var a = 20;
     console.log( a );
}
foo();

Now we see the 20 in the console log.

Top ↑

#Missing var in Function Scope Missing var in Function Scope

var a = 10;
function foo() {
     var a = 20;
}
foo();
console.log( a );

Here, The console log print the value 10.

Why?

Because of we have defined two a variables.

• The first a variable scope is Global scope.
• The second a variable scope is Function scope.

var a = 10;
function foo() {
     a = 20;
}
foo();
console.log( a );

Here, We get the output 20. Because of we have just override our Global scoped variable a.

Top ↑

#Let Let

In ES6 or Ecmascript 6, we can use the let keyword to define the variable.

• We couldn’t re-declare the let variable in same scope.
• Let define the block scope variable.

Top ↑

#Let could not re-declare Let could not re-declare

To see what does the re-declare means let see some exampels.

Example 1

var a = 10;
console.log( a );
var a = 20;
console.log( a );

Here we see the log print the values 10 and 20 respectively.

Note that we have re-declare the var a but we not get any error while re-declaring it.

Let’s see the same code with the let keyword.

let a = 10;
console.log( a );
let a = 20;
console.log( a );

Here, we get an error Uncaught SyntaxError: Identifier ‘a’ has already been declared.

Because, We could not re-declare the variable in same scope.

NOTE: In above example I say that we could not declare the variable in same scope. But, we can re-declare it in block scope.

Top ↑

#Let is defined as Block scope Let is defined as Block scope

What do you mean by Block scope?

In above example we see that we could not define let a again.

But, We can do it with block scope. Let’s see it with the example:

let a = 10;
console.log( a );
if( true ) {
     let a = 20;
     console.log( a );
}

In this example we see the log print the value 10 and 20 respectively.

How?

Because of the let variable is used in block scope. And the block scope is defined within the {} (open and close curly) brackets.

In above example we use the if( true ) { }. Here,

• let a = 10; is a variable with Global scope because of it is not wrapped in {} brackets.
• let b = 20; is a variable with Block scope because of it is wrapped in {} brackets.

Top ↑

#Let Block scope access Let Block scope access

What do you men the mean the block access? Let see our above example with one small change.

let a = 10;
if( true ) {
     let b = 20;
}
console.log( a );
console.log( b );

In above example we get an error Uncaught ReferenceError: b is not defined

Why?

Because of we can only access the variable b within the if( true ) { } block.

Lets see how it works in if condition.

let a = 10;
if( true ) {
     let b = 20;
     console.log( b );
}
console.log( a );

Now, We see the values 20 and 10 respectively because of JavaScript executes the code line by line.

And here we access the variable b only within the if () condition because of let define the variable in block scope.