자바스크립트 스택에서 요소 팝(Pop)하기

스택(Stack)은 LIFO(Last In, First Out, 후입선출) 방식으로 동작하는 대표적인 자료구조입니다. 마지막에 넣은 요소가 가장 먼저 빠져나오는 구조로, 함수 호출 관리나 실행 취소(Undo) 기능 등 다양한 곳에서 활용됩니다. 이번 글에서는 자바스크립트로 간단한 스택 클래스를 만들고, 여기에 팝(Pop) 연산을 추가해 보겠습니다.

스택 클래스 예제

먼저 생성자, 표시(display), 상태 확인 메서드, 그리고 푸시(push) 연산이 포함된 기본적인 스택 클래스입니다.

class Stack {
    constructor(maxSize) {
        // 최대 크기가 전달되지 않으면 기본값 10으로 설정
        if (isNaN(maxSize)) {
            maxSize = 10;
        }
        this.maxSize = maxSize;
        // 스택 값을 저장할 배열 초기화
        this.container = [];
    }

    // 클래스 개발 중 내용을 확인하기 위한 메서드
    display() {
        console.log(this.container);
    }

    // 배열이 비어 있는지 확인
    isEmpty() {
        return this.container.length === 0;
    }

    // 배열이 가득 찼는지 확인
    isFull() {
        return this.container.length >= this.maxSize;
    }

    push(element) {
        // 스택이 가득 찼는지 검사
        if (this.isFull()) {
            console.log("Stack Overflow!");
            return;
        }
        this.container.push(element);
    }
}

isFull 메서드는 컨테이너 배열의 길이가 this.maxSize 이상인지 검사하여 결과를 반환합니다. 참고로 원래 코드에서 maxSize라고만 쓰면 정의되지 않은 변수를 참조하게 되므로 반드시 this.maxSize로 접근해야 한다는 점에 유의하세요. isEmpty 메서드는 배열의 크기가 0인지 확인하고, push 메서드는 오버플로우 여부를 검사한 뒤 새 요소를 스택에 추가합니다.

팝(Pop) 연산 추가하기

이제 이 클래스에 POP 연산을 추가해 보겠습니다. 스택에서 요소를 팝한다는 것은 배열의 꼭대기(top)에서 요소를 제거하는 것을 의미합니다. 여기서는 모든 연산의 기준이 되는 꼭대기를 컨테이너 배열의 끝으로 간주하므로, 자바스크립트 배열이 기본 제공하는 Array.prototype.pop() 메서드를 그대로 활용할 수 있습니다. 구현은 다음과 같습니다.

예제

pop() {
    // 스택이 비어 있는지 확인
    if (this.isEmpty()) {
        console.log("Stack Underflow!");
        return;
    }
    this.container.pop();
}

빈 스택에서 요소를 제거하려고 하면 언더플로우(Underflow)가 발생하므로, 제거 전에 반드시 isEmpty로 스택이 비어 있는지 먼저 검사해야 합니다. 실무에서는 콘솔에 메시지만 출력하는 대신, 팝된 값을 반환하거나 에러를 던지도록 처리하면 더 견고한 구현이 됩니다.

동작 확인하기

작성한 pop 메서드가 올바르게 동작하는지 다음 코드로 확인할 수 있습니다.

예제

let s = new Stack(2);
s.display();
s.pop();
s.push(20);
s.push(30);
s.pop();
s.display();

출력 결과

[]
Stack Underflow!
[ 20 ]

실행 순서 분석

결과를 단계별로 살펴보면 다음과 같습니다.

1. s.display() → 아직 아무것도 넣지 않았으므로 []가 출력됩니다.
2. s.pop() → 스택이 비어 있으므로 "Stack Underflow!" 메시지가 출력되고 아무 일도 일어나지 않습니다.
3. s.push(20), s.push(30) → 두 요소가 차례로 스택에 추가되어 내부 배열은 [20, 30]이 됩니다.
4. s.pop() → 맨 끝에 있는 30(꼭대기 요소)이 제거됩니다.
5. s.display() → 남은 요소 [ 20 ]가 출력됩니다.

이처럼 마지막에 넣은 30이 먼저 제거되면서 스택의 후입선출(LIFO) 특성이 그대로 유지되는 것을 확인할 수 있습니다.