JavaScript is a flexible language, but that flexibility sometimes comes with sharp edges. One of the most common sources of confusion—and bugs—is variable scoping, especially when using var.
If you’ve ever wondered why this code works without any error:
if (true) {
var name = "This will cause a syntax error";
}
console.log(name);
Spoiler alert: It does not cause a syntax error.
Let’s break down why, how JavaScript scope really works, and why var is considered unsafe in modern JavaScript.
What Is Scope in JavaScript?
Scope determines where a variable can be accessed in your code.
JavaScript has three main types of scope:
Global Scope
Function Scope
Block Scope (introduced with ES6)
Understanding how variables behave in each scope is essential to writing predictable and bug-free code.
What Is Block Scope?
A block is any code wrapped inside curly braces {}.
Examples of blocks:
if (...) { }
for (...) { }
while (...) { }
{
// standalone block
}
A variable is block-scoped if it is accessible only inside the block where it is declared.
letandconstare block-scopedvaris not
Why Your Code Works: var Is NOT Block-Scoped
Original example:
if (true) {
var name = "This will cause a syntax error";
}
console.log(name);
Output:
This will cause a syntax error
Even though name is declared inside an if block, it is still accessible outside.
Why?
Because var is function-scoped, not block-scoped.
How JavaScript Interprets var
JavaScript internally treats the code like this:
var name;
if (true) {
name = "This will cause a syntax error";
}
console.log(name);
The declaration is hoisted to the top of the surrounding function or global scope.
This behavior is called hoisting.
Function Scope vs Block Scope
Function Scope (var)
function test() {
if (true) {
var x = 10;
}
console.log(x);
}
test();
x is accessible because var belongs to the entire function.
Block Scope (let / const)
function test() {
if (true) {
let x = 10;
}
console.log(x); // ReferenceError
}
test();
Here, x exists only inside the block.
The Real Problem with var
1. Variable Leakage
for (var i = 0; i < 3; i++) {}
console.log(i);
The loop variable leaks outside the loop.
Using let fixes this:
for (let i = 0; i < 3; i++) {}
console.log(i); // ReferenceError
2. Bugs in Asynchronous Code
One of the most dangerous var issues appears with closures:
for (var i = 1; i <= 3; i++) {
setTimeout(() => {
console.log(i);
}, 1000);
}
Output:
4
4
4
Why?
Join the conversation! Your thoughts help the community grow.