Do var and let work the same inside a function?

👨‍💻 Frontend Developer 🟡 Often Asked 🎚️ Medium
#JavaScript #Functions #JS Basics

Brief Answer

No, var and let work differently inside a function. The main difference is scope:

  • var — function scope (visible throughout the function)
  • let — block scope (visible only in the block where declared)
function example() {
  if (true) {
    var a = 1; // visible throughout function
    let b = 2; // visible only in if block
  }
  
  console.log(a); // 1 (works)
  console.log(b); // ReferenceError (error!)
}

Full Answer

[var] and [let] inside a function are like two friends with different rules: [var] shares everything with everyone in the room (function), while [let] shows toys only to those in a specific box (block)! 📦

Main Differences

The main difference between [var] and [let] is scope:

Simple Examples

Scope

function scopeExample() {
  if (true) {
    var varVariable = 'var inside if';
    let letVariable = 'let inside if';
  }
  
  console.log(varVariable); // 'var inside if' (accessible)
  console.log(letVariable); // Error! (not accessible)
}

Redeclaration

function redeclareExample() {
  var a = 1;
  var a = 2; // Allowed — var allows redeclaration
  console.log(a); // 2
  
  let b = 1;
  // let b = 2; // Error! (can't redeclare let)
}

How var Works Inside Function

Hoisting

function varHoisting() {
  console.log(a); // undefined (no error!)
  var a = 5;
  console.log(a); // 5
}
 
// Actually JavaScript does:
// function varHoisting() {
//   var a; // hoists declaration
//   console.log(a); // undefined
//   a = 5;
//   console.log(a); // 5
// }

How let Works Inside Function

Temporal Dead Zone

function letHoisting() {
  // console.log(b); // ReferenceError! (in temporal dead zone)
  let b = 5;
  console.log(b); // 5
}

When This Matters

In Loops

function loopExample() {
  // With var — one variable for all iterations
  for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log('var:', i), 100); // 3, 3, 3
  }
  
  // With let — own variable for each iteration
  for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log('let:', j), 100); // 0, 1, 2
  }
}

In Conditional Blocks

function conditionalExample(condition) {
  if (condition) {
    var a = 'var';
    let b = 'let';
  }
  
  console.log(a); // undefined or 'var' (accessible)
  // console.log(b); // ReferenceError! (not accessible)
}

Common Mistakes

Expecting Block Scope from var

function commonMistake() {
  if (true) {
    var result = 'result';
  }
  
  // ❌ Expecting error, but var is accessible
  console.log(result); // 'result' (no error!)
}

Using Before Declaration

function anotherMistake() {
  // ❌ Error with let
  // console.log(x); // ReferenceError!
  let x = 10;
  
  // ✅ With var works (but better not to do this)
  console.log(y); // undefined
  var y = 20;
}

Simple Rules

  1. var — function scope 🌐
  2. let — block scope 📦
  3. var hoisting — accessible before declaration (as undefined) ⬆️
  4. let in dead zone — error when using before declaration ⚠️
  5. let stricter — can’t redeclare in same scope 🚫

Understanding the difference helps write more predictable code and avoid scope-related errors! 💪


Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪