Var In JS: Avoid This Trap
- 01. What var does
- 02. Why var is risky
- 03. How hoisting works
- 04. Simple example
- 05. What changed in 2015
- 06. When var still appears
- 07. Behavior at a glance
- 08. How to remember it
- 09. Common mistakes
- 10. Security and code quality
- 11. Best practice today
- 12. What is var in JavaScript?
- 13. Is var still used today?
- 14. Why is var considered dangerous?
- 15. Should beginners use var?
var in JavaScript is the older keyword used to declare a variable, and it is known for three surprising behaviors: it is function-scoped, it is hoisted, and it can be redeclared without an error. Those traits made it common in legacy code, but they also make it easier to write bugs that are hard to spot.
What var does
The variable keyword tells JavaScript that you want to create a named value that can change later. For example, var age = 25; creates a variable called age and stores the number 25 in it. Historically, JavaScript variables were often created with var long before let and const became standard in modern code.
In practical terms, var still works in modern JavaScript, but it is usually avoided unless you are maintaining old code or intentionally need its function-level behavior. Most developers now prefer let for values that change and const for values that should stay fixed.
Why var is risky
The main problem with scope behavior is that var does not respect block boundaries the way many beginners expect. If you declare it inside an if statement, for loop, or other block, it is still available outside that block as long as it is inside the same function.
That can create confusing bugs because code appears to keep a variable local, but the variable actually leaks into a wider area. In security-aware or large-scale codebases, this kind of unexpected reach is one reason var is considered dangerous by many style guides and modern JavaScript teams.
How hoisting works
Hoisting means JavaScript moves declarations to the top of their scope before running the code. With var, the declaration is hoisted, but the assignment is not, so the variable exists early and starts as undefined.
That leads to a classic surprise: you can reference a var variable before the line where you wrote it, and instead of an error you may get undefined. This makes debugging harder because the program does not fail loudly when you expect it to.
Simple example
The difference becomes clearer with a small example of function scope and block scope side by side:
| Code | Behavior |
|---|---|
if (true) { var x = 10; } console.log(x); |
Prints 10, because var ignores block scope. |
if (true) { let y = 10; } console.log(y); |
Throws an error, because let stays inside the block. |
console.log(a); var a = 5; |
Prints undefined, because the declaration is hoisted. |
This table shows why var feels unintuitive to many new developers. The code looks ordinary, but the runtime behavior is often not what a beginner expects from a modern language.
What changed in 2015
In 2015, ES6 introduced let and const, which gave JavaScript developers clearer, block-scoped alternatives. That change was a major turning point because it reduced accidental leaks, improved readability, and made many common bugs easier to avoid.
Since then, many coding standards have recommended using const by default and let when reassignment is needed. var remains part of the language for backward compatibility, but modern guides usually treat it as a legacy feature rather than the first choice.
When var still appears
You will still see legacy code written with var, especially in older libraries, older tutorials, and applications that predate ES6. You may also see it in codebases that were started years ago and never fully modernized.
Some developers keep using it in rare cases where they want function scope specifically, but that is the exception, not the rule. In most day-to-day frontend and backend JavaScript work, let and const are the safer default.
Behavior at a glance
The following table compares the most important differences between var let const so you can choose the right keyword quickly.
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function-scoped | Block-scoped | Block-scoped |
| Hoisting | Yes, initialized as undefined |
Yes, but inaccessible before declaration | Yes, but inaccessible before declaration |
| Redeclaration | Allowed in same scope | Not allowed in same scope | Not allowed in same scope |
| Reassignment | Allowed | Allowed | Not allowed |
| Modern preference | No | Yes | Yes |
How to remember it
A useful way to think about block scope is that let and const stay inside the braces where they are declared, while var behaves as if the braces do not matter. That single difference explains most of the confusion people run into.
- Use
constwhen the variable should not be reassigned. - Use
letwhen the value must change later. - Avoid
varin new code unless you have a specific compatibility reason. - Watch for hoisting if you are reading old JavaScript code.
- Assume
varcan leak farther than you expect.
Common mistakes
One common mistake is assuming that a variable declared in a loop with var is separate for each iteration. It is not, which can cause every callback or asynchronous handler to see the same final value.
Another mistake is redeclaring the same name multiple times in one scope and expecting JavaScript to complain. With var, it often will not, which means a later declaration can silently replace an earlier one and make debugging much harder.
Security and code quality
Code quality improves when variables have clear boundaries and fewer surprises. That is one reason many teams moved away from var: it makes intent harder to read and accidental state sharing easier to introduce.
Although var itself is not a security bug, confusing scoping can contribute to unsafe logic, especially in large apps where many functions interact. Better variable discipline reduces mistakes and makes security reviews easier.
"Modern JavaScript favors clarity over convenience, and
varis a reminder of the older style."
Best practice today
If you are learning JavaScript now, treat modern code as the default and use let and const instead of var. That choice gives you clearer scope rules, fewer silent errors, and code that matches current professional standards.
If you read old code, knowing var is still essential because a lot of the web still depends on scripts written before ES6. Understanding its behavior helps you maintain those systems safely and avoids the most common beginner pitfalls.
What is var in JavaScript?
var is the original JavaScript keyword for declaring variables, and it creates function-scoped or global variables depending on where it is used.
Is var still used today?
Yes, but mainly in legacy code or edge cases; most modern JavaScript uses let and const instead.
Why is var considered dangerous?
It is considered dangerous because it is function-scoped, hoisted in a confusing way, and allowed to be redeclared silently in the same scope.
Should beginners use var?
Beginners should usually avoid var and start with const and let, which are easier to reason about and less error-prone.