Introduction to var let const in js
If you want to understand modern JavaScript, you must clearly learn var, let const in JS and when to use them. These three keywords define variables, but each behaves differently based on scope, hoisting, and reassignment rules. In this guide, you’ll learn everything with simple examples so you can write clean, bug-free JavaScript.
What is var in JavaScript?
var is the oldest way to declare variables in JavaScript.
It comes with two major characteristics:
1. Function Scope
A var variable is accessible inside the entire function where it is declared.
2. Hoisting
JavaScript moves var declarations to the top of the scope, which can cause unexpected behavior.
Example:
console.log(a); // undefined
var a = 10;
When to Use var
- Rarely recommended in modern JavaScript
- Only use when working with older browsers or legacy code
What is let in JavaScript?
let was introduced in ES6 to fix the issues caused by var.
1. Block Scope
let works inside { } blocks, making your code safer.
2. No Hoisting Problems
Technically it is hoisted, but not initialized—this prevents accidental usage.
Example:
let x = 5;
x = 10; // allowed
When to Use let
- When you need a variable that changes value
-
When working inside loops or conditional blocks
What is const in JavaScript?
const also uses block scope but has stricter rules.
1. Cannot Be Reassigned
Once assigned, the value cannot be changed.
2. Useful for Constants and Objects
Even though reassignment is not allowed, object properties can change.
Example:
const user = { name: "Ram" };
user.name = "Shyam"; // allowed
When to Use const
- Default choice for most variables
- Perfect for arrays, objects, functions, and fixed values
Key Differences: var, let and const in JS
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function | Block | Block |
| Reassign | Yes | Yes | No |
| Hoisting | Yes (initialized as undefined) | Yes (not initialized) | Yes (not initialized) |
| Recommended? | No | Yes | Yes (mostly) |
When Should You Use Each?
Here’s the simplest rule to remember for var let const in JS:
- Use
constby default - Use
letonly when you must reassign -
Avoid
varunless supporting old code
Example:
const baseURL = "https://example.com"; // constant
let count = 0; // will change
Common Mistakes Developers Make
1. Using var inside loops
This can cause unexpected results due to function scoping.
2. Trying to reassign const values
const pi = 3.14;
pi = 3.1415; // ❌ error
3. Not understanding block scope
Using let inside { } means it exists only there.
Best Practices for Modern JavaScript
- ✔ Use
constwhenever possible - ✔ Use
letwhen the value needs to change - ✔ Avoid
varcompletely - ✔ Write clean and readable code
- ✔ Always consider scope and hoisting
External Resource (DoFollow):
-
Learn more on MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Conclusion
Now you fully understand var let const in JS and how each one works. var is outdated, let is flexible, and const is the modern default choice. Knowing when to use each will make your JavaScript programs safer, cleaner, and easier to maintain.
FAQ – var let const in JS
1. What is the main difference between var, let and const in JS?
The main difference is in their scope and reassignment rules.
varis function-scopedletandconstare block-scoped-
letcan be reassigned, whileconstcannot
Understanding these differences is essential when learning var let const in JS.
2. Which one should I use most often: var, let, or const?
Use const by default, use let only when a value must change, and avoid var in modern JavaScript. This is the best practice recommended for writing clean code.
3. Why is var considered outdated in JavaScript?
var is outdated because it has function scope and hoisting issues, which often lead to bugs. The introduction of let and const in ES6 solved these problems.
4. Can I change the value of a const variable in JavaScript?
You cannot reassign a const variable, but if it holds an object or array, you can still modify its internal values.
5. Is let hoisted in JavaScript?
Yes, both let and const are hoisted, but they are not initialized. Accessing them before declaration results in a ReferenceError.
6. Which is better for loops: var or let?
Always use let for loops to avoid unexpected behavior. var leaks out of the block and can cause incorrect values in loops.
7. Why is const recommended over let?
const helps prevent accidental reassignment, making your code safer and easier to understand. It encourages immutability and reduces bugs.
8. Are var, let, and const available in all browsers?
Modern browsers fully support let and const. Only older browsers may require polyfills or transpilation.
9. Does using let and const improve performance?
They do not significantly affect performance, but they improve code reliability, which leads to fewer bugs and cleaner JavaScript structure.
