자바스크립트 순환 참조(Circular Reference)란? 개념과 예제 코드

자바스크립트 순환 참조의 예

순환 참조(Circular Reference)는 서로 다른 두 객체가 서로를 참조할 때 발생합니다.

과거의 문제점: 메모리 누수

구형 브라우저에서는 순환 참조가 메모리 누수(memory leak)의 주요 원인이었습니다. 하지만 최신 가비지 컬렉션(Garbage Collection) 알고리즘은 순환 구조와 순환 의존성을 충분히 처리할 수 있도록 개선되었기 때문에, 이제는 더 이상 큰 문제가 되지 않습니다.

설계 관점에서의 순환 참조

그러나 순수한 설계 관점에서 보면, 순환 참조는 여전히 바람직하지 않은 코드 스멜(code smell)입니다. 순환 참조는 서로 참조하는 두 객체가 강하게 결합(tightly coupled)되어 있음을 의미하며, 한쪽 객체에 변경이 생기면 다른 쪽 객체도 함께 수정해야 할 가능성이 높습니다.

순환 참조 예제 코드

예를 들어 Dog와 Person이라는 두 객체가 있다고 가정해 보겠습니다. Dog 객체만으로 개의 주인(owner)을 알 수 있고, Person 객체만으로 사람의 반려동물(pet)을 알 수 있도록 만들고 싶다면 다음과 같이 작성하게 됩니다.

let dog = new Dog();
let person = new Person();
// 순환 참조 생성
dog.owner = person;
person.pet = dog;

순환 참조 해결 방법

대부분의 상황에서는 실제로 한쪽 객체에만 접근하고 나머지 객체를 그로부터 파생시키면 됩니다. 따라서 두 연결 중 하나를 끊어도 무방합니다. 만약 양방향 접근이 꼭 필요하다면, 역방향 조회용으로 Map(맵)을 활용해 객체를 매핑하는 방법도 있습니다.

다만 각종 편법(hack)을 동원하기보다는, 성능상 특별한 문제가 없다면 순환 참조를 그대로 두는 것이 더 나은 선택일 수 있습니다.