큐(queue)

• 가장 먼저 삽입된 자료가 먼저 나오는 FIFO(First In First Out)의 방식
• 데이터를 집어넣는 enqueue, 추출하는 dequeue 등의 작업이 가능하다.
• 자바스크립트에서는 스택 라이브러리르 따로 지원하지 않아 배열의 push(), shift() 메소드를 통해 stack을 구현할 수 있다.

class Queue {
  constructor() {
    this._arr = [];
  }
  enqueue(item) {
    this._arr.push(item);
  }
  dequeue() {
    return this._arr.shift();
  }
}

const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.dequeue(); // 1

큐 사용사례

• 게임 플레이어 대전 매치
• 대기열 순서처리

스택(stack)

• 가장 마지막에 삽입된 자료가 먼저 나오는 LIFO(Last In First Out)의 방식
• 데이터를 집어넣는 push, 마지막 데이터를 추출하는 pop, 마지막 데이터를 확인하는 peek등의 작업이 가능하다.
• 자바스크립트에서는 스택 라이브러리르 따로 지원하지 않아 배열의 push(), pop() 메소드를 통해 stack을 구현할 수 있다.

class Stack {
  constructor() {
    this._arr = [];
  }
  push(item) {
    this._arr.push(item);
  }
  pop() {
    return this._arr.pop();
  }
  peek() {
    return this._arr[this._arr.length - 1];
  }
}

const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.pop(); // 3

스택 사용사례

• 브라우저의 뒤로가기
• 안드로이드 어플리케이션 액티비티
• 실행취소 (command + z)

summary

큐와 스택은 자료구조에서 자료가 저장되는 형태를 의미한다. 큐는 FIFO의 방식이고 데이터를 입력하고 추출하는 방식으로 enqueue와 dequeue로 정의한다. 스택은 LIFO의 방식이고 push, pop으로 데이터를 입력, 추출한다.
자바스크립트의 런타임 환경에서 Call Stack에서 함수를 호출할 때 가장 위에 쌓인 함수를 먼저 처리하면서 동기적으로 작동하고(LIFO), 비동기 코드는 Callback Queue에 저장되어 대기하다가 Call Stack이 비워지게 되면 Event Loop를 통해 FIFO방식으로 Call Stack에 저장되고 처리된다.