Original article: JavaScript Void 0 – What Does javascript:void(0); Mean?
Void란 단어를 사전에서 찾아보면 “완전히 비어있는 공간”이라는 뜻을 찾아볼 수 있습니다. 하지만 이 단어를 프로그래밍에서 사용한다면 “아무것도” 반환하지 않는 걸 확인할 수 있습니다. 정확히 말하면, “빈 값”을 반환합니다.
void 키워드란?
함수가 비어있단(void) 뜻은, 그 함수가 아무것도 반환하지 않은 것을 의미합니다. 이것은 자바스크립트에서 함수가 직접적으로 undefined을 반환하는 것과 비슷합니다.
function und() {
return undefined;
}
und();
또는 다음과 같이 작성하여 간접적으로 undefined을 반환할 수도 있습니다.
function und() {}
und();
2개의 숫자를 더하거나, 숫자 5개의 평균을 구하는 등의 표현식(Expressions)이나 문장(Statements)을 위의 함수에서 사용해도, 그 결과가 반환되지 않습니다.
이제 우리는 void 키워드가 무엇인지 압니다. 그렇다면 javascript:void(0)은 무엇일까요?
javascript:void(0)란?
만약 javascript:void(0)를 반으로 나눈다면, javascript:와 void(0)가 됩니다. 각 부분에 대해 자세히 살펴보겠습니다.
javascript:
이것은 가상 URL이라고 할 수 있습니다. 브라우저에서 <a>태그의 href의 값으로 javascript:을 받는다면 이 값을 참조된 경로로 취급하지 않고, 쌍점(:) 뒤에 오는 것을 자바스크립트의 코드로 해석합니다.
예를 들어,
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
“Link”를 클릭하면 결과는 다음과 같습니다.
위에서 본 것처럼, 브라우저는 href를 참조된 경로로 취급하지 않습니다. 대신 “javascript:” 이후부터 쌍반점(;)을 기준으로 나눠서 각각의 자바스크립트의 코드로 처리합니다.
void(0)
void 연산자는 주어진 표현식을 평가하고 undefined를 반환합니다.
예를 들어,
const result = void (1 + 1);
console.log(result);
// undefined
1 + 1의 연산은 실행이 되지만 undefined가 반환됩니다. 또 다른 예제를 통해 확인해보겠습니다.
<body>
<h1>Heading</h1>
<script>
void ((document.body.style.backgroundColor = "red"),
(document.body.style.color = "white"));
</script>
</body>
위 코드의 결과는 다음과 같습니다.
다음은 또 다른 예시입니다.
console.log(void 0 === undefined);
// true
javascript:와 void(0)의 결합
때에 따라 링크를 클릭했을 때, 다른 페이지로 이동하거나 페이지가 다시 로딩되는 것을 원하지 않을 때가 있습니다. javascript:을 사용하면 현재 페이지에 아무런 변화 없이 코드를 실행할 수 있습니다.
void(0)를 사용하는 것은 아무것도 하지 말라는 뜻입니다. 즉, 다시 로딩하지 않고, 경로를 이동하지 않고, 어떤 코드도 실행하지 말라는 것과 같습니다.
예를 들어,
<a href="javascript:void(0)">Link</a>
“Link”라는 단어는 브라우저에서 링크로 처리됩니다. 예를 들어 포커스를 줄 수는 있지만 “Link”를 클릭하더라도 새 페이지로 이동하지 않습니다.
0은 void에게 전달된 인수(Arguments)이며, 아무것도 하지 않고, 아무것도 반환하지 않습니다.
위에서 보다시피, 자바스크립트 코드 또한 void메서드에 인수로 전달될 수 있습니다. 이렇게 하면 링크 요소가 코드를 실행할 수 있지만 여전히 동일한 페이지를 유지합니다.
예를 들어:
<a
id="link"
href="javascript:void(
document.querySelector('#link').style.color = 'green'
)"
>Link</a
>
“Link” 버튼을 클릭하면 다음과 같은 결과가 나타납니다.
void를 사용하면 브라우저에 아무것도 반환하지 말라고 (또는 undefined를 반환하라고) 지시합니다.
javascript:void(0)를 사용한 또 다른 사례는, 때때로 <a>태그를 사용해 링크를 클릭했을 때, 자바스크립트의 코드를 실행하고 싶지만, 경로를 바꾸는 게 불필요한 경우가 있습니다. 이럴 때, 실행하고 싶은 표현식을 void에 인수로 전달하면 됩니다.
결론
이 짧은 글에서 우리는 void연산자가 무엇인지, 어떻게 작동하는지, <a>태그 속성(Attributes)의 href에서 가상 URL인 javascript:가 어떻게 사용되는지 알아봤습니다.
이것은 클릭 시 페이지가 다른 페이지로 이동하거나 현재 페이지를 다시 로딩하지 않는 확실한 방법입니다.