JavaScript void 연산자의 기본 개념
void는 JavaScript에서 제공하는 단항 연산자로, 주어진 표현식을 평가(evaluate)한 후 항상 undefined라는 원시 값을 반환하는 역할을 합니다. 즉, 표현식의 결과가 무엇이든 상관없이 void를 붙이면 그 결과는 언제나 undefined가 됩니다.
그중에서도 void(0)은 가장 널리 사용되는 형태로, 숫자 0이라는 표현식을 평가한 뒤 아무런 값도 반환하지 않도록 만드는 관용적인 코드입니다.
void(0)은 왜 사용할까요?
웹 페이지에 표현식을 삽입했을 때 원치 않는 부작용(side effect)이 발생할 수 있습니다. 대표적인 예가 링크(<a> 태그)입니다. 링크를 클릭하면 페이지가 새로고침되거나 다른 주소로 이동하는데, 이러한 동작을 막고 싶을 때 javascript:void(0)를 활용합니다.
<a href="javascript:void(0)">클릭해도 이동하지 않는 링크</a>위와 같이 작성하면 링크를 클릭해도 페이지가 새로 고침되거나 이동하지 않으며, 오직 undefined 값만 반환됩니다.
버튼 클릭 예제로 이해하기
실제 예제를 통해 JavaScript:void(0)의 동작 방식을 살펴보겠습니다. 아래 이미지는 버튼 클릭 시 동작을 보여주는 예시입니다.
이 예제에서는 버튼을 처음 클릭했을 때 페이지가 새로 고침되지 않도록 JavaScript:void(0)를 사용했습니다.
여기서 중요한 점은 이벤트 핸들러의 종류입니다. 이 예제에는 ondblclick(더블 클릭) 이벤트 핸들러가 적용되어 있기 때문에, 버튼을 한 번 클릭하면 아무 일도 일어나지 않습니다. 하지만 버튼을 두 번 클릭하면 경고창(alert box)이 나타납니다.
정리하며
void(0)은 표현식을 평가한 후 undefined를 반환하는 간단하지만 유용한 도구입니다. 특히 링크나 버튼의 기본 동작을 차단하고 싶을 때 자주 활용되며, 최신 JavaScript에서는 event.preventDefault() 같은 방법도 함께 알아두면 더욱 안전하고 깔끔한 코드를 작성할 수 있습니다.