자바스크립트 스택에 요소 푸시(Push)하는 방법 완벽 가이드

자바스크립트에서 스택(Stack)은 LIFO(후입선출, Last In First Out) 방식으로 데이터를 관리하는 가장 기본적인 자료구조 중 하나입니다. 이 글에서는 몇 가지 작은 헬퍼 함수를 포함한 스택 클래스를 살펴보고, 여기에 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;
    }
}

isEmpty 함수는 컨테이너 배열의 길이가 0인지 검사하여 스택이 비어 있는지 판단합니다. isFull 함수는 컨테이너의 길이가 최대 크기(maxSize)보다 크거나 같은지 확인하여 스택이 가득 찼는지 여부를 반환합니다.

참고: 원본 코드에서 isFull()이 생성자의 매개변수 maxSize를 그대로 참조하면 해당 스코프에서 변수를 찾지 못해 런타임에 ReferenceError가 발생할 수 있습니다. 반드시 인스턴스 속성인 this.maxSize로 접근해야 안전합니다.

PUSH 연산 구현하기

스택에 요소를 푸시(push)한다는 것은 배열의 맨 위(top)에 새 요소를 추가하는 것을 의미합니다. 여기서는 모든 연산의 기준점이 되도록 컨테이너 배열의 끝을 스택의 top으로 간주합니다. 이렇게 하면 push와 pop 연산을 모두 O(1)의 시간 복잡도로 처리할 수 있다는 장점이 있습니다. push 함수는 다음과 같이 구현할 수 있습니다.

예제

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

push 함수는 먼저 스택이 가득 찼는지 검사합니다. 이미 꽉 차 있다면 "Stack Overflow!" 메시지를 출력하고 아무 작업도 수행하지 않으며, 여유 공간이 있다면 자바스크립트 배열의 기본 push 메서드를 활용해 요소를 배열의 끝(top)에 추가합니다.

동작 확인하기

다음 코드를 실행하면 push 함수가 정상적으로 동작하는지 확인할 수 있습니다.

예제

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

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

[]
Stack Overflow!
[ 10, 20 ]

최대 크기가 2인 스택을 생성한 뒤 세 개의 요소를 순서대로 푸시했습니다. 처음 두 요소(10, 20)는 정상적으로 추가되었지만, 세 번째 요소(30)를 푸시하려는 시점에는 스택이 이미 가득 차 있어 오버플로우 메시지가 출력되고 해당 요소는 무시됩니다. 이처럼 push 연산 전에 용량을 검사하면 고정 크기 스택에서도 데이터를 안전하게 관리할 수 있습니다.