[Javascript] 자료구조 - Stack

 

 

 

1. stack이란?

stack은 후입선출(LIFO, Last In First Out)의 원칙에 따라 동작하는 자료구조이다. 실생활에서 자주 볼 수 있는 stack 요소들에 기반하여 만들어졌다. 책이나 접시를 한 줄로 쌓아올리는 경우, 쌓아올리고 난 후에 그것들을 사용하려면 가장 위에 있는 것부터 순차적으로 꺼내서 사용할 수 있다. 새롭게 추가된 책 또는 접시 곧 데이터는 항상 가장 위에 위치한다. 이러한 후입선출 원리를 컴퓨터의 자료구조로 만든 것이다.

 

2. stack이 사용되는 사례

프론트엔드 개발을 하다보면 익숙한 call stack이라는 이름에서 알수 있듯 call stack또 stack으로 만들어진 것이다. stack은 여러가지 사용 사례가 있는데 주로 함수 호출 시 지역변수를 저장하는데 사용된다. 함수가 호출될 때마다 해당 함수의 지역변수와 실행 상태가 stack에 저장되고, 함수가 반환되면 해당 함수와 관련된 정보가 stack에서 제거된다. 이러한 프로세스는 함수 호출 및 반환을 효율적으로 관리하며, 재귀적 알고리즘을 구현하는 데에도 유용하게 사용된다. 웹브라우저의 router history 또한 stack을 통해 임시로 페이지 url을 저장하거나 제거되는데 사용된다.

 

3. Javascript로 만드는 stack

Javascript로 한번 Stack을 만들어보자. Stack이라는 클래스를 정의하고 stack에서 자주 사용하는 기능인 push, pop, peek 등 메서드를 구현해보았다.

class Stack {
  constructor() {
    this.items = []; // 스택을 저장하기 위한 배열
  }

  // 스택에 요소를 추가하는 메서드
  push(element) {
    this.items.push(element);
  }

  // 스택의 맨 위에서 요소를 제거하고 반환하는 메서드
  pop() {
    if (this.isEmpty()) {
      return "Stack is empty";
    }
    return this.items.pop();
  }

  // 스택의 맨 위 요소를 반환하지만 제거하지 않는 메서드
  peek() {
    if (this.isEmpty()) {
      return "Stack is empty";
    }
    return this.items[this.items.length - 1];
  }

  // 스택이 비어 있는지 여부를 확인하는 메서드
  isEmpty() {
    return this.items.length === 0;
  }

  // 스택의 크기(요소의 개수)를 반환하는 메서드
  size() {
    return this.items.length;
  }

  // 스택의 모든 요소를 문자열로 반환하는 메서드 (디버깅 등에 활용)
  print() {
    return this.items.toString();
  }
}

// 스택 테스트
let stack = new Stack();
console.log(stack.isEmpty()); // true

stack.push(10);
stack.push(20);
stack.push(30);

console.log(stack.print()); // 10,20,30
console.log(stack.size()); // 3
console.log(stack.isEmpty()); // false

console.log(stack.pop()); // 30
console.log(stack.peek()); // 20
console.log(stack.print()); // 10,20