2017-11-06(Javascript : javascript:void(0)란 ?)

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

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

<a herf="javascript:void(0)"></a>

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

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

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

링크이동을 하지 않기 위한 방법으로는 href 값에 #을 이용하는 방법 역시 링크 이동이 일어나지 않는다는 점은같다. 하지만 #를 사용하게 된다면, 타겟page 즉, 이동되는 페이지는 url 최상단인 페이지로 이동하게 되는것이다.

#사용하여 최상단으로 이동하지 않게 하기 위해서는 

<a herf="#" onClick="function(); return false;"></a>