Var, Const and Let In JS : From beginner to Advance

var, let, and const are three keywords you’ll encounter from the very beginning of your JavaScript journey and continue to use throughout. It’s important to understand their differences in order to write clean, reliable code. All 3 keywords are used to declare variables.

Var: It has functional scope. The important thing to note about var is that the values assigned can be re-assigned and same variable can be redeclared which results in lack of control over our code , resulting in bugs and other problems. Therefore in modern projects/products we rarely see the use of var. It is advisable to never use var unless dealing with legacy code.

// declaration
var a;       
// redeclaration allowed
var a = 50;
console.log(a)  // 50
// reassignment is also alllowed 
a = 60;
console.log(a)  // 60

let: It is of block-scope. Variable declared with let keyword can be reassign but can not be redeclared. let be like “ let this variable change its value but don’t let it redeclared).

// declaration
let b;
// redeclaration not allowed
let b = 10;          // ❌  reference error
// assignment allowed
b = 20;       // ✔️
// reassignment allowed
b = 30 ;        // ✔️

const: Now if we talk about const it is just like its name (const = constant) . It can neither be re-assigned AND redeclared once it is declared. When we declare a variable with const keyword it is mandatory to initialize it at the time of declaration.

// Initialization at the time of declaration.
const c = 10
// Only declaration of const variable  is not allowed
const d;                         // ❌
// Reassignement is not allowed
c = 20                           // ❌

Important Notes About var, const and let

1. Aways use let and const not just over ‘var’ but never use it in the first place.

   • Prefer to use const over let unless it is must that value will change.

   • Using const and let gives you more control over your code.

2. It is important to understand the concept of hoisting.

   Hoisting is the default behaviour of javascript where variable declaration are hoisted on the top.

   To understand it more clearly we can use an example to our cause :-

// In case of var 
console.log(x)                  // undefined
var x = 10

This code is seen by javaScript in this format :

var x; 
console.log(x)
x = 10;

So here we are accessing variable x before it is initialized resulting in undefined which is the default value for var.

Now before we jump to the let and const examples which gives us our 3rd important point, let’s discuss TDZ in 3 point.

3. TDZ stands for Temporal Dead Zone , in this concept although let and const do get hoisted they stays in TDZ resulting in reference error.

console.log(y)       // ReferenceError: Cannot access 'y' before initialization
let y = 10;    

console.log(z)       // ReferenceError: Cannot access 'z' before initialization 
let z = 20;

4. Scope matters a lot when we deal with these 3 keyword( though not var , it won’t hurt to know more.)

{
var a = 10;
let b = 20;
let c = 30;
}
console.log(a);       // 10
console.log(b);       // ReferenceError: b is not defined
console.log(c);       // ReferenceError: c is not defined

5. const does not mean frozen value its just constant binding. In other words if we declare objects and arrays using const variable it does not mean that we can not change the values inside of objects and arrays. It simply means that we can not redeclare the same variable.

// array
const arr = [1,2,3,4,5]
arr.push(6)
console.log(arr) // 1,2,3,4,5,6

// object
const obj = { a:1, b:2, c:3 }
obj.c = 300
console.log(obj)  // { a:1, b:2, c:300 }

const stop us to reassigning the variable not from mutating the object or array.

Summary

Writing code requires a lots of effort and knowledge therefore resulting in the need of polished knowledge. To know where and which keyword to use to store values inside variables and what will that result in gives us hold on our code. It improves code readability and maintenance.