자바스크립트(JavaScript)의 void 연산자는 주어진 표현식을 평가한 뒤, 그 결과값 대신 항상 undefined라는 원시(primitive) 값을 반환합니다. 즉, 표현식이 만들어내는 값은 무시하고 오직 부작용(side effect)만 제거하는 역할을 합니다.
이러한 부작용은 웹 페이지에 표현식을 삽입할 때 발생할 수 있습니다. 대표적인 예로, 링크를 클릭했을 때 의도치 않게 페이지가 새로고침되거나 이동하는 상황을 들 수 있습니다.
void(0) 활용 예제
void(0)는 하이퍼링크와 함께 사용하여 undefined 원시 값을 얻는 데 활용됩니다. 아래 예제를 살펴보세요.
<!DOCTYPE html>
<html>
<head>
<title>Understanding JavaScript void(0)</title>
</head>
<body>
<a href="javascript:void(0);" ondblclick="alert('Click it twice!')">Click me not once, but twice.</a>
</body>
</html>위 코드에서 javascript:void(0);를 사용한 이유는 링크를 처음 클릭했을 때 페이지가 다시 로드되는 것을 방지하기 위해서입니다.
따라서 이 코드는 링크를 두 번 클릭해야만 동작합니다. 한 번 클릭하면 아무 일도 일어나지 않지만, 더블 클릭 이벤트를 처리하는 ondblclick 이벤트 핸들러를 사용했기 때문에 두 번 클릭하면 경고 창(alert)이 화면에 나타납니다.
핵심 정리
void 연산자는 표현식을 평가하더라도 결과값 대신 항상 undefined를 반환하기 때문에, <a> 태그의 href 속성에서 페이지 이동이나 새로고침을 막는 용도로 자주 사용됩니다. 다만 최신 웹 개발에서는 접근성과 유지보수 측면을 고려해 event.preventDefault() 같은 대안을 사용하는 것이 권장됩니다.