What is the difference between let, const, and var in JavaScript?

JavaScript, as a versatile and dynamic programming language, provides multiple ways to declare variables, including let, const, and var. These three keywords serve similar purposes, but they exhibit crucial differences in terms of scope, reassignment, and hoisting. In this comprehensive guide, we will explore the distinctions between let, const, and var in JavaScript, helping you make informed choices in your coding journey.

Declaring Variables

Using var

var was the original method for declaring variables in JavaScript. Variables declared with var have function scope, meaning they are accessible within the function in which they are defined or become global if declared outside a function.

function exampleFunction() {
    var localVar = "I am a local variable";
}
console.log(localVar); // Throws an error; localVar is not defined.

Using let

Introduced in ECMAScript 6 (ES6), let offers a more controlled approach to variable declaration. Variables declared with let have block scope, which confines them to the block (enclosed by curly braces) where they are defined.

if (true) {
    let blockVar = "I am a block-scoped variable";
}
console.log(blockVar); // Throws an error; blockVar is not defined.

Using const

Similar to let, const was also introduced in ES6. It is used to declare variables whose values should not be reassigned after initialisation. Like let, const variables also have block scope.

const pi = 3.14;

Reassignment

One of the primary differences between these keywords lies in their reassignment capabilities:

• Variables declared with var can be redeclared and reassigned.
• Variables declared with let can be reassigned, but not redeclared within the same scope.
• Variables declared with const cannot be reassigned or redeclared within the same scope.

Reassigning var Variables

var x = 10;
x = 20; // Valid, reassigning the value
var x = 30; // Valid, redeclaration

Reassigning let Variables

let y = 10;
y = 20; // Valid, reassigning the value
let y = 30; // Throws an error; cannot be redeclared in the same scope

Reassigning const Variables

const z = 10;
z = 20; // Throws an error; cannot be reassigned
const z = 30; // Throws an error; cannot be redeclared in the same scope

Hoisting

JavaScript has a concept called hoisting, which means that variable declarations are moved to the top of their containing function or block during the compilation phase. However, the initial values are not hoisted.

• Variables declared with var are hoisted and initialized with undefined.
• Variables declared with let or const are also hoisted but remain uninitialized until their declaration.

Hoisting with var

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

Hoisting with let

console.log(age); // Throws an error; age is not defined yet
let age = 25;

Hoisting with const

console.log(pi); // Throws an error; pi is not defined yet
const pi = 3.14;

Which Should You Use?

Choosing between let, const, and var depends on your specific requirements:

• Use let when you need to reassign variables within the same scope.
• Use const for values that should not change after initialisation.
• Avoid using var unless you have a specific reason, as it can lead to unexpected behaviour due to hoisting and lack of block scope.

Conclusion

Understanding the differences between let, const, and var is essential for writing clean and error-free JavaScript code. Each keyword has its own scope, reassignment rules, and hoisting behaviour, making them suitable for different use cases. By choosing the right variable declaration method, you can enhance the readability, maintainability, and reliability of your JavaScript code.