LET vs VAR vs CONST

In JavaScipt we have three types of variable declarations which include let, var and const. let and const was introduced in ES6 Features.

Now let's see the difference between these variables and when to use them.

1. Scope

var has function scoped whereas let and const were block-scoped( accessible within open and closed curly braces).

function Scope() {
if (1 == 1) {
  var varScope = “var scope is available”;
  let letScope = “let scope is available”;
  const constScope = “const scope is available”;
console.log(varScope);
console.log(letScope);
console.log(constScope);
}
console.log(varScope);
//console.log(letScope); //Error: letScope is not defined
//console.log(constScope); //Error: constScope is not defined
}
Scope();
Output
var scope is available
let scope is available
const scope is available
var scope is available

2. Variable declaration

We can redeclare the same var variable multiple times but redeclaration doesn't work for let and const keywords

function Declaration() { 
  var varDeclare = “Apple”;
console.log(varDeclare);
  var varDeclare = “Banana”;
console.log(varDeclare);
  let letDeclare = “Blackberry”;
console.log(letDeclare);
//  let letDeclare = “Coconut”; // Error: Identifier ‘letDeclare’ has already been declared
// console.log(letDeclare);
  const constDeclare = “Grapes”;
console.log(constDeclare);
//  const constDeclare = “Jackfruit”; // Error: Identifier ‘constDeclare’ has already been declared
// console.log(constDeclare);
}
Declaration();
Output
Apple
Banana
Blackberry
Grapes

3. Updating value

Updating value is possible in var and let. But as the name suggests const will remain constant and hence will not update values.

function Update() 
  var varUpdate = “Violet”;
  varUpdate = “Indigo”;
console.log(varUpdate);
  let letUpdate = “Blue”;
  letUpdate = “Green”;
console.log(letUpdate);
  const constUpdate = “Yellow”;
// constUpdate = “Orange”; //Error: Assignment to constant variable.
// console.log(constUpdate);
}
Update();
Output
Indigo
Green

But const property is updatable.

const constProperty = { name: “Red”, color: “#ff0000” };
constProperty.name = “White”;
constProperty.color = “#ffffff”;
console.log(constProperty);
Output
{ name: 'White', color: '#ffffff' }

4. Use before declaration

If we use a var variable before its declaration then it will return an undefined value. But other declarations will throw an error.

function BeforeDeclaration() {
console.log(varBeforeDeclaration);
  var varBeforeDeclaration = “Sunday”;
// console.log(letBeforeDeclaration); //Error: letBeforeDeclaration is not defined
// let letBeforeDeclaration = “Moday”;
// console.log(constBeforeDeclaration); //Error: constBeforeDeclaration is not defined
// const constBeforeDeclaration = “Sunday”;
}
BeforeDeclaration();
Output
undefined

When to use?

var: When a variable is to be declared across the function. Also, the values need to be editable

let: When a variable is to be accessible only within the block section

const: Values that are assigned at the time of declaration and never change. Best use of const is in node js where we declare connections, framework, port number and other required stuff with this variable declaration.

Quick summary:-

Difference

Let me know if I have missed anything. Suggestions are welcome.

Thanks🙂.