var vs let vs const | JavaScript Interview Questions

In JavaScript, there are three keywords used for variable declaration: "var", "let", and "const"

Definiton(ft. chatgpt)

In JavaScript, there are three types of variable declarations: var, let, and const. Here’s what each one means:

1. var: var is the original way to declare variables in JavaScript. It has function-level scope, which means that variables declared with var are visible throughout the entire function in which they’re declared, as well as any nested functions. Variables declared with var are also hoisted to the top of their scope, meaning that they’re available for use before they’re actually declared in the code. However, they’re initialized to undefined until they’re assigned a value.
2. let: let was introduced in ES6 (ECMAScript 2015) as a replacement for var. It has block-level scope, which means that variables declared with let are only visible within the block in which they’re declared (i.e. within curly braces {}). Variables declared with let are not hoisted, so they cannot be used before they’re declared in the code. They’re also not initialized until they’re assigned a value.
3. const: const is also a new addition to JavaScript in ES6. It’s used to declare variables that should not be reassigned a new value after they’re initialized. Like let, const also has block-level scope and is not hoisted. However, const variables must be initialized with a value when they’re declared, and they cannot be reassigned later in the code.

But var, let and const behaves differently in different condition.

So to understand var, let, and const in detail, we need to see how they behave in different contexts.

1. Scope

• var has global scope, work inside or outside the block
• let and const has a block-level scope

Example 1 –

{
var a = 5;
let b = 6;
const c = 7;
}
console.log(a);
console.log(b);
console.log(c);

In this case, var has a global scope and can be accessed from outside the block while let and const cant be accessed

Example 2 –

function a() {
  let fun1 = 10;
}
a();

console.log(fun1);

In this case, var has a functional scope and cannot be accessed from outside the block

2. Declaration

Re-declaration under the same scope

Let and const cannot be redeclared under the same scope, while var can.

//error
let a;
 let a;

//error
 const a;
 const a;

//works fine
var a;
var a;

Re-Declaration under the different scope

All three can be redeclared under the different scope, but

• var override the data, as it has global scope
• let and const print data depending on their scope.

var a = 1;
let b = 2;
const c = 3;

{
  var a = 4;
  let b = 5;
  const c = 6;
console.log(c);
}

console.log(a);
console.log(b);
console.log(c);

output -
6
4
2
3

Declaration without initialization

Var and let can be declared without initialization, but const can’t.

 var a;
 let a;

//errror
 const a;

Re-initialization

✅ var can be reinitialized

✅ let can be re-initialized

❌ const cannot be re-initialized

var a = 5;
a = 6;
console.log(a);

let a = 5;
a = 6;
console.log(a);

const a = 5;
a = 6;
console.log(a);

But the const value can be changed inside the object

const obj = {name : "himanhu"};

obj.name = "shekhar';

console.log(obj);

3. Variable Shadowing

//shadow var variable with let – works fine
//shadow let variable with var – error
//const cannot be shadowed

var a = "hey";
function test() {
  var a = "hello";

  if (true) {
    let a = "hi";
    console.log(a);
  }
  console.log(a);
}

test();
console.log(a);

4. Hoisting in var,let and const

During the creation phase, java script engines move all the functions and variable declarations to the top of the code.

• let and const cannot be hoisted, meaning let and const are hoisted in the Temporal dead zone
• var can be hoisted

console.log(a);
let a = 1;
Uncaught ReferenceError: can't access lexical declaration 'a' before initialization

console.log(a);
let a = 1;
Uncaught ReferenceError: can't access lexical declaration 'a' before initialization

console.log(a);
var a = 1;
output - undefined

//how java script engine read the code
var a;
a = undefined
console.log(a)

Temporal Dead Zone : 
It is an area or block where variable are in the scope, but they are inaccessible until they are declared.

Note

Only declaration get hoisted at the top , not the initialization
function Add(){
    console.log(answer)
    var answer = 2
};
Add()

Interview Question

function abc() {
  console.log(a, b, c);
  const c = 30;
  let b = 20;
  var a = 10;
}
abc();

Comment you output below 

Comment your output below and tag me on Instagram

Conclusion

In summary, the main differences between var, let, and const are their scope, hoisting behavior, and reassignment rules. var has function-level scope, is hoisted, and can be reassigned. let has block-level scope, is not hoisted, and can be reassigned. const also has block-level scope, is not hoisted, and cannot be reassigned.