큐(Queue)는 FIFO(First In, First Out, 선입선출) 방식으로 동작하는 대표적인 자료구조입니다. 먼저 들어간 데이터가 먼저 나오는 구조로, 작업 대기열 처리나 이벤트 관리 등 다양한 분야에서 활용됩니다. 이번 글에서는 JavaScript의 클래스와 프로토타입을 활용하여 큐를 직접 구현하고, 브라우저에서 동작하는 인터랙티브 예제까지 살펴보겠습니다.
JavaScript 큐 구현 예제
아래 코드는 입력창에 값을 넣고 버튼을 클릭하면 큐 연산 결과를 화면에 표시하는 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="en">
<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>Implementation of queue in JavaScript.</h1>
<div class="result"></div>
<br />
<input type="text" class="enqueueVal" /><button class="enqueueBtn">
Enqueue
</button>
<button class="dequeueBtn">Dequeue</button>
<button class="Btn">Display</button>
<h3>Click on the above buttons to perform queue operations</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let enqueueBtnEle = document.querySelector(".enqueueBtn");
let dequeueBtnEle = document.querySelector(".dequeueBtn");
class Queue {
constructor() {
this.items = [];
this.length = 0;
}
}
Queue.prototype.enqueue = function (ele) {
this.items[this.length] = ele;
this.length += 1;
};
Queue.prototype.dequeue = function () {
debugger;
if (this.length === 0) {
return "Underflow: no more elements to remove";
}
tempNum = this.items[0];
this.length -= 1;
return tempNum;
};
Queue.prototype.display = function () {
debugger;
if (this.length == 0) {
return "Stack is empty";
}
for (let i = 0; i < this.length; i++) {
resEle.innerHTML += this.items[i] + " , ";
}
};
let queue1 = new Queue();
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "";
queue1.display();
});
enqueueBtnEle.addEventListener("click", () => {
let ele = document.querySelector(".enqueueVal").value;
resEle.innerHTML = ele + " is added to the back of the queue";
queue1.enqueue(ele);
});
dequeueBtnEle.addEventListener("click", () => {
resEle.innerHTML =
queue1.dequeue() + " is removed from the front of queue";
});
</script>
</body>
</html>핵심 메서드 살펴보기
- constructor(): 큐 생성 시 내부 배열
items와 현재 길이를 저장할length속성을 초기화합니다. - enqueue(ele): 전달받은 요소를 큐의 맨 뒤(rear)에 추가하고 길이를 1 증가시킵니다.
- dequeue(): 큐의 맨 앞(front)에 있는 요소를 제거하고 반환합니다. 큐가 비어 있으면 언더플로우(Underflow) 메시지를 반환합니다.
- display(): 큐에 저장된 모든 요소를 순서대로 화면에 출력합니다.
실행 결과
페이지를 열면 아래와 같은 초기 화면이 표시됩니다.
입력창에 값을 입력한 후 'Enqueue' 버튼을 클릭하면 해당 값이 큐의 뒤쪽에 추가됩니다.
'Dequeue' 버튼을 클릭하면 큐의 맨 앞에 있는 요소가 제거되고 그 값이 화면에 출력됩니다.
큐가 비어 있지 않은 상태에서 'Display' 버튼을 클릭하면 현재 큐에 남아 있는 모든 요소가 콤마로 구분되어 표시됩니다.
마무리
이처럼 JavaScript에서는 클래스와 프로토타입만으로도 간단하게 큐 자료구조를 구현할 수 있습니다. 실무에서는 ES6 문법을 활용해 enqueue, dequeue 등의 메서드를 클래스 내부에 직접 정의하는 방식도 많이 사용되며, 성능 최적화를 위해 연결 리스트(Linked List) 기반 구현을 선택하기도 합니다. 큐의 원리를 익혀두면 작업 스케줄링, 비동기 처리 대기열 등 다양한 상황에서 유용하게 활용할 수 있습니다.