void는 자바스크립트에서 매우 중요한 키워드입니다. 단일 피연산자 앞에 위치하는 단항 연산자(unary operator)로 사용되며, 피연산자의 타입은 어떤 것이든 상관없습니다. 이 연산자는 표현식을 평가하되, 그 결과값은 반환하지 않도록 지정하는 역할을 합니다.
void 연산자의 기본 문법
void 연산자는 아래 두 가지 형태 중 하나로 작성할 수 있습니다.
<head>
<script>
<!--
void func()
javascript:void func()
또는:
void(func())
javascript:void(func())
//-->
</script>
</head>
즉, 함수 호출 뒤에 바로 붙이는 형태인 void func()와, 괄호로 감싸는 형태인 void(func()) 두 가지 모두 유효합니다.
void의 대표적인 용도
void 연산자가 가장 널리 사용되는 곳은 클라이언트 측 javascript: URL입니다. 이 경우 브라우저가 평가된 표현식의 값을 화면에 표시하지 않고, 오직 부수 효과(side-effects)만을 위해 표현식을 실행할 수 있게 해줍니다.
예를 들어 아래 코드에서 alert('Warning!!!') 표현식은 실제로 실행되지만, 그 결과값이 현재 문서(document)에 다시 로드되지는 않습니다.
실전 예제
다음 예제는 링크를 클릭해도 페이지가 전환되거나 값이 출력되지 않는 것을 보여줍니다.
<html>
<head>
<script>
<!--
//-->
</script>
</head>
<body>
<p>아래 링크를 클릭해 보세요. 아무 반응도 일어나지 않습니다...</p>
<a href="javascript:void(alert('Warning!!!'))">클릭하세요!</a>
</body>
</html>
코드 설명
위 예제에서 <a> 태그의 href 속성에 javascript:void(...)가 사용되었습니다. 링크를 클릭하면 경고창(alert)이 뜨지만, void가 표현식의 반환값을 undefined로 만들기 때문에 브라우저는 어떤 값도 새 창이나 현재 문서에 표시하지 않습니다.
추가 팁: undefined 확보 용도
void 연산자는 ES5 이전 환경에서 재정의 가능했던 전역 undefined 값을 안전하게 얻기 위해 void 0 형태로 사용되기도 했습니다. 최신 자바스크립트에서는 필요성이 줄었지만, 여전히 라이브러리 코드나 빌드 도구(minifier)에서 자주 볼 수 있는 관용구입니다.