JavaScript 링크에 '#'과 'javascript:void(0)', 무엇을 사용해야 할까?

두 방식 중 'javascript:void(0)'가 확실히 더 나은 선택입니다. 실행 속도 면에서도 유리하기 때문입니다. Google Chrome의 개발자 도구를 활용해 두 예제를 직접 실행해 보면, 'javascript:void(0)' 방식이 단순히 '#'만 사용하는 방식보다 더 적은 시간이 소요되는 것을 확인할 수 있습니다.

javascript:void(0)의 용도

웹 페이지에 표현식(expression)을 삽입했을 때 의도치 않은 부작용이 발생한다면, JavaScript void를 사용해 이를 제거할 수 있습니다. href 속성에 'javascript:void(0)'를 추가하면 undefined 원시 값(primitive value)이 반환됩니다.

void 연산자는 주어진 표현식을 평가한 후 undefined를 반환하는 역할을 합니다. 즉, void(0)를 사용하면 undefined 원시 값을 얻게 되며, 이를 통해 링크 클릭 시 아무런 동작도 일어나지 않도록 만들 수 있습니다.

따라서 void(0)는 하이퍼링크와 함께 사용되어 undefined 원시 값을 얻는 용도로 활용됩니다. 실제로 빈 링크를 처리할 때 널리 쓰이는 방법입니다.

예제 코드

아래 예제는 'javascript:void(0)'를 href에 적용한 링크입니다. 링크를 두 번 클릭하면 알림 창이 나타납니다.

<!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>