"Exploring 'var', 'let', and 'const': Essential Differences in JavaScript Variable Declarations"
( Note:Words that are italic are keywords from programming or javascript. Words that are bold indicate a reference to a code example. If a word is both bold and italic, it signifies a keyword that is also referenced in a code example. )
->Scope
->Hoisting
->Redeclaration
1) Scope
var: is function-scoped
Since var is function-scoped, it can be utilized anywhere within the function scope, even if it's declared in a different block.
console.log(bob) is outside the functional scope of var bob so its showing error of not defined.
A new functional scope is created only when function is created and a new block scope is created when if else {} is created.
let: is a block-scoped
Since let is a block-scoped cat cannot be used outside the block of if else.
Why?
Because javascript made let and const as block-scoped declarations by default. This is a feature of block scoping, which provides more control over the visibility of variables, helping to prevent bugs and conflicts.
const:Is a block-scoped ( Explanation is same as let )
Hoisting
Var
line 1 shows undefined because var bob is hoisted during memory creation phase with a undefined value.
So bob will be initialized during execution phase with 10.
Since console.log(bob) will be executed before var bob is initialzed, the output will be undefined.
Line 3 output will be 10 because console.log(bob) will be executed after var bob initialized with 10.
let
When the memory phase begins, the declaration of let bob is hoisted, but it's assigned an undefined value.
Any attempt to access bob before its declaration (line 1) triggers a ReferenceError, placing it in a state known as the Temporal Dead Zone.
The Temporal Dead Zone is the period between the hoisting of a variable declared with let or const and its initialization.
If you attempt to access bob after its declaration but before it's initialized (line 2), you'll receive an undefined value.
Once bob is initialized (line 4) any call after that you will get output as 10 ( line 5 ).
const
In the memory allocation phase, const variables are assigned a value of undefined.
Line 1 attempts to execute bob before it's declared. Even though the error occurs on line 2, it's because bob isn't initialized during the memory creation phase.
This implies that when you use the const keyword, you must initialize it on the same line, otherwise, you'll encounter an error before reaching the execution phase.
Line 3 tries to execute cat before it's been declared, resulting in an error because you're attempting to execute within the temporal dead zone.
Redeclaration
Var: You can redeclare the var variables and you wont get error.
let
You cannot redeclare variables declared with let or const in the same scope. Attempting to do so will result in a syntax error.
This is because during the memory allocation phase, the variable, say bob, is assigned an undefined value. If another variable named bob with the let keyword is found, it triggers an error, and the execution phase doesn't begin. -This rule applies for let and const.
However, you can reassign variables declared with let. This is possible because you can declare a let variable on one line and initialize it on another line. On the other hand, const variables cannot be reassigned once they've been declared