Difference between let, const, and var in JavaScript

In JavaScript, let, const, and var are used to declare variables, but they have some key differences in terms of scope, hoisting, and mutability:

1. var (function-scoped, hoisted):

   • Function-scoped: Variables declared with var are scoped to the function in which they are declared. They are not limited to the block they are defined in.
   • Hoisted: Variables declared with var are hoisted to the top of their function scope or global scope. This means you can access the variable before it's declared in the code.
   • Can be re-declared and updated: You can declare the same variable multiple times using var within the same function or global scope, and you can also update its value.

   console.log(x); // undefined
   var x = 5;
   console.log(x); // 5
   

2. let (block-scoped, hoisted):

   • Block-scoped: Variables declared with let are scoped to the block (enclosed by curly braces {}) in which they are defined.
   • Hoisted (but not initialized): Variables declared with let are hoisted to the top of their block scope, but they are not initialized until the line of code where they are declared is executed.
   • Can be updated but not re-declared within the same block: You cannot re-declare a variable using let within the same block.

   {
   	console.log(x); // ReferenceError: Cannot access 'x' before initialization
   	let x = 5;
   	console.log(x); // 5
   }
   

3. const (block-scoped, not reassignable, hoisted):

   • Block-scoped: Variables declared with const are scoped to the block (enclosed by curly braces {}) in which they are defined.
   • Hoisted (but not initialized): Variables declared with const are hoisted to the top of their block scope, but they are not initialized until the line of code where they are declared is executed.
   • Cannot be reassigned after initialization: Once a const variable is assigned a value, it cannot be reassigned to a different value.
   • Properties of objects or elements of arrays assigned to const variables can be modified: While the variable itself cannot be reassigned, if it's an object or an array, its properties or elements can be modified.

   const PI = 3.14;
   // PI = 3.14159; // TypeError: Assignment to constant variable.
   
   const person = { name: 'John' };
   person.name = 'Jane'; // Valid, modifies the property of the object.
   console.log(person); // { name: 'Jane' }
   

In general, it is recommended to use const by default for variable declarations and only use let when you know the variable's value will change. Avoid using var unless working with older code or specific scenarios where its behavior is necessary. The use of const promotes immutability and can help catch unintended reassignments.

⭐Summary:

• var is function-scoped, hoisted, and can be re-declared and updated.
• let is block-scoped, hoisted (but not initialized), and can be updated but not re-declared within the same block.
• const is block-scoped, hoisted (but not initialized), and cannot be reassigned after initialization, though the properties of objects or elements of arrays assigned to const variables can be modified.