Mastering JavaScript Foundations: Variables, Scope, and Hoisting

Welcome to the first part of our JavaScript series. Whether you’re a student starting your coding journey or a developer looking to fix “logic gaps,” understanding how JavaScript manages data and memory is the essential first step to writing professional code.

In this guide, we’ll break down variable declarations, the rules of scope, and the mechanics of hoisting with clear definitions and code examples.

1. What are Variables?

Definition: Variables are containers that hold data. They allow us to store, reuse, and update information in JavaScript — ranging from simple numbers to complex objects.

Analogy: Think of a variable as a named box. You can put a value inside it, and later check or change what’s inside.

Get Aman Verma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In modern JavaScript, we create these boxes using three keywords: var, let, or const.

2. The Line-by-Line Comparison

var — The Legacy Way

• Definition: The original way to declare variables in JS. It is now considered “old and risky”.
• Scope: Function-scoped (ignores block boundaries).
• Behavior: Can be redeclared and reassigned.

var score = 10;
var score = 20; // ✅ OK (Redeclared)
score = 30;     // ✅ OK (Reassigned)

let — The Modern Choice

• Definition: The standard way to declare variables that need to change over time.
• Scope: Block-scoped (limited to {}).
• Behavior: Can be reassigned but not redeclared in the same block.

let age = 25;
age = 30;     // ✅ OK (Reassigned)
// let age = 40; // ❌ Error: Identifier 'age' has already been declared

const — The Constant Guard

• Definition: Used for values that should stay constant throughout the program.
• Scope: Block-scoped.
• Behavior: Cannot be reassigned or redeclared. You must assign a value at the moment of declaration.

const PI = 3.14;
// PI = 3.15; // ❌ Error: Assignment to constant variable

3. Understanding Scope

Definition: Scope decides where your variables are accessible in your code.

• Block Scope: Variables declared with let and const inside curly braces {} (like in if statements or loops) cannot be accessed outside those braces.
• Function Scope: Variables declared with var are accessible anywhere inside the function they were created in, but they ignore other blocks.

{
    var x = 5; 
    let y = 10;
}
console.log(x); // 5 (var ignores the block) [cite: 13]
console.log(y); // ❌ ReferenceError (let is trapped in the block) [cite: 13]

4. Hoisting: Memory Preparation

Definition: Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope before the code is executed.

• var Hoisting: Moves to the top and is initialized with undefined.
• let/const Hoisting: They are hoisted but stay in the Temporal Dead Zone (TDZ). You cannot access them before the declaration line.

console.log(a); // undefined 
var a = 10;

// console.log(b); // ❌ ReferenceError 
let b = 20

5. Practice Zone 🧑‍💻💡

• Declaration: Declare your name and city using const, and your age using let.
• Hoisting Test: What is the output if you run console.log(count); var count = 42;?.
• Mutation: Create a const object and add a new key to it. Does it work?.
• Error Handling: Try accessing a let variable before declaring it—what error do you see?.

6. Mindset Rule: The Professional Way

• Use const by default. It protects your variables from accidental changes.
• Use let only when you know the value must change.
• Avoid var. It is outdated and often leads to unpredictable bugs.

Reality Check: const protects the "variable binding," not the value itself. You can still change the contents of a const object or array.