Feature/Behavior Comparison: var, let, and const

Feature/Behavior	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Re-declaration	Allowed	Not allowed	Not allowed
Re-assignment	Allowed	Allowed	Not allowed
Hoisting	Yes, initialized to undefined	Yes, but not initialized	Yes, but not initialized
Temporal Dead Zone (TDZ)	No	Yes	Yes
Global Object Property	Yes	No	No
Block-level Declaration	No	Yes	Yes
Constant Nature	No	No	Yes
Example	var a = 10; var a = 20; (No error)	let a = 10; let a = 20; (Error)	const a = 10; a = 20; (Error)
Loop Behavior	Shares same variable across iterations	New variable for each iteration	Not applicable
Usage Recommendation	Avoid	Use for variables that will change value	Use for constant values

Detailed Explanation of Each Feature/Behavior

1. Scope

Definition: Scope refers to where a variable is accessible within the code.

function testScope() {
if (true) {
var x = 10;
let y = 20;
const z = 30;
}
console.log(x); // 10 (accessible outside the block)
console.log(y); // Error: y is not defined (block-scoped)
console.log(z); // Error: z is not defined (block-scoped)
}
testScope();

2. Re-declaration

Definition: Re-declaration refers to declaring the same variable multiple times in the same scope.

var a = 1;
var a = 2; // No error with var

let b = 1;
// let b = 2; // Error: b has already been declared

const c = 1;
// const c = 2; // Error: c has already been declared

3. Re-assignment

Definition: Re-assignment refers to changing the value of a variable after it has been initialized.

var x = 10;
x = 20; // Allowed

let y = 30;
y = 40; // Allowed

const z = 50;
// z = 60; // Error: Assignment to constant variable

4. Hoisting

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

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

// console.log(b); // Error: Cannot access 'b' before initialization
let b = 20;

// console.log(c); // Error: Cannot access 'c' before initialization
const c = 30;

5. Temporal Dead Zone (TDZ)

Definition: The TDZ is the time between entering a block and the declaration of a variable, during which the variable cannot be accessed.

// console.log(x); // Error: Cannot access 'x' before initialization (TDZ)
let x = 10;

// console.log(y); // Error: Cannot access 'y' before initialization (TDZ)
const y = 20;

var z = 30; // No TDZ for var

6. Global Object Property

Definition: When variables are declared globally using var, they become properties of the window object in browsers (or global in Node.js). let and const do not create properties on the global object.

var a = 10;
let b = 20;
const c = 30;

console.log(window.a); // 10 (a is a property of the global object)
console.log(window.b); // undefined (b is not a property of the global object)
console.log(window.c); // undefined (c is not a property of the global object)

7. Block-level Declaration

Definition: let and const are confined to the block {} in which they are declared, while var ignores block-level scope and is accessible outside the block.

if (true) {
var x = 10;
let y = 20;
const z = 30;
}
console.log(x); // 10 (var is accessible outside the block)
console.log(typeof y); // undefined (let is block-scoped)
console.log(typeof z); // undefined (const is block-scoped)

8. Constant Nature

Definition: const cannot be reassigned after the initial assignment. However, if a const variable is an object or array, its properties or elements can still be modified.

const person = { name: 'John' };
person.name = 'Jane'; // Allowed

const numbers = [1, 2, 3];
numbers.push(4); // Allowed

// person = { name: 'Bob' }; // Error: Assignment to constant variable

9. Loop Behavior

Definition: In loops, var creates one variable for all iterations, while let creates a new variable for each iteration. const is not suitable for loops if you need to reassign variables.

for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // Outputs 3, 3, 3
}

for (let j = 0; j < 3; j++) {
setTimeout(() => console.log(j), 100); // Outputs 0, 1, 2
}

10. Usage Recommendation

Definition: let and const should be preferred over var in modern JavaScript development. Use let when the variable’s value will change, and use const when you need to ensure that a variable’s value won’t change.

let counter = 0;
counter++; // Use let when the value will change

const name = 'Alice'; // Use const when the value will not change