Var, Let, and Const

Concept

var, let, and const are all hoisted — memory is reserved for every one of them before your code runs (Lesson 1). That part is identical. What's completely different is what value they start with, whether you're allowed to touch them before their line runs, whether { } blocks contain them, and even which physical part of memory they're stored in. This lesson covers all four differences, with real, checkable examples for each.

Key terms, explained simply

• var, let, const are three keywords that declare (create) a variable. A variable is a named place in memory that holds a value.
• Declaration vs. assignment. A declaration creates the name (let a;). An assignment puts a value in it (a = 5;). You can do both in one line: let a = 5;. Giving a variable its first value is also called initialization.
• Hoisting is the effect of the memory creation phase: names are created before any code runs, so it looks as if declarations moved to the top of their scope.
• Scope is the part of the code where a name can be seen and used. Block scope means the name only lives inside the nearest pair of { } (a block, such as the body of an if or a loop). Function scope means the name lives inside the whole function.
• Binding is the link between a variable name and its value. When we say “reassign,” we mean pointing the name at a different value.
• Global object is the one object that the engine creates for the whole program. In a browser it is called window. Lesson 5 explains it fully. A property is a name and value stored inside an object, such as room: 101 in { room: 101 }.
• Mutate means to change something in place. A thing that cannot be changed is immutable.
• ReferenceError, SyntaxError, TypeError are error types. A ReferenceError means a name cannot be used (it does not exist, or it is locked). A SyntaxError means the code is written in a way the language does not allow. A TypeError means a value is used in a way its type does not allow, such as assigning to a constant.

Why This Matters

• Three declarations can produce three completely different results for the exact same mistake — printing a variable before its line runs — and interviewers use this to check if you understand hoisting properly, not just the keyword.
• Explains why old JS code often had global-variable collisions (two pieces of code using the same global name), and exactly what let/const were built to stop.
• Sets up the classic var-inside-a-loop bug with setTimeout (a function that runs other code after a delay), which you'll trace fully in Lesson 11.
• The internal storage split you'll see here also helps you understand the global object and this, the subject of Lesson 5.

The Locked Meeting Room — An Analogy

var — Hoisted And Ready

console.log(guestName); // undefined
var guestName = "Aditi";

No error. guestName already existed in memory from the memory creation phase, with the value undefined (a special value that means “created, but no value yet”). If you read it early, you get undefined.

let and const — Hoisted But Locked

console.log(guestName); // ReferenceError: Cannot access 'guestName' before initialization
let guestName = "Aditi";

let is hoisted too. Many people wrongly believe it is not. The real difference: var gets a placeholder value (undefined) the instant memory is reserved. let/const get locked instead, from the top of the scope until their declaration line actually runs. This locked stretch has a name: the Temporal Dead Zone (TDZ). The TDZ is the time between the start of a scope and the line where a let, const or class is declared. During that time the name exists but cannot be used, and any use throws an error. (“Temporal” means it is about time, not about a place in the file.)

1console.log(guestName);
2var guestName = "Aditi";

1console.log(guestName);
2let guestName = "Aditi";

1console.log(guestName);
2// never declared anywhere

const's Extra Rule

const roomNumber; // SyntaxError: Missing initializer in const declaration

const must be given a value on the same line where it is declared. This code is a SyntaxError, which JavaScript finds before it runs anything, so none of the file runs.

const guest = { name: "Aditi", room: 101 };

guest.room = 102;   // fine — mutating a property
console.log(guest); // { name: "Aditi", room: 102 }

guest = { name: "Rahul" }; // TypeError: Assignment to constant variable.

Block Scope vs. Function Scope

if (true) {
  var a = "visible everywhere";
  let b = "visible only inside these { }";
}

console.log(a); // "visible everywhere"
console.log(b); // ReferenceError: b is not defined

var ignores { } blocks — it only respects function boundaries (and the global level). let/const respect { } strictly: the moment the block ends, they're gone.

Under The Hood — Two Memory Records

Here's the part that isn't a comparison. An environment record is the place where the engine stores the names (and values) of one scope. Inside the Global Execution Context's memory, JS keeps two separate records, not one:

• Object Environment Record — an environment record tied to the real global object (window in a browser). var and function declarations are stored here, which means they become actual properties on that object.
• Declarative Environment Record — a separate, private environment record, not tied to any object at all. let, const, and class declarations live here instead.

See It Live — window & DevTools

Check the two records directly

var guestName = "Aditi";
let roomNumber = 101;
const hotelName = "Grand Palace";

console.log(window.guestName);   // "Aditi"
console.log(window.roomNumber);  // undefined
console.log(window.hotelName);   // undefined

console.log(guestName, roomNumber, hotelName); // all three work fine by name

Watch it in the Scope panel

1. Set a breakpoint

   Anywhere after all three declarations have run.

2. Open the Scope panel

   Sources tab → the Scope sidebar, while paused.

3. Look for two separate buckets

   Global — this is window, and you'll see guestName sitting right there as a property. Script — a separate bucket holding roomNumber and hotelName. That “Script” bucket is the Declarative Environment Record, visible proof it's a different storage area from window.

Real Example — Traced Line By Line

var hotelName = "Grand Palace";

function checkIn(guestName) {
  if (guestName) {
    let roomNumber = 101;
    const confirmed = true;
    console.log(guestName + " checked into room " + roomNumber);
  }
  console.log(typeof roomNumber); // "undefined" — roomNumber never leaked out
}

checkIn("Aditi");

1var hotelName = "Grand Palace";
2 
3function checkIn(guestName) {
4  if (guestName) {
5    let roomNumber = 101;
6    const confirmed = true;
7    console.log(guestName + " checked into room " + roomNumber);
8  }
9  console.log(typeof roomNumber); // "undefined"
10}
11 
12checkIn("Aditi");

1. Global EC pushed

   hotelName → undefined reserved, then assigned "Grand Palace". checkIn fully hoisted. checkIn("Aditi") called.

2. checkIn EC pushed

   Its own memory: guestName → "Aditi". The if block is entered.

3. Inside the if block

   roomNumber and confirmed exist only for these { } — hoisted into the TDZ at the top of the block, then unlocked the instant their lines run. Prints Aditi checked into room 101.

4. Back outside the block

   roomNumber no longer exists here at all — typeof roomNumber safely prints "undefined" instead of throwing, because typeof on a name that was never declared doesn't throw the way reading it directly would. (typeof is an operator that returns the type of a value as a string.)

5. checkIn finishes → popped

   Its whole private memory, block-scoped variables included, is discarded completely.

Common Misconceptions

Interview Questions