Skip to main content

Command Palette

Search for a command to run...

Scopes and Hoisting in JavaScript

Updated
3 min read
Scopes and Hoisting in JavaScript
B

BSc CSIT Graduate

Hoisting is a behavior of JavaScript that moves the declaration of variable and function to the top of their respective scope.

As we know, let and const are block-scoped and variable is function-scoped. Let's talk about scope let, var, and const

  1. Let : let gives block scope. Variable declared with let have block scope, meaning they are only accessible within the block in which they are declared. let prevents redeclaration within the same scope, reducting errors.

  2. var : var is function-scoped, meaning a variable declared with var is accessible within the function it is declared in , or globally if declared outside any function. When declared outside any function, a var variable becomes a global variable.

  3. const : Like let, const is block scoped. It does not allow ressaiging. While const prevents reassigning a value to a variable, it does not prevent modifying the contents of objects or arrrays. This is because const is applied to the binding( the reference) of the variable not the data stored in the object and array.

Hoisting

We talked in the previous blog that all code is scanned, and every variable and function is loaded into memory during the memory phase.

var declarations are hoisted to the top of their scope with values undefined. This means you can reference the variable before its declaration, but it will return undefined until it is assigned a value.

console.log(x)//undefined
var x = 20
console.log(x)//20

NOTE: Only the declaration is hoisted, not the initialization.

let and const are loaded to the memory phase, but they remain uninitialized and stay in the Temporal Dead Zone (TDZ) until their declaration is executed.

Temporal Dead Zone:
It is the period between when a variable is hoisted and when it is declared. During this time accessing the variable results reference error.

  • This only occrus with the let and const.

  • Starts at the befinning of the block and ends when the variable is initialized.

  • Prevents the use of variable before declaration, avoiding unintended behavior.

let and const variable are hoisted but stay in the TDZ until the declaration is reached.

console.log(x)// throws reference errror(TDZ)
consoel.log(y) // says variable is not declared
let x// TDZ ends here

console.log(x)// throws undefined

x = 5 

console.log(x) // print 5

So if someone ask you if let and const are hoisted in JavaScript?
Say :
Yes they are hoisted , but unlike var they remains in the TDZ until their declaration. This means you can not access them before the declaration or you will get a reference error.

In case of functions, tfunctions are fully hoisted. Maybe clarify:

  • function foo() {} → fully hoisted (callable before definition)

  • var foo = function() {} → behaves like var, only the variable is hoisted, not the function body.