JavaScript로 스택(Stack) 자료구조 구현하는 방법

스택(Stack)은 LIFO(Last In, First Out), 즉 '나중에 들어간 요소가 먼저 나오는' 방식으로 동작하는 대표적인 선형 자료구조입니다. 데이터의 삽입과 삭제가 한쪽 끝(꼭대기, top)에서만 이루어지며, 이를 JavaScript에서는 배열과 클래스를 활용해 손쉽게 구현할 수 있습니다.

이번 글에서는 HTML과 JavaScript를 함께 사용해 스택을 직접 구현하고, 브라우저 화면에서 Push(삽입), Pop(삭제), Display(출력) 연산을 실습해 보겠습니다.

전체 예제 코드

아래 코드는 입력 필드와 버튼을 통해 스택 연산을 수행할 수 있는 완전한 웹 페이지 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
    button {
        padding: 6px;
        margin: 4px;
    }
</style>
</head>
<body>
<h1>JavaScript 스택 구현</h1>
<div class="result"></div>
<br />
<input type="text" class="stackPush" /><button class="pushBtn">Push</button>
<button class="popBtn">Pop</button>
<button class="Btn">Display</button>
<h3>위 버튼을 클릭하여 스택 연산을 실행해 보세요</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let pushBtnEle = document.querySelector(".pushBtn");
    let popBtnEle = document.querySelector(".popBtn");
    class Stack {
        constructor() {
            this.items = [];
            this.top = 0;
        }
    }
    Stack.prototype.push = function (ele) {
        this.items[this.top] = ele;
        this.top += 1;
    };
    Stack.prototype.pop = function () {
        if (this.top === 0) {
            return "Underflow: no more elements to delete";
        }
        tempNum = this.items[this.top - 1];
        this.items.length -= 1;
        return tempNum;
    };
    Stack.prototype.display = function () {
        if (this.top == 0) {
            return "Stack is empty";
        }
        for (let i = 0; i < this.top; i++) {
            resEle.innerHTML += this.items[i] + " , ";
        }
    };
    let stack1 = new Stack();
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "";
        stack1.display();
    });
    pushBtnEle.addEventListener("click", () => {
        let ele = document.querySelector(".stackPush").value;
        resEle.innerHTML = ele + " is pushed to the stack";
        stack1.push(ele);
    });
    popBtnEle.addEventListener("click", () => {
        resEle.innerHTML = stack1.pop() + " is popped from the stack";
    });
</script>
</body>
</html>