My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

JavaScript : Scope and Declaration of Let,Const,Var

Akshat Gupta's photo
Akshat Gupta
·Jan 10, 2022·

3 min read

JavaScript : Scope and  Declaration of Let,Const,Var

Introduction

Hello , I felt the importance to write this blog when I got confused in a very simple looking code but unable to get the correct answer and went to research about the phenomena which works behind it .

Hoisting

I will start explain it with example first approach

var x=55;
console.log(x);
//55

We all knew the output will be 55. Now go towards understanding Hoisting

console.log(x);
var x=4;
//undefined

Now we are console logging the x prior to its initialization(without specifying any value to it) and prior to declaration (without declaring it with var keyword) too. In this case JS will hoist it and will allocate it value undefined(a special value and keyword in JS).This can't be done with the let and const binding types otherwise -

console.log(x);
let x=5;
//ReferenceError: can't access lexical declaration`X' before initialization

You can watch this video on hoisting for better understanding-Hoisting

var

We have to understand the var so var is - Hoisted ,can be redeclared , can be re-assigned , and have only functional scope.

var x=5;
function functionScope(){
var x=4;
}
functionScope();
console.log(x);
//5

let

We have to understand the let so let is - hoisted but in TDZ so can't be accessed ,can't be redeclared , can be re-assigned , and have block scope(block scope is super set of functional scope) .

let x=5;
{
let x=4;
}
console.log(x);
//5

const

We have to understand the const so const is - hoisted but in TDZ so can't be accessed ,can't be redeclared , can't be re-assigned , and have block scope .

const x=5;
{
const x=4;
}
console.log(x);
//5

Scope

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. So whenever our program is looking for a Binding(let , const , var ) then it will first check the local scope and after that it will go for its Parent's scope and so on until the Global Scope. For better understanding I am gonna use the scoping diagram -

scoping diagram.png So, as in sets It will have a scope chain from the smallest set (where the binding is) to its super-set and so on till the super-most-set i.e. Global.

I want to discuss really interesting phenomena which rises because of scoping explain it with the examples

var x=5;
function explain(){
console.log(x);
var x=4;
explain();
console.log(x);
//undefined
//5

You must be thinking why undefined . So its an amazing concept of scoping and hoisting works together where if we redeclare any binding within its scope it starts behave in whole separate code and it will find that binding in its scope( functional or block in var,let , const cases) and if binding is redeclared then binding will exist as new binding for that specific block and behave accordingly.

let x=5;
{
console.log(x);
let x=4
}
console.log(x);//5
//ReferenceError: can't access lexical declaration`X' before initialization
let x=5;
console.log(x);
{
x=88;
console.log(x)
}
console.log(x);
//5
//88
//5