-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript-stack.html
More file actions
367 lines (312 loc) · 17.3 KB
/
Copy pathjavascript-stack.html
File metadata and controls
367 lines (312 loc) · 17.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Data Structure in JavaScript: Complete Implementation Guide | EasyStack</title>
<meta name="description" content="Build a stack in JavaScript from scratch using arrays and linked lists. Learn the Stack class, push/pop/peek methods, and how JavaScript engines use stacks internally." />
<meta name="keywords" content="javascript stack, stack data structure javascript, stack class implementation, push pop peek javascript, array stack, linked list stack, V8 call stack" />
<meta name="author" content="Arun Neupane" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://easystack.netlify.app/javascript-stack" />
<meta name="theme-color" content="#F2F2F7">
<meta name="google-adsense-account" content="ca-pub-1708134460872611">
<meta property="og:title" content="Stack Data Structure in JavaScript: Complete Implementation Guide" />
<meta property="og:description" content="Build a stack in JavaScript from scratch using arrays and linked lists. Learn the Stack class, push/pop/peek methods, and how JavaScript engines use stacks internally." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://easystack.netlify.app/javascript-stack" />
<meta property="og:image" content="https://easystack.netlify.app/images/social-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="EasyStack" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Stack Data Structure in JavaScript: Complete Implementation Guide" />
<meta name="twitter:description" content="Build a stack in JavaScript from scratch using arrays and linked lists. Learn the Stack class, push/pop/peek methods, and how JavaScript engines use stacks internally." />
<link rel="icon" href="./images/stack-fav.png" type="image/x-icon">
<link rel="apple-touch-icon" href="./images/stack-fav.png">
<link rel="stylesheet" href="./hig.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Stack Data Structure in JavaScript: Complete Implementation Guide",
"description": "Build a stack in JavaScript from scratch using arrays and linked lists. Learn the Stack class, push/pop/peek methods, and how JavaScript engines use stacks internally.",
"author": {"@type": "Person", "name": "Arun Neupane", "url": "https://arunneupane.netlify.app/"},
"publisher": {"@type": "Organization", "name": "EasyStack", "url": "https://easystack.netlify.app", "logo": {"@type": "ImageObject", "url": "https://easystack.netlify.app/images/stack-fav.png", "width": 512, "height": 512}},
"datePublished": "2026-09-01",
"dateModified": "2026-09-01",
"mainEntityOfPage": "https://easystack.netlify.app/javascript-stack"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{"@type": "Question", "name": "Should I use an array or a linked list for a JavaScript stack?", "acceptedAnswer": {"@type": "Answer", "text": "For most use cases, an array-based stack is simpler and faster in JavaScript due to engine optimizations. Linked lists avoid resizing overhead but add memory overhead for node objects. Use arrays unless you need a fixed-size stack with guaranteed O(1) worst-case operations."}},
{"@type": "Question", "name": "Does JavaScript have a built-in Stack class?", "acceptedAnswer": {"@type": "Answer", "text": "No. JavaScript does not have a native Stack data structure. However, the built-in Array methods push() and pop() follow LIFO behavior, so arrays are commonly used as stacks. For a cleaner API, you can wrap these methods in a Stack class."}},
{"@type": "Question", "name": "What is the V8 call stack in JavaScript?", "acceptedAnswer": {"@type": "Answer", "text": "The V8 engine (used in Chrome and Node.js) uses a call stack to track function execution. Each function call pushes a frame onto the stack, and each return pops a frame. This is separate from any stack you implement in your code but follows the same LIFO principle."}}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://easystack.netlify.app/"},
{"@type": "ListItem", "position": 2, "name": "Guides", "item": "https://easystack.netlify.app/guides"},
{"@type": "ListItem", "position": 3, "name": "JavaScript Stack", "item": "https://easystack.netlify.app/javascript-stack"}
]
}
</script>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar">
<div class="shell topbar__inner">
<a class="brand" href="./"><span class="brand__mark brand__mark--logo"><img src="./images/stack.gif" alt="" width="30" height="30"></span> EasyStack</a>
<nav aria-label="Primary"><ul class="nav-links desktop-links">
<li><a href="./">Visualizer</a></li><li><a href="./guides">Guides</a></li><li><a href="./stack-visualizer">Tool</a></li><li><a href="./stack-frame-visualizer">Call Stack</a></li><li><a href="./stack-interview">Interview</a></li>
</ul></nav>
<button class="theme-toggle" id="themeToggle" type="button" title="Toggle dark mode"></button>
<button class="nav-toggle" id="navToggle" type="button" aria-label="Menu" aria-expanded="false" aria-controls="navLinks"><span></span><span></span><span></span></button>
<ul class="nav-links nav-mobile" id="navLinks">
<li><a href="./">Visualizer</a></li><li><a href="./guides">All Guides</a></li><li><a href="./stack-operations">Stack Operations</a></li><li><a href="./stack-visualizer">Advanced Tool</a></li><li><a href="./stack-frame-visualizer">Call Stack Visualizer</a></li><li><a href="./stack-complexity">Complexity</a></li><li><a href="./stack-interview">Interview Problems</a></li><li><a href="./about">About</a></li>
</ul>
</div>
</header>
<main id="main">
<section class="hero">
<div class="shell">
<h1>JavaScript Stack</h1>
<p>Build a stack from scratch in JavaScript, understand how the language uses stacks internally, and learn patterns you can apply immediately.</p>
</div>
</section>
<section class="guide-content">
<div class="shell">
<h2>Stack Using an Array</h2>
<p>The simplest way to implement a stack in JavaScript is to wrap an array in a class. The Array methods <code>push()</code> and <code>pop()</code> already follow LIFO behavior, so the wrapper provides a cleaner, more semantic API.</p>
<pre><code>class Stack {
constructor() {
this.items = [];
}
push(element) {
this.items.push(element);
}
pop() {
if (this.isEmpty()) {
return undefined;
}
return this.items.pop();
}
peek() {
if (this.isEmpty()) {
return undefined;
}
return this.items[this.items.length - 1];
}
isEmpty() {
return this.items.length === 0;
}
size() {
return this.items.length;
}
clear() {
this.items = [];
}
print() {
console.log(this.items.toString());
}
}</code></pre>
<p>Usage:</p>
<pre><code>const stack = new Stack();
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack.peek()); // 30
console.log(stack.pop()); // 30
console.log(stack.size()); // 2
console.log(stack.isEmpty()); // false</code></pre>
<p>The array stores elements contiguously in memory. The <code>push</code> and <code>pop</code> methods operate on the end of the array, which is O(1) amortized. <a href="./stack-complexity">Learn about stack time complexity</a></p>
<h2>Stack Using a Linked List</h2>
<p>A linked list implementation avoids the occasional O(n) cost of array resizing. Each element is a node with a value and a pointer to the next node. The top of the stack is the head of the list.</p>
<pre><code>class Node {
constructor(value) {
this.value = value;
this.next = null;
}
}
class LinkedListStack {
constructor() {
this.top = null;
this.count = 0;
}
push(value) {
const node = new Node(value);
node.next = this.top;
this.top = node;
this.count++;
}
pop() {
if (this.isEmpty()) {
return undefined;
}
const value = this.top.value;
this.top = this.top.next;
this.count--;
return value;
}
peek() {
if (this.isEmpty()) {
return undefined;
}
return this.top.value;
}
isEmpty() {
return this.count === 0;
}
size() {
return this.count;
}
}</code></pre>
<p>Every <code>push</code> and <code>pop</code> is O(1) with no amortization. The tradeoff is extra memory for each node's pointer and the lack of cache locality compared to arrays. <a href="./linked-list-stack">Full linked list stack guide</a></p>
<h2>The JavaScript Call Stack</h2>
<p>JavaScript engines like V8 (Chrome, Node.js) use a call stack to track which function is currently executing. When you call a function, a stack frame containing local variables and the return address is pushed onto the call stack. When the function returns, the frame is popped.</p>
<p>This is the engine's internal stack and is separate from any Stack class you build. However, it follows the same LIFO principle and is limited in size. If you write a recursive function that never returns, you will get a "Maximum call stack size exceeded" error, which is a stack overflow.</p>
<pre><code>function count(n) {
if (n === 0) return;
count(n - 1);
}
count(5);
// Call stack: count(5) -> count(4) -> count(3) -> count(2) -> count(1) -> count(0)
// Then each frame is popped as the functions return.</code></pre>
<p><a href="./call-stack">Deep dive into the call stack</a></p>
<h2>Built-in Array Methods That Act Like a Stack</h2>
<p>You may not always need a custom Stack class. JavaScript arrays already behave as stacks when you only use <code>push()</code> and <code>pop()</code>:</p>
<pre><code>const history = [];
history.push("/home"); // push
history.push("/about"); // push
history.push("/contact"); // push
history.pop(); // "/contact"
history.pop(); // "/about"
history[history.length - 1]; // "/home" (peek)</code></pre>
<p>This pattern is used throughout browser APIs and libraries. The key rule is: never use <code>shift()</code>, <code>unshift()</code>, or index access if you want true stack behavior. <a href="./stack-operations">Learn all stack operations</a></p>
<h2>Common Patterns</h2>
<h3>Undo System</h3>
<p>Maintain an array of actions. Each action is pushed when performed. When the user presses undo, pop the last action and reverse it:</p>
<pre><code>const undoStack = [];
function performAction(action) {
action.execute();
undoStack.push(action);
}
function undo() {
if (undoStack.length === 0) return;
const action = undoStack.pop();
action.reverse();
}</code></pre>
<h3>Navigation History</h3>
<p>Track visited pages in a stack. Push on navigation, pop on back button:</p>
<pre><code>const navStack = [];
function navigateTo(url) {
navStack.push(window.location.href);
window.location.href = url;
}
function goBack() {
if (navStack.length > 0) {
window.location.href = navStack.pop();
}
}</code></pre>
<p><a href="./stack-analogies">More real-world stack analogies</a></p>
<h2>Performance Tips</h2>
<ul>
<li>Use <code>Array.push()</code> and <code>Array.pop()</code> instead of manual index manipulation.</li>
<li>If you know the maximum size in advance, pre-allocate the array: <code>new Array(maxSize)</code> and manage a <code>top</code> index.</li>
<li>Avoid spreading or copying the stack array in hot loops. Use a <code>size</code> counter and only access elements up to that index.</li>
<li>For millions of elements, consider a linked list to avoid array resizing pauses.</li>
<li>Profile before optimizing. The V8 engine heavily optimizes array push/pop operations.</li>
</ul>
<h2>Complete Code Example</h2>
<p>Here is a production-ready Stack class with all common methods. Click the copy button to use it in your project:</p>
<pre><code>class Stack {
#items;
#maxSize;
constructor(maxSize = Infinity) {
this.#items = [];
this.#maxSize = maxSize;
}
push(element) {
if (this.isFull()) {
throw new Error("Stack overflow");
}
this.#items.push(element);
}
pop() {
if (this.isEmpty()) {
throw new Error("Stack underflow");
}
return this.#items.pop();
}
peek() {
if (this.isEmpty()) {
return undefined;
}
return this.#items[this.#items.length - 1];
}
isEmpty() {
return this.#items.length === 0;
}
isFull() {
return this.#items.length >= this.#maxSize;
}
size() {
return this.#items.length;
}
clear() {
this.#items = [];
}
toArray() {
return [...this.#items].reverse();
}
[Symbol.iterator]() {
let index = this.#items.length - 1;
return {
next: () => {
if (index >= 0) {
return { value: this.#items[index--], done: false };
}
return { done: true };
}
};
}
}
const stack = new Stack(5);
stack.push("first");
stack.push("second");
stack.push("third");
for (const item of stack) {
console.log(item); // third, second, first
}</code></pre>
<p><a href="./array-stack">Array implementation guide</a> | <a href="./javascript-stack">This page</a></p>
<section class="faq" id="faq">
<h2>Frequently Asked Questions</h2>
<h3>Should I use an array or a linked list for a JavaScript stack?</h3>
<p>For most use cases, an array-based stack is simpler and faster in JavaScript due to engine optimizations. Linked lists avoid resizing overhead but add memory overhead for node objects. Use arrays unless you need a fixed-size stack with guaranteed O(1) worst-case operations.</p>
<h3>Does JavaScript have a built-in Stack class?</h3>
<p>No. JavaScript does not have a native Stack data structure. However, the built-in Array methods push() and pop() follow LIFO behavior, so arrays are commonly used as stacks. For a cleaner API, you can wrap these methods in a Stack class.</p>
<h3>What is the V8 call stack in JavaScript?</h3>
<p>The V8 engine (used in Chrome and Node.js) uses a call stack to track function execution. Each function call pushes a frame onto the stack, and each return pops a frame. This is separate from any stack you implement in your code but follows the same LIFO principle.</p>
</section>
</div>
</section>
</main>
<footer class="footer"><div class="shell"><div class="footer__grid">
<div><div class="footer__brand"><span class="brand__mark brand__mark--logo"><img src="./images/stack.gif" alt="" width="24" height="24"></span> EasyStack</div><p class="footer__about">A free, interactive stack data structure visualizer with comprehensive guides.</p><div class="footer-social"><a href="https://github.com/arundada9000" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><img src="./images/stack-fav.png" alt="GitHub" style="width:19px;height:19px;border-radius:4px"></a></div></div>
<div><h4>Guides</h4><ul><li><a href="./stack-operations">Stack Operations</a></li><li><a href="./push-pop">Push and Pop</a></li><li><a href="./stack-complexity">Time Complexity</a></li><li><a href="./stack-analogies">Real-World Analogies</a></li><li><a href="./call-stack">The Call Stack</a></li></ul></div>
<div><h4>Learn</h4><ul><li><a href="./guides">All Guides</a></li><li><a href="./array-stack">Array Implementation</a></li><li><a href="./linked-list-stack">Linked List Stack</a></li><li><a href="./stack-memory">Stack Memory</a></li><li><a href="./monotonic-stack">Monotonic Stack</a></li></ul></div>
<div><h4>Site</h4><ul><li><a href="./about">About</a></li><li><a href="./contact">Contact</a></li><li><a href="./privacy">Privacy Policy</a></li><li><a href="https://github.com/arundada9000/Stack" target="_blank" rel="noopener">Source Code</a></li></ul></div>
</div><div class="footer__bottom"><span>Copyright <span data-year>2026</span> EasyStack. Made by Arun Neupane.</span><span>Free forever. No sign-up. Fully offline-ready PWA.</span></div></div></footer>
<script src="./hig.js"></script>
</body>
</html>