Introduction: Why let, const, and var Matter for Every JavaScript Developer
JavaScript is a core skill for any front-end developer—and a essential language for aspiring full-stack engineers.
In this article, we’ll walk through the three ways to declare variables in JavaScript: let, const, and var.
You’ll learn the key differences, characteristics, and proper use cases of each—essential knowledge for building a solid foundation in programming.
Based on my experience working across various development teams, I’ve met many engineers who use let simply because it feels modern, but can’t explain how it differs from var.
If you find yourself in a similar situation, this is the perfect opportunity to finally master the distinctions and use them with confidence!
Quick Summary: Which One Should You Use?
First, here’s a list of how to use it.
| Declaration Type | Description |
|---|---|
| let | Used to declare a variable. |
| const | Used to declare a constant. |
| var | Should not be used unless there is a specific reason. |
Have you ever read a technical article that seemed endless—filled with text, but never really getting to the point?
To save you time, this guide provides a clear, concise summary in the table above.
If you want a deeper understanding, continue reading the following sections.
Each concept is explained in detail, with code examples to illustrate how they work.
Skimming through?
No problem!
Just grab the key parts that matter to you.
(Though, deep down, I really hope you’ll read everything…)
Understanding var: The Legacy Declaration
As mentioned in the table above, avoid using it unless there is a compelling reason.
In earlier days, there were no let or const declarations—only var existed.
As a result, in many legacy codebases, every variable is declared using var.
Some may argue, “If coding solely with var worked fine in the past, why not stick with it?”
However, using var introduces two significant issues.
Scope
Variables declared with var are function-scoped.
In simpler terms, Among the various block types in JavaScript, if you declare a variable with var inside any block that is not a function block (for example, an if-block or a loop), that variable isn’t confined to that block—it remains accessible from outside of it.
(Block = curly braces { })
Please see the code below.
< Example 1 >
Accessing a variable declared with var inside a function block from outside the block.
→ Error
function helloWorld() {
var inBlockString = 'Hello World！';
}
// Accessing variables from outside a block
console.log(inBlockString);
// Output: Uncaught ReferenceError: inBlockString is not defined at <anonymous>:6:13< Example 2 >
Accessing a variable declared with var inside a non-function block from outside the block.
→ Accessible
if (true) {
var inBlockString = 'A variable was declared inside a non-function block!';
}
// Accessing variables from outside a block
console.log(inBlockString);
// Output: A variable was declared inside a non-function block!Typically, variables declared within a block are intended to be used only within that block.
having them accessible outside can lead to unintended behaviors.
Redeclaration
In the case of var, it is possible to declare a variable with the same name as one that has already been declared.
In this scenario, the previously declared variable gets overwritten.
As a result, one might accidentally redeclare a variable without realizing it already exists, leading to unexpected values.
This risk is especially significant when multiple developers are modifying the same source file, as each might declare a variable using the same name for different purposes.
If redeclaration is prohibited and triggers an error, such issues will be prevented during the coding process.
Other Considerations
when declaring variables with var, they are added to the global object and are hoisted, among other differences.
However, if you understand the issues related to scope and redeclaration discussed above, you’ll be fine!
Understanding let: The Modern Default
let is used to declare variables.
let is a way to declare variables introduced in ES6 (also known as ES2015).
ES6 refers to the 6th edition of ECMAScript, the standard for JavaScript.
As of today, versions range from ES1 to ES15 (also known as ES2024).
This declaration method was introduced to address the shortcomings of var discussed earlier.
Accordingly, there are two main differences between let and var.
Scope
let is block-scoped.
In simpler terms, when you declare a variable with let inside a block, it cannot be accessed from outside that block!
Take a look at the following example.
< Example 1 >
Accessing a variable declared with let inside a function block from outside the block.
→ Error
function helloWorld() {
let inBlockString = 'Hello World！';
}
// Accessing variables from outside a block
console.log(inBlockString);
// Output: Uncaught ReferenceError: inBlockString is not defined at <anonymous>:6:13< Example 2 >
Accessing a variable declared with let inside a non-function block from outside the block.
→ Error
if (true) {
let inBlockString = 'A variable was declared inside a non-function block!';
}
// Accessing variables from outside a block
console.log(inBlockString);
// Output: Uncaught ReferenceError: inBlockString is not defined at <anonymous>:6:13Unlike with var, attempting to access a let variable from outside a block—even if it’s not a function block—results in an error.
This behavior helps prevent unintended side effects!
Redeclaration
With let, you cannot redeclare a variable using the same name.
This helps prevent accidentally declaring a variable that already exists.
< Example 1 >
Adding code using var without realizing that the variable name hero is already present in the existing code.
// Developer A's existing code
var hero = 'Batman';
// (some operations)
// Developer B adds the code and unknowingly reuses the same variable name.
var hero = 'Spider-Man';
// (some operations)
// Developer A's existing code
console.log(`The Batmobile is ready. ${hero}, your vehicle awaits.`);
// Output: The Batmobile is ready. Spider-Man, your vehicle awaits.
// Intended: The Batmobile is ready. Batman, your vehicle awaits.
// Since var allows redeclaration without errors, the issue isn't noticed until the program behaves unexpectedly during actual operation.< Example 2 >
Adding code using let without realizing that the variable name hero is already present in the existing code.
// Developer A's existing code
var hero = 'Batman';
// (some operations)
// Developer B adds the code and unknowingly reuses the same variable name.
var hero = 'Spider-Man';
// Uncaught SyntaxError: Identifier 'hero' has already been declared
// The error reveals to Developer B that the variable `hero` was already declared.
// (some operations)
// Developer A's existing code
console.log(`The Batmobile is ready. ${hero}, your vehicle awaits.`);Using let prevents accidental redeclarations by throwing an error if a variable name is reused!
Understanding const: For Immutable Bindings
Used to declare constants.
Like let, const was introduced in ES6 (also known as ES2015).
It also follows block scope, which means variables declared with const are inaccessible from outside the block.
Reassignment Not Allowed
Just like let, const does not allow redeclaration.
In addition, reassignment is not allowed.
< Example 1 > Redeclaration
// Just like let, redeclaring a const variable results in an error.
// Error message: Uncaught SyntaxError: Identifier 'BIRTH_YEAR' has already been declared
const BIRTH_YEAR = 1999;
const BIRTH_YEAR = 2000;< Example 2 > Reassignment
// In contrast to let, const also prevents reassignment.
// Error message: Uncaught TypeError: Assignment to constant variable. at <anonymous>:2:12
const BIRTH_YEAR = 1999;
BIRTH_YEAR = 1234;As shown above, the error messages differ between redeclaration and reassignment.
Final Thoughts: Build Strong Foundations and Go Far
How was it?
By making it this far, you’ve gained the ability to explain the differences between var, let, and const—and that’s no small feat!
Strong fundamentals are essential for anyone aspiring to become a top-tier engineer.
Sure, you can cobble together code that “just works” without solid foundations.
But doing so often leads to poor maintainability, costly errors, and unnecessary effort when adding new features or making updates later on.
These days, many developers rely on tools like Copilot to assist with coding.
But even with AI support, it takes a solid understanding of the basics to judge whether the generated code is truly correct and reliable.
I truly hope that everyone who made it to the end of this article will become an engineer with strong fundamentals—someone capable of creating real value and being richly rewarded for it.
You’ve already taken a big step forward!