Between

Var,

Let

and

Const

In the previous version of Javascript (ES5) we usually use var to declare variable, but after ES6 released, we can now use let and const.

So what the difference between var, let, and const ? let me explain below.

Var

var always used to declare variable before Javascript ES6 came. In the outer scope we declare variable a with value 0, and then in the inner scope we try to redeclare variable a and it value was overridden from 0 into 1.

Variable b was declared in outer scope and has been overridden from 1 into 3. Variable c was declared in inner scope and still accessible in outer scope.

var a = 0;
var b = 1;

if (true) {
  var a = 1; // overridden
  var c = 2; // create new variable
  b = 3; // overridden

  console.log("a", a); // a = 1
  console.log("b", b); // b = 3
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 1
console.log("b", b); // b = 3
console.log("c", c); // still accessible here (c = 2)

Let

let was came with Javascript ES6. In the outer scope we declare variable a with value 0, and then in the inner scope we try to redeclare variable a but instead of override the value, it create new variable instance which can be accessed only inside inner scope.

Variable b was declared in outer scope and has been overridden from 1 into 3. Variable c was declared in inner scope but cannot be accessed from outer scope.

let is like var but instead of override the variable at redeclaration, it create new variable instance. If declared in the inner scope, it cannot be accessed from outer scope.

let a = 0;
let b = 1;

if (true) {
  let a = 1; // create new variable
  let c = 2; // create new variable
  b = 3; // overridden

  console.log("a", a); // a = 1
  console.log("b", b); // b = 3
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 0
console.log("b", b); // b = 3
console.log("c", c); // error (variable not declared)

Const

const was came with Javascript ES6 like let, but the value cannot be changed after declared. In the outer scope we declare variable a with value 0, and then in the inner scope we try to redeclare variable a but instead of override the value, it create new variable instance which can be accessed only inside inner scope.

Variable b was declared in outer scope but the value cannot be overriden. Variable c was declared in inner scope but cannot be accessed from outer scope.

const is like let but the value cannot be changed.

const a = 0;
const b = 1;

if (true) {
  const a = 1; // create new variable
  const c = 2; // create new variable
  b = 3; // error (constant cannot be changed)

  console.log("a", a); // a = 1
  console.log("b", b); // b = 1
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 0
console.log("b", b); // b = 1
console.log("c", c); // error (variable not declared)

The biggest difference is the value of var and let still can be changed but const not. Now you can just use let instead of var for the changeable variable in your new code.

So can I replace all var into let in my old code ? Yes, you can replace but don't do it blindly. Because it has different behavior like I said before.

I was almost use const because I rarely need a variable which need to change the value.