[JavaScript]void(0)의 의미

void(0)의 의미

이번 포스팅은 JavaScript에서 제공하는 void 키워드와 void(0)의 의미를 설명합니다.

---

void 연산자

JavaScript에서 void 연산자는 주어진 표현식을 평가 후 undefined를 반환하도록 지시하는 연산자입니다. 여기서 주어진 표현식을 평가한다는 의미는 void 연산자와 함께 작성한 소스 코드가 실행 가능한 코드인지 JavaScript 엔진이 해석한다는 의미입니다.

 

다음 예제는 void 연산자 사용 예제입니다.

let sum = 10 + 10;
console.log(sum); // 20

let sum = void(10 + 10);
console.log(sum); // undefined

10 + 10은 20이지만, void 연산자를 사용하여 주어진 표현식을 평가하면 undefined를 반환합니다.

 

다음 예제는 함수를 호출하는 과정에서 void 연산자를 사용합니다.

const sum = function(a, b) {
  return a + b;
}

const sumResult1 = sum(10, 20);
console.log(sumResult1); // 30

const sumResult2 = void sum(10, 20);
console.log(sumResult2); // undefined

sum() 함수는 두 매개변수의 합을 반환하지만, void 연산자는 sum() 함수의 반환 결과를 무시하고 undefined를 반환합니다.

 

간단히 말해서 void 연산자는 실행되는 코드에 대해 undefined를 반환합니다.

---

void(0)의 실제 의미

a 태그의 href 속성에는 URL을 상대 경로 또는 절대 경로 방식으로 작성합니다. 다음 예제는 절대 경로 방식으로 Naver 이동을 클릭하면, Naver 메인 사이트로 이동합니다.

<a href="https://www.naver.com">Naver 이동</a>

 

href 속성에는 상대 경로 또는 절대 경로 이외에도 다음과 같이 javascript:를 작성할 수 있으며, 웹 개발자라면 때때로 a 태그의 href 속성에 javascript:void(0)라는 코드가 작성된 것을 볼 수 있습니다.

<a href="javascript:void(0);">클릭</a>

 

href 속성에 javascript:를 작성하는 경우 URL을 이동하지 않고 콜론(:) 뒤에 작성된 JavaScript 소스 코드를 해석 후 실행합니다.

<a href="javascript:console.log('Hello');alert('Hello');">클릭</a>

해당 링크를 클릭하면 다음과 같이 콘솔에 Hello와 alert창을 실행합니다.

위 예제에서 확인할 수 있듯이 href 속성에 작성된 코드를 경로가 아닌 JavaScript 코드로 처리합니다.

 

웹 페이지를 개발하다 보면 a 태그는 사용해야 하지만, 다른 페이지로 이동하거나 새로고침 하면 안 되는 경우가 존재할 수 있습니다. 이러한 경우 href 속성에 javascript:void(0)을 작성하여 아무런 동작을 하지 않도록 할 수 있습니다.

<a href="javascript:void(0);">클릭</a>

---

void를 사용해야 하는 경우

void 연산자는 JavaScript ES 버전이 개선되면서 더 이상 사용되지 않고 있습니다.

ES5 이전에는 다음 예제처럼 undefined 키워드에 값을 할당할 수 있었으며, true를 반환했습니다.

undefined = 10;

10 === undefined; // true

하지만, ES5부터 undefined는 쓰기가 불가능한 읽기 전용으로 개선되었으며, 더 이상 void 연산자가 필요하지 않게 되었습니다.

 

a 태그의 기본 동작을 방지하기 위해 href 속성에 javascript:void(0)를 작성하는 것보다 button 태그를 사용하는 것을 권장하며, 마우스 커서가 a 태그처럼 동작해야 한다면 CSS를 수정하는 것이 낫습니다.