연결 리스트는 데이터 요소들이 순차적으로 연결된 자료구조로, 각 노드는 데이터와 다음 노드를 가리키는 참조로 구성됩니다. 이번 글에서는 자바스크립트 클래스를 활용해 연결 리스트를 직접 만들어 보겠습니다.
LinkedList 클래스 정의하기
먼저 생성자에서 head를 null로 초기화하는 간단한 클래스부터 정의하겠습니다. 또한 LinkedList 클래스의 프로토타입에 연결 리스트의 각 노드를 나타내는 별도의 구조체(Node)도 함께 정의합니다.
class LinkedList {
constructor() {
this.head = null;
this.length = 0;
}
}
LinkedList.prototype.Node = class {
constructor(data) {
this.data = data; this.next = null;
}
}여기서 head는 리스트의 첫 번째 노드를 가리키고, length는 현재 리스트에 저장된 노드의 개수를 추적합니다. Node 클래스는 실제 데이터(data)와 다음 노드를 가리키는 참조(next)를 가집니다.
display 함수로 리스트 출력하기
다음으로 연결 리스트의 상태를 눈으로 확인할 수 있도록 display 함수를 만들어 보겠습니다. 이 함수는 다음과 같은 방식으로 동작합니다.
- head(첫 번째 노드)에서 시작합니다.
- currElem = currElem.next를 통해 리스트를 순회하며, currElem이 null이 되면 종료합니다. 즉, 리스트의 끝에 도달할 때까지 반복합니다.
- 순회하는 동안 각 노드의 데이터를 출력합니다.
아래는 이 과정을 나타낸 그림입니다.
이제 이 로직을 실제 코드로 어떻게 구현하는지 살펴보겠습니다.
display 함수 구현 예제
display() {
let currNode = this.head;
while (currNode != null) {
console.log(currNode.data + " -> ");
currNode = currNode.next;
}
}동작 원리 설명
display 함수는 먼저 currNode 변수를 head로 초기화한 뒤, while 루프를 돌며 현재 노드의 데이터를 콘솔에 출력하고 currNode를 다음 노드로 이동시킵니다. currNode가 null이 되는 순간, 즉 마지막 노드까지 모두 순회하면 루프가 종료됩니다.
예를 들어 10 → 20 → 30 순서로 데이터가 저장된 연결 리스트라면, display() 호출 시 콘솔에 다음과 같이 출력됩니다.
10 -> 20 -> 30 ->
이처럼 연결 리스트는 배열과 달리 크기가 고정되어 있지 않고, 노드의 삽입과 삭제가 포인터 조작만으로 가능하다는 장점이 있습니다. 다음 단계로 insert, remove 같은 메서드를 추가하면 더욱 완성도 높은 연결 리스트를 만들 수 있습니다.