조건문에 변수를 넣을 때 주의하자

오늘은 이런 트러블슈팅을 했다.

퀴즈 프로그램을 만드는 중, 기존에 만들어둔 버튼을 재활용하기 위해 버튼에 부착된 이벤트리스너를 제거해야 했다(이벤트 위임을 하면 아예 발생하지 않았을 문제 같기도 하다).

따라서 문제의 정답과 보기가 이미 존재할 때, 그 문제의 보기(선택지)를 초기화해주는 작업을 위한 코드, 즉 조건문을 작성했다.

if (this.$validChoices && this.$correctAnswer) {
      this.#detachEventListenerFromChoices();
}

그런데 코드를 테스트 하는 도중, 정답을 클릭하지 않았는데 다음 문제로 넘어가거나, 정답을 눌렀을 때, 오답 표시도 함께 생기는 버그가 생겼다.

원인을 찾다가 이윽고 문제를 발견했다.

$correctAnswer는 0부터 3까지의 정수였는데, 이 변수가 0이 되면 저 조건문이 통과되지 않는 것이다. 즉, 의도하지 않은 동작을 했다.

그래서 이 문제를 해결하기 위해 어떻게 해야 할까, 고민했다.

결론은 간단했다. $correctAnswer를 검사하지 않으면 된다. $validChoices만 검사해도, 충분히 의도한 프로그램의 동작을 구현할 수 있었다.

조건문에 변수를 넣을 때 그 변수가 가지는 값이 의도치 않게 true나 false로 변환될 수 있는지 염두에 두자.