JavaScript let vs var: Scope, Hoisting, and When to Use Each

By the end of this page, you will understand how let and var differ in scope, hoisting, redeclaration, and global behavior in JavaScript. You will also learn why modern JavaScript usually prefers let and const over var, and how to avoid common bugs caused by var.

let and var are both used to declare variables in JavaScript, but they follow different rules.

The biggest difference is scope:

• var is function-scoped
• let is block-scoped

A block is any code inside curly braces {} such as an if, for, or while statement.

if (true) {
  var a = 10;
  let b = 20;
}

console.log(a); // 10
console.log(b); // ReferenceError

Here, a is still available outside the if block because var ignores block scope. But b only exists inside the block because respects block scope.

Think of var as a label attached to an entire room, while let is a label attached to a specific box inside the room.

• With var, if you declare a variable anywhere in a function, it is available across the whole function.
• With let, the variable only exists inside the exact block where you created it.

Another way to think about it:

• var is like a note written on the wall of the whole function.
• let is like a sticky note placed on one section only.

This is why let gives you tighter control. Variables stay closer to where they are actually used.

Basic syntax

var name = "Alice";
let age = 25;

Both declare variables, but they behave differently.

Scope example

function test() {
  if (true) {
    var city = "Paris";
    let country = "France";
  }

  console.log(city);    // "Paris"
  console.log(country); // ReferenceError
}

Why this happens

• city uses var, so it belongs to the whole function test
• country uses let, so it exists only inside the if block

Loop example

Consider this example:

function demo() {
  console.log(a);
  // console.log(b);

  var a = 1;
  let b = 2;

  if (true) {
    var aInside = "var value";
    let bInside = "let value";
  }

  console.log(a);       // 1
  console.log(b);       // 2
  console.log(aInside); // "var value"
  // console.log(bInside); // ReferenceError
}

demo();

What happens step by step

1. The function demo starts running.
2. JavaScript sees var a and hoists it, initializing it to undefined.
3. JavaScript also hoists let b, but does not initialize it yet.
4. console.log(a) prints .

let is useful whenever a variable should only exist in a small area of code.

Common real-world examples

Inside loops

for (let index = 0; index < items.length; index++) {
  console.log(items[index]);
}

Each iteration gets the correct index.

Temporary calculation values

function calculateTotal(price, taxRate) {
  let tax = price * taxRate;
  let total = price + tax;
  return total;
}

The variables only exist where they are needed.

Conditional logic

if (user.isAdmin) {
  let message = "Access granted";
  console.log(message);
}

message does not leak outside the block.

API or form validation code

In real projects, developers usually follow this pattern:

• use const by default
• use let when reassignment is needed
• avoid var

Typical pattern

const apiUrl = "/users";
let retries = 0;

while (retries < 3) {
  retries++;
}

Why teams avoid var

Fewer scope bugs

let keeps variables inside the block where they are used.

Safer refactoring

If code is moved into an if block or loop, let is less likely to affect surrounding code unexpectedly.

Better loop behavior

let works naturally with asynchronous callbacks inside loops.

Common patterns in codebases

Guard clauses

function () {
   (!user) {
    ;
  }

   name = user..();
  .(name);
}

1. Assuming var is block-scoped

Broken code:

if (true) {
  var message = "hello";
}

console.log(message); // still works

Why it is a problem:

You may expect message to disappear after the block, but it does not.

How to avoid it:

Use let when you want block scope.

if (true) {
  let message = "hello";
}

console.log(message); // ReferenceError

2. Using a let variable before declaring it

Broken code:

console.log(total);
let total = 100;

Why it is a problem:

is hoisted but not initialized before the declaration line.

var x = 1;
let y = 2;

Key rules

• var is function-scoped
• let is block-scoped
• var can be redeclared in the same scope
• let cannot be redeclared in the same scope
• var is hoisted and initialized to undefined
• let is hoisted but stays in the temporal dead zone until declared

Scope example

if (true) {
  var a = 1;
  let b = 2;
}

console.log(a); // 1
console.log(b); // ReferenceError

Hoisting example

console.(x); 
 x = ;

.(y); 
 y = ;

Is let always better than var in JavaScript?

In modern JavaScript, yes for most cases. let is safer because it uses block scope and avoids many bugs caused by var.

Why does var print undefined before declaration?

Because var is hoisted and initialized with undefined before the code runs.

Why does let throw a ReferenceError before declaration?

Because let exists in the temporal dead zone until the declaration line is reached.

Should I still learn var?

Yes. You will still see it in older codebases, interview questions, and legacy tutorials.

What should I use in modern JavaScript: var, let, or const?

Use const by default, let when reassignment is needed, and avoid unless you are working with older code.

• const — another modern variable declaration keyword used when reassignment should not happen.
• scope — helps explain where variables are accessible.
• hoisting — important for understanding why var and let behave differently before declaration.
• temporal dead zone — explains why let cannot be accessed before its declaration line.
• closures — useful for understanding loop callbacks and captured variables.
• block statements — relevant because let is block-scoped.
• function scope vs block scope — the core comparison behind var and let.