🚀Var ,let and const in Java Script | A complete guide

19 April 2024

In this article,we have covered different scenario like scope, declaration, shadowing and hoisting to understand var let and const.

Introduction

First of all a basic doubt which student have about var let and const is that "are they data types" ?

So the answer is "No". Java script is a dynamically typed language to you dont need to define a datatype explicitly (it can be done if you want to). Var, let and const as an keyword which basically acts a an container to store the value defined.

Now since we are clear wth the baove doubt , to actually understand var, let and const, we need to understand how these keyword behaves under different scenario.

One you know this, you will have an crystal clear understanding on these keywords.

You can also watch my video on the same

Scenario 1 : Scope

Var has an global scope

Let has an block scope

const has an block scope

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

Scenario 2 : Declaration

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

var override the data, as it has global scope

let and const print data depending on their scope.

var and let can be declared without initialization, but const can

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

Scenario 3 : Variable Shadowing

Variable shadowing means can the value be overridden or not.,

var can shadow let but vice versa in not true

const cannot be shadowed

Scenario 4 : Hoisting

What is Hoisting ?

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

var can be hoisted

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.

To learn more about frontend and interview preparation, feel free to book my trail session