2. All About Variables- JS

1. Variable Scopes

   → Scope is the area where function or a variable found.

   → JS have three main type of scopes - global , function and block scope

   → Global Scope - A variable declared outside any function or block has global scope. It can be accessed from anywhere in the script.

   → Function Scope - A variable declared with var inside a function is not accessible outside the function.

   → Block Scope - The variable is only accessible inside the {} block where it is declared.

2. Hoisting

   Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope before code execution.

   → var hoisting : Variables declared with var are hoisted but initialized as undefined.

   → const and let : let and const are hoisted but not initialized, resulting in a ReferenceError if accessed before declaration.

   → Function declarations are fully hoisted, meaning they can be called before their defination.

3. var , let , const

Example of var -:

console.log(x);  // Output: undefined (hoisting)
var x = 10;
console.log(x);  // Output: 10
var x ;   // (redeclare )
var x = 5;   // (reassign)

if (true) {
    var y = 20;  // `y` is accessible outside this block (fucnction scope)
}
console.log(y);  // Output: 20 (not block-scoped)

Example of let :

console.log(a);  // ReferenceError: Cannot access 'a' before initialization (Temporal Dead Zone Present)
let a = 10;
console.log(a);  // Output: 10
let a ; // (Not redecalre)
let a = 5; // (reassign)

if (true) {
    let b = 20;
    console.log(b);  // Output: 20 (accessible inside block) (block scoped)
}
console.log(b);  // ReferenceError: b is not defined

Example of const :

const PI = 3.14;
console.log(PI);  // Output: 3.14

PI = 3.1416;  // TypeError: not reassing this

const person = { name: "John" };
person.name = "Doe";  // Allowed (modifying properties is allowed)
console.log(person.name);  // Output: Doe

person = { age: 25 };  // TypeError: Assignment to constant variable

Interview Questions :

Question 1 : What happens if you use var inside a block {}?

Answer: Since var is function-scoped, it is still accessible outside the block.

Question 2: What id Temporal Dead Zone in JS ?

Answer : Area where we can not access the variables that are defined with let & const.

console.log(a); // This area is Temporal Dead Zone ; Output: Refrence error
let a = 10;
console.log(a);

Question 3: What will be the output of following code ?

function real(){
console.log("I am real 1")
}

// real () -> if we call fucntion here then output will remain same

function real(){
console.log("I am real 2")
}

function real(){
console.log("I am real 3")
}

real()

Answer: I am real 3

Question 4: What will be the output of following code ?

var a =10;
console.log(a); // 10

function fn(){
console.log(a); // undefined ; if we write a=20 below(not use var) then here the output is 10
var a = 20;
a++;
console.log(a); //21 

if(a){
var a =30;
a++;
console.log(a); // 31
}
console.log(a); // 31 ; we reassign the value in function
}

fn();
console.log(a); // 10 ; var keyword is fucntion scope

Next Topic :

3. Data Types and Object in JS