Difference between let, var and const

#javascript #interview #webdev #programming

So after a long while, I finally decided to switch companies. And it is the perfect time to polish on the basics before I deep dive in interviews. As a Frontend developer, basics matters a lot. In javascript, I think day 1 should be for, how let, var and const works and what are their differences. So this is my way of writing and learning once again the basics. lets start...

Scoping

It is worth noting how the variables are scoped. When declaring variables, if its done with var, its in global/functional scope where as if the variables are declared with let/const, its always block scoped. Lets take an example -

function varScope() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 - accessible due to function scope
}

function letScope() {
  if (true) {
    let y = 20;
  }
  console.log(y); // ReferenceError - y is block scoped
}

{
   const a = 10;
}
console.log(a); // ReferenceError - a is block scoped

Shadowing

A variable declared in inner scope of a block with the same name as in outer scope shadows (overlaps) the outer one. lets take an example -

In case of let and const, shadowing happens...

let a = 100;
{
  let a = 200;
  console.log(a); // 200 - inner 'a' shadows the outer one
}

console.log(a); // 100 - outer scope unchanged

but if you use var in block scope with a let in outer, it will give error as var is global scope which means there will be 2 declarations in global scope at the same time.

let b = 10;
{
  var b = 20; // SyntaxError: Identifier 'b' has already been declared
}

Redeclaration

var _allows redeclaration where as _let, const doesn't allow redeclaration in the same scope.

var name = 'Alice';
var name = 'Bob'; // Allowed

let city = 'Paris';
let city = 'London'; // SyntaxError - cannot redeclare block-scope variable

const PI = 3.14;
const PI = 3.14159; // SyntaxError - cannot redeclare block-scope variable

Declaration without initialization and Reassigning

var and let variables can be declared without initialization and reassigned where as const needs to be initialized at the time of declaration and cannot be reassigned.

var a; // Correct
let b;  // Correct
const c; // SyntaxError: Missing initializer in const declaration

var x = 10;
x = 15; // correct

let y = 20;
y = 25; // correct

const z = 30;
z = 35; // TypeError: Assignment to constant variable

Hoisting

A JS program consists of 2 phases - creation phase and execution phase.

During Creation phase, JS engine creates global/window object and allocates heap memory for declaration of variables.

During this phase, all variables and functions are moved to top of the code and declared. variables are initialized _undefined _whereas whole function is declared. This is called hoisting.

Remember, var is hoisted but let, const are not (they are hoisted technically but in temporal deadzone which means they are in the scope but not declared yet).

console.log(price); // undefined (hoisted)
var price = 100;

console.log(message); // ReferenceError (not initialized)
let message = "Hello";

Note: The temporal dead zone is the time between entering scope and the variable's actual declaration where let and const exist, but accessing them throws an error.

Final Notes: