href 속성에 javascript void:(0) 사용하는 이유

웹페이지를 보면 자바스크립트의 코드인 javascript:void(0)를 인라인 형태로 사용된 것을 자주 볼 수 있다. 이 코드의 역할은 무엇이고 어떤 경우에 사용되는지 알아보도록 하겠다. 먼저 이 코드는 어디서 볼 수 있을까? 바로 내부링크가 위치한 a 태그의 속성으로 사용된 것을 흔히 보게된다. 예를 들어 아래와 같은 경우이다.

우선 이 코드를 실행하면 어떻게 나타나는지 콘솔창에 입력해보겠다. 그 결과 아래와 같이 나타난다.

보는 것처럼 undefined를 반환해주는 함수라는 것을 알게되었다. 그렇다면 왜 이 코드를 사용하는 것일까?



# void(0)을 사용하는 이유는? 위에 결과 보여주는 것처럼 그 이유는 바로 undefined를 얻기 위함이다. 즉 해당하는 링크가 정상적으로 동작하지 않게 만들기 위하여 이처럼 undefined를 사용한다고 보면 된다.

좀 더 자세하게 얘기하자면... 우리는 내부 link 태그를 사용하면서 경우에 따라 링크를 사용하기도... 때로는 제거하기를 원한다. 링크 태그인 a에 css 스타일이 있는 경우에 link 태그를 그대로 유지해야하므로 태그는 가지면서 실제 클릭 이벤트는 작동하지 않도록 하기 위함이라 하겠다.

참고로 링크 이동을 하지 않기 위한 방법으로 아래와 같이 다른 방법도 존재한다. #을 이용하는 방법 역시 링크 이동이 일어나지 않는다는 점은 같다.

해쉬기호인 #은 뒤에 따른 값을 id로 가진 위치로 이동하는 역할을 한다. 하지만 이렇게 #을 단독으로 사용하면 아무런 액션이 발생하지 않게된다.
​​​​​​​

# 링크가 없으면 되지 않을까에 대한 궁금증

해쉬기호인 # 또는 void(0) 대신에 링크 주소가 없다면 똑같은 기능을 구현하지 않을까? 이렇게 링크 주소만 없는 경우를 테스트해보았다. 결론부터 얘기하면 의도와 다르게 링크는 이동하게 된다. 타겟 페이지, 즉 이동되는 페이지는 url 최상단인 페이지로 이동하게 되는 점 알아두자!