What is the difference between let, const, and var in JavaScript?
Davide S
davide s profile pic

In JavaScript,let,const, andvar are used to declare variables, but they have different scoping rules and behaviors. Here's a detailed explanation of the differences betweenlet,const, andvar: 1. var: -var is the oldest way to declare variables in JavaScript. - Variables declared withvar are function-scoped or globally scoped, meaning they are accessible within the function or the global scope. -var variables are hoisted to the top of their scope, which means you can access and assign a value to them before they are declared. -var variables can be reassigned and updated within their scope. - If avar variable is declared multiple times within the same scope, it will not raise an error, and the last declaration will override the previous ones. - Here's an example:

1
2
3
4
5
6
7
8
9
10

     function example() {
       var x = 10;
       if (true) {
         var x = 20; // Same variable as the one above, not block-scoped
         console.log(x); // Output: 20
       }
       console.log(x); // Output: 20
     }
     

2. let: -let was introduced in ECMAScript 6 (ES6) as a replacement forvar in many cases. - Variables declared withlet are block-scoped, meaning they are limited to the block (between curly braces) where they are defined. -let variables are not hoisted to the top of their scope. They are only accessible after they are declared. -let variables can be reassigned but not redeclared within the same scope. - Here's an example:

1
2
3
4
5
6
7
8
9
10

     function example() {
       let x = 10;
       if (true) {
         let x = 20; // Different variable than the one above, block-scoped
         console.log(x); // Output: 20
       }
       console.log(x); // Output: 10
     }
     

3. const: -const is also introduced in ES6 and stands for "constant." - Variables declared withconst are block-scoped and cannot be reassigned once they are assigned a value. -const variables must be assigned a value at the time of declaration. They cannot be left uninitialized. -const does not make the variable's value immutable. It only prevents reassignment of the variable itself. - When declaring an object or an array withconst, you can still modify the object's properties or the array's elements. - Here's an example:

1
2
3
4
5
6
7
8
9
10

     function example() {
       const x = 10;
       if (true) {
         const x = 20; // Different variable than the one above, block-scoped
         console.log(x); // Output: 20
       }
       console.log(x); // Output: 10
     }
     

- When usingconst with objects or arrays:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

     const person = { name: 'John', age: 30 };
     person.name = 'Jane'; // Valid, modifying the object's property
     person.age = 31; // Valid, modifying the object's property

     const array = [1, 2, 3];
     array.push(4); // Valid, modifying the array

     // However, you cannot reassign the entire object or array:
     person = { name: 'Jim', age: 25 }; // Error
     array = [4, 5, 

6]; // Error
     

In summary,let andconst are block-scoped variables introduced in ES6, whilevar is function-scoped.let allows reassignment within its scope and does not hoist variables to the top, whereasconst does not allow reassignment and requires initialization. It's generally recommended to useconst when the value of a variable should not change and uselet when you need to reassign a variable.var should be used sparingly, as it has some quirks and can lead to unpredictable behavior.