Understanding the Difference Between let
, var
, and const
in JavaScript
In JavaScript, you can declare variables using let
, var
, and const
. These keywords may seem similar, but they have key differences that can significantly impact how your code behaves. In this article, we'll explain the differences between them and help you understand when to use each one.
Key Differences Between var
, let
, and const
var |
let |
const |
---|---|---|
Introduced in: Has been available since the beginning of JavaScript. | Introduced in: Added in ES6 (ECMAScript 2015). | Introduced in: Added in ES6 (ECMAScript 2015). |
Scope: Function-scoped. A var variable is accessible throughout the function where it’s declared. |
Scope: Block-scoped. A let variable is only accessible within the block {} where it’s declared. |
Scope: Block-scoped, just like let . |
Hoisting Behavior: var variables are hoisted and can be used before they are declared (though they will be undefined ). |
Hoisting Behavior: let variables are hoisted but not initialized, so you cannot use them before the declaration. |
Hoisting Behavior: Similar to let , const variables are hoisted but not initialized, so they must be declared before use. |
Re-declaration: You can re-declare a var variable in the same scope without any errors. |
Re-declaration: You cannot re-declare a let variable in the same scope. |
Re-declaration: You cannot re-declare a const variable, similar to let . |
Reassignment: Variables declared with var can be reassigned. |
Reassignment: Variables declared with let can also be reassigned. |
Reassignment: Variables declared with const cannot be reassigned; they are constant. |
Example to Illustrate the Difference
Here's an example that shows how var
, let
, and const
behave differently:
function userDetails(username) {
if (username) {
console.log(salary); // Output: undefined (due to hoisting)
console.log(age); // Error: ReferenceError: Cannot access 'age' before initialization
console.log(country); // Error: ReferenceError: Cannot access 'country' before initialization
let age = 30;
var salary = 10000;
const country = "USA";
// Trying to reassign const
// country = "Canada"; // Error: Assignment to constant variable.
}
console.log(salary); // Output: 10000 (accessible due to function scope)
console.log(age); // Error: age is not defined (due to block scope)
console.log(country); // Error: country is not defined (due to block scope)
}
userDetails("John");
Explanation of the Example:
Hoisting with
var
: Thesalary
variable declared withvar
is hoisted to the top of the function. This is why you can access it before its declaration, although its value isundefined
until the assignment happens.Hoisting with
let
andconst
: Bothage
andcountry
variables are also hoisted, but unlikevar
, they are not initialized. This means you cannot access them before their declaration, resulting in aReferenceError
.Block Scope: After the
if
block,salary
is still accessible due tovar
having function scope. However, bothage
(declared withlet
) andcountry
(declared withconst
) are block-scoped, so they cannot be accessed outside the block.Reassignment with
const
: Variables declared withconst
cannot be reassigned. In the example, trying to change the value ofcountry
would result in an error.
When to Use let
, var
, and const
Use
let
when you need a variable that can be reassigned but should only be accessible within a specific block of code. This is useful for loop counters, conditionals, or any variable that will be modified but doesn’t need to exist outside its block.Use
var
in situations where you need a variable that should be accessible throughout a function, though this is less common in modern JavaScript due to the introduction oflet
andconst
.Use
const
when you want to declare a variable that should never be reassigned. This is ideal for constants, such as configuration values or fixed data, that should remain the same throughout your code.
Conclusion
Understanding the differences between var
, let
, and const
is essential for writing modern, efficient JavaScript. let
and const
are generally preferred over var
in modern code, with const
being the go-to choice for variables that should not be reassigned. By choosing the right keyword, you can write clearer, more reliable code that is less prone to bugs.
By using const
for values that shouldn't change, let
for variables that may change within a block, and avoiding var
in most cases, your JavaScript code will be safer and easier to manage.
Top comments (2)
Nice quick and straightforward explanation.
thanks 🙏