void 연산자란 무엇인가?
JavaScript의 void 연산자는 주어진 표현식을 평가(evaluate)한 뒤, 그 결과와 상관없이 항상 undefined를 반환하는 단항 연산자입니다. 즉, 표현식이 실행되긴 하지만 그 반환 값은 버려지고 오직 undefined 원시 값(primitive value)만 남게 됩니다.
void(0)처럼 0을 인수로 전달하면 undefined 원시 값을 간단하게 얻을 수 있습니다. 사실 괄호 안에는 어떤 값이 와도 결과는 동일하지만, 관례상 0이 가장 널리 사용됩니다.
하이퍼링크에서 void(0) 활용하기
void(0)는 하이퍼링크(<a> 태그)와 함께 사용해 undefined 원시 값을 반환할 수 있습니다. 특히 href="javascript:void(0);" 형태로 작성하면 링크 클릭 시 페이지가 새로고침되거나 이동하는 것을 방지할 수 있어, JavaScript 이벤트만 처리하고 싶은 경우에 유용합니다.
예제 코드
<!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 연산자에 인수가 필요한 것은 아니지만 void(0)처럼 임의의 값을 전달함으로써 표현식을 평가한 후 undefined를 명확하게 반환받고, 이를 통해 불필요한 페이지 이동이나 새로고침 없이 순수하게 JavaScript 동작만 제어할 수 있는 것입니다.