Think of it like this:
- Stack = Your desk (small, organized, quick access)
- Heap = Your closet (big, messy, takes time to find things)
1. The Golden Rule
// 📘 Goes in STACK - Simple values
let age = 25; // number
let name = "Raj"; // string
let passed = true; // boolean
// 📦 Goes in HEAP - Complex values
let person = { // object
name: "Raj"
};
let scores = [1, 2, 3]; // array
2. How Stack Works (Simple Values)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack and Heap - Simple Examples</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.example-box {
background: white;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
border-bottom: 3px solid #4CAF50;
padding-bottom: 10px;
}
.memory-container {
display: flex;
gap: 30px;
margin: 20px 0;
justify-content: center;
}
.memory-box {
flex: 1;
max-width: 300px;
}
.stack-box {
background: #E3F2FD;
border: 3px solid #2196F3;
border-radius: 10px;
padding: 15px;
}
.heap-box {
background: #F3E5F5;
border: 3px solid #9C27B0;
border-radius: 10px;
padding: 15px;
}
.memory-title {
font-weight: bold;
text-align: center;
margin-bottom: 15px;
font-size: 18px;
}
.memory-item {
background: white;
padding: 8px;
margin: 5px 0;
border-radius: 5px;
font-family: monospace;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.code-demo {
background: #263238;
color: #ECEFF1;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
font-family: 'Courier New', monospace;
line-height: 1.6;
}
.comment {
color: #78909C;
}
.variable {
color: #FF5252;
}
.value {
color: #69F0AE;
}
.keyword {
color: #82B1FF;
}
button {
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 10px 5px;
}
button:hover {
background: #45a049;
}
.output {
background: #F5F5F5;
border: 2px solid #DDD;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
font-family: monospace;
white-space: pre-line;
}
.arrow {
font-size: 20px;
color: #FF5722;
margin: 0 10px;
}
.highlight {
background: #FFEB3B;
padding: 2px 5px;
border-radius: 3px;
color: #333;
}
.simple-diagram {
text-align: center;
margin: 20px 0;
padding: 20px;
background: #FFF;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.rule-box {
background: #E8F5E9;
border-left: 5px solid #4CAF50;
padding: 15px;
margin: 20px 0;
font-weight: bold;
}
.problem-box {
background: #FFEBEE;
border-left: 5px solid #F44336;
padding: 15px;
margin: 10px 0;
}
.solution-box {
background: #E8F5E9;
border-left: 5px solid #4CAF50;
padding: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1 style="text-align: center;">🧠 Stack and Heap Memory - Made Easy!</h1>
<!-- Rule 1 -->
<div class="example-box">
<h2>📌 Rule 1: What Goes Where?</h2>
<div class="rule-box">
<p>🔵 STACK = Simple Values (numbers, strings, booleans)</p>
<p>🟣 HEAP = Complex Values (objects, arrays)</p>
</div>
<div class="memory-container">
<div class="memory-box">
<div class="stack-box">
<div class="memory-title">📚 STACK (Simple)</div>
<div class="memory-item">age = 25</div>
<div class="memory-item">name = "John"</div>
<div class="memory-item">passed = true</div>
</div>
</div>
<div class="memory-box">
<div class="heap-box">
<div class="memory-title">📦 HEAP (Complex)</div>
<div class="memory-item">{name: "John", age: 25}</div>
<div class="memory-item">[1, 2, 3, 4, 5]</div>
<div class="memory-item">function() {...}</div>
</div>
</div>
</div>
</div>
<!-- Example 1: Stack Copy -->
<div class="example-box">
<h2>🎯 Example 1: Stack Memory (Simple Copy)</h2>
<div class="code-demo">
<span class="keyword">let</span> <span class="variable">a</span> = <span class="value">10</span>; <span
class="comment">// Stack: a = 10</span>
<span class="keyword">let</span> <span class="variable">b</span> = <span class="variable">a</span>; <span
class="comment">// Stack: b = 10 (new copy!)</span>
<span class="variable">b</span> = <span class="value">20</span>; <span class="comment">// Only b
changes</span>
console.log(<span class="variable">a</span>); <span class="comment">// 10 ✅</span>
console.log(<span class="variable">b</span>); <span class="comment">// 20 ✅</span>
</div>
<button onclick="runStackExample()">▶️ Run Example</button>
<div id="stackOutput" class="output"></div>
<div class="simple-diagram">
<strong>What happens:</strong><br>
Step 1: a = 10 <span class="arrow">→</span> <span class="highlight">Creates box with 10</span><br>
Step 2: b = a <span class="arrow">→</span> <span class="highlight">Creates NEW box with 10</span><br>
Step 3: b = 20 <span class="arrow">→</span> <span class="highlight">Changes only b's box</span>
</div>
</div>
<!-- Example 2: Heap Reference -->
<div class="example-box">
<h2>🎯 Example 2: Heap Memory (Reference Copy)</h2>
<div class="code-demo">
<span class="keyword">let</span> <span class="variable">obj1</span> = {<span class="variable">x</span>:
<span class="value">10</span>}; <span class="comment">// Creates object in HEAP</span>
<span class="keyword">let</span> <span class="variable">obj2</span> = <span class="variable">obj1</span>;
<span class="comment">// obj2 points to SAME object</span>
<span class="variable">obj2</span>.<span class="variable">x</span> = <span class="value">20</span>; <span
class="comment">// Changes the shared object</span>
console.log(<span class="variable">obj1</span>.<span class="variable">x</span>); <span class="comment">// 20
😱 (changed!)</span>
console.log(<span class="variable">obj2</span>.<span class="variable">x</span>); <span class="comment">//
20</span>
</div>
<button onclick="runHeapExample()">▶️ Run Example</button>
<div id="heapOutput" class="output"></div>
<div class="simple-diagram">
<strong>What happens:</strong><br>
Step 1: obj1 <span class="arrow">→</span> <span class="highlight">Points to object in heap</span><br>
Step 2: obj2 = obj1 <span class="arrow">→</span> <span class="highlight">Points to SAME object</span><br>
Step 3: obj2.x = 20 <span class="arrow">→</span> <span class="highlight">Changes the shared object</span>
</div>
</div>
<!-- Visual Difference -->
<div class="example-box">
<h2>👁️ Visual Difference</h2>
<div class="memory-container">
<div class="memory-box">
<h3>With Numbers (Stack)</h3>
<div class="stack-box">
<div class="memory-item">a = 10 📦</div>
<div class="memory-item">b = 10 📦</div>
<p style="text-align:center; margin-top:10px;">
<strong>Two separate boxes!</strong>
</p>
</div>
</div>
<div class="memory-box">
<h3>With Objects (Heap)</h3>
<div class="heap-box">
<div class="memory-item">obj1 → 📍</div>
<div class="memory-item">obj2 → 📍</div>
<div class="memory-item" style="background:#FFE082; margin-top:10px;">
📍 {x: 20}
</div>
<p style="text-align:center; margin-top:10px;">
<strong>Both point to same box!</strong>
</p>
</div>
</div>
</div>
</div>
<!-- Common Mistakes -->
<div class="example-box">
<h2>⚠️ Common Mistakes</h2>
<div class="problem-box">
<strong>❌ Problem: Accidentally changing original object</strong>
<div class="code-demo">
<span class="keyword">let</span> <span class="variable">person1</span> = {<span
class="variable">name</span>: <span class="value">"Raj"</span>};
<span class="keyword">let</span> <span class="variable">person2</span> = <span
class="variable">person1</span>;
<span class="variable">person2</span>.<span class="variable">name</span> = <span
class="value">"Amit"</span>; <span class="comment">// Oops! person1 also changed!</span>
</div>
</div>
<div class="solution-box">
<strong>✅ Solution: Create a copy</strong>
<div class="code-demo">
<span class="keyword">let</span> <span class="variable">person1</span> = {<span
class="variable">name</span>: <span class="value">"Raj"</span>};
<span class="keyword">let</span> <span class="variable">person2</span> = {...<span
class="variable">person1</span>}; <span class="comment">// Create new object</span>
<span class="variable">person2</span>.<span class="variable">name</span> = <span
class="value">"Amit"</span>; <span class="comment">// Only person2 changes!</span>
</div>
</div>
<button onclick="runMistakeExample()">▶️ See the Difference</button>
<div id="mistakeOutput" class="output"></div>
</div>
<!-- Simple Array Example -->
<div class="example-box">
<h2>🎯 Example 3: Arrays (Also in Heap!)</h2>
<div class="code-demo">
<span class="keyword">let</span> <span class="variable">arr1</span> = [<span class="value">1</span>, <span
class="value">2</span>, <span class="value">3</span>];
<span class="keyword">let</span> <span class="variable">arr2</span> = <span class="variable">arr1</span>;
<span class="comment">// Same reference!</span>
<span class="variable">arr2</span>.push(<span class="value">4</span>);
console.log(<span class="variable">arr1</span>); <span class="comment">// [1, 2, 3, 4] 😱</span>
console.log(<span class="variable">arr2</span>); <span class="comment">// [1, 2, 3, 4]</span>
</div>
<button onclick="runArrayExample()">▶️ Run Example</button>
<div id="arrayOutput" class="output"></div>
</div>
<!-- Quick Reference -->
<div class="example-box">
<h2>📋 Quick Reference</h2>
<table style="width:100%; border-collapse: collapse;">
<tr>
<th style="border: 1px solid #ddd; padding: 10px; background: #f2f2f2;">Type</th>
<th style="border: 1px solid #ddd; padding: 10px; background: #f2f2f2;">Where Stored</th>
<th style="border: 1px solid #ddd; padding: 10px; background: #f2f2f2;">Copy Behavior</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px;">number, string, boolean</td>
<td style="border: 1px solid #ddd; padding: 10px;">Stack</td>
<td style="border: 1px solid #ddd; padding: 10px;">Creates new copy ✅</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px;">object, array, function</td>
<td style="border: 1px solid #ddd; padding: 10px;">Heap</td>
<td style="border: 1px solid #ddd; padding: 10px;">Shares reference ⚠️</td>
</tr>
</table>
</div>
<script>
function runStackExample() {
const output = document.getElementById('stackOutput');
output.textContent = '';
let a = 10;
output.textContent += `Step 1: let a = 10; // a = ${a}\n`;
let b = a;
output.textContent += `Step 2: let b = a; // b = ${b} (got a copy)\n`;
b = 20;
output.textContent += `Step 3: b = 20; // b = ${b}\n\n`;
output.textContent += `Final values:\n`;
output.textContent += `a = ${a} ✅ (unchanged)\n`;
output.textContent += `b = ${b} ✅ (only b changed)\n\n`;
output.textContent += `📝 Each variable has its own value!`;
}
function runHeapExample() {
const output = document.getElementById('heapOutput');
output.textContent = '';
let obj1 = { x: 10 };
output.textContent += `Step 1: let obj1 = {x: 10};\n`;
output.textContent += ` obj1.x = ${obj1.x}\n\n`;
let obj2 = obj1;
output.textContent += `Step 2: let obj2 = obj1; (sharing reference)\n`;
output.textContent += ` obj2.x = ${obj2.x}\n\n`;
obj2.x = 20;
output.textContent += `Step 3: obj2.x = 20;\n\n`;
output.textContent += `Final values:\n`;
output.textContent += `obj1.x = ${obj1.x} 😱 (changed!)\n`;
output.textContent += `obj2.x = ${obj2.x}\n\n`;
output.textContent += `📝 Both variables point to the SAME object!`;
}
function runMistakeExample() {
const output = document.getElementById('mistakeOutput');
output.textContent = '';
// Wrong way
output.textContent += `❌ WRONG WAY:\n`;
let person1 = { name: "Raj" };
let person2 = person1;
person2.name = "Amit";
output.textContent += `person1.name = "${person1.name}" (changed!)\n`;
output.textContent += `person2.name = "${person2.name}"\n\n`;
// Right way
output.textContent += `✅ RIGHT WAY:\n`;
let person3 = { name: "Raj" };
let person4 = { ...person3 };
person4.name = "Amit";
output.textContent += `person3.name = "${person3.name}" (unchanged!)\n`;
output.textContent += `person4.name = "${person4.name}"\n`;
}
function runArrayExample() {
const output = document.getElementById('arrayOutput');
output.textContent = '';
let arr1 = [1, 2, 3];
output.textContent += `Step 1: let arr1 = [1, 2, 3];\n`;
let arr2 = arr1;
output.textContent += `Step 2: let arr2 = arr1; (sharing reference)\n`;
arr2.push(4);
output.textContent += `Step 3: arr2.push(4);\n\n`;
output.textContent += `Final arrays:\n`;
output.textContent += `arr1 = [${arr1}] 😱 (changed!)\n`;
output.textContent += `arr2 = [${arr2}]\n\n`;
output.textContent += `To copy array properly:\n`;
output.textContent += `let arr3 = [...arr1]; // Creates new array\n`;
output.textContent += `OR\n`;
output.textContent += `let arr3 = arr1.slice(); // Also creates new array`;
}
</script>
</body>
</html>
Simple Programs to Understand
Program 1: Number Copy (Stack)
let a = 5;
let b = a; // b gets value 5
b = 10; // Only b changes
console.log(a); // 5 ✅
console.log(b); // 10 ✅
What happens: Each variable gets its own box with the value.
Program 2: Object Copy (Heap)
let car1 = { color: "red" };
let car2 = car1; // car2 points to SAME car
car2.color = "blue";
console.log(car1.color); // "blue" 😱
console.log(car2.color); // "blue"
What happens: Both variables point to the same object.
Easy Way to Remember
📝 Simple Types = Simple Copy
let x = 10;
let y = x; // y = 10 (separate copy)
y = 20; // x is still 10
📦 Complex Types = Sharing
let obj1 = { a: 10 };
let obj2 = obj1; // Both share same object
obj2.a = 20; // obj1.a is also 20 now!
How to Fix the Sharing Problem
Method 1: Spread Operator (...)
let original = { name: "John", age: 25 };
let copy = { ...original }; // Creates NEW object
copy.age = 30;
console.log(original.age); // 25 ✅
console.log(copy.age); // 30 ✅
Method 2: For Arrays
let arr1 = [1, 2, 3];
let arr2 = [...arr1]; // Creates NEW array
arr2.push(4);
console.log(arr1); // [1, 2, 3] ✅
console.log(arr2); // [1, 2, 3, 4] ✅
One Line Summary
- Numbers/Strings = Each variable gets its own value
- Objects/Arrays = Variables share the same thing
- Want separate copy? = Use
{...obj}or[...arr]
No comments:
Post a Comment