var_let_constv2.md

VAR vs LET vs CONST

VAR

In Javascript, when you declare variable using var keyword

• The variable declared using var keyword outside the function are global scope.
• The variable declared using var keyword within the function are function scope
• The variable declared using var keyword will get hoisted

console.log(instagramId) // undefined
var instagramId = "devkode.io😀"; // global scope

function getName(){
    console.log(instagramName); // undefined
    var instagramName = "devkode😎" // function scope
    console.log(instagramName) // devkode😎
    console.log(instagramId) // devkode.io😀
}

console.log(instagramId) //devkode.io😀
console.log(instagramName) // ReferenceError

ReDeclared / Reassigned

The variable declared using var keyword can be redeclared and reassign

var foo = "😎😎😎";
console.log(foo); // 😎😎😎
var foo = "🤩🤩🤩"
console.log(foo); // 🤩🤩🤩
foo = "😃😃😃";
console.log(foo); // 😃😃😃

What is hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

console.log(name); //undefined
var name="devkode"

The reason for the undefined output is that javascript engine will hoists function declarations and variable declarations to the top of the current scope.

So, the above code will be written as

var name = undefined;
console.log(name); //undefined
var name="devkode";

Let and Const

• The variable declared using let and const keyword are block scope
• The variable declared using let can be reinitialized but can't redeclare.
• The variable declared using const can't be reinitialized and redeclare

{
    var instagramName = "devkode😎";
    let instagramId = "devkode.io"
    const language = "JavaScript"
}

console.log(instagramName); // devkode😎
console.log(instagramId); //  ReferenceError
console.log(language); // ReferenceError

Redeclare and reassign

let bar = "😎😎😎";
console.log(bar); // 😎😎😎
bar = "😃😃😃";
console.log(bar); // 😃😃😃
let bar = "🤩🤩🤩"
console.log(bar); // SyntaxError, Identifier 'bar' has already been declared

const bar = "😎😎😎";
console.log(bar); // 😎😎😎
bar = "😃😃😃";
console.log(bar); // TypeError: Assignment to constant variable
const bar = "🤩🤩🤩"
console.log(bar); // SyntaxError, Identifier 'bar' has already been declared

/********************************* Explained about TDZ (Optional, we can remove) **************************/ Although let variables are hoisted, you will still get a ReferenceError, because until you initialize a let variable, it stays uninitialized and goes into a temporal dead zone, where these variables can’t be accessed.

lets run some sample code:

console.log(name); // ReferenceError
let name="devkode";

Accessing the let and const variable before the initialization results in a ReferenceError. The name variable is in a temporal dead zone (TDZ) from the start of the block until the initialization is processed.

/********************************* Explained about TDZ **************************/

	var	let	const
Scope	global or function	block	block
redeclare?	yes	no	no
reassign?	yes	yes	no
hoisted?	yes	no	no