[JS] javascript:void(0)란?

javascript:void(0)에서 javascript: 와 void(0)로 나눌 수 있다.

각각의 부분에 대해 알아보자.

 

<a href="javascript:void(0)">링크</a>

 

javascript:

<a> 태그의 href 값으로 javascript:를 받을 때, 이는 경로로 취급하지 않고 쌍점(:) 뒤에 오는 것을 자바스크립트 코드로 해석한다.

주로 href에는 경로를 넣기 때문에, 클릭 시 페이지 이동이 일어난다. 하지만 이 경우에는 이동이 일어나지 않는다.

 

<a href="javascript:console.log('클릭')">링크</a>

'링크'를 누르면 콘솔 창에 '클릭'이 출력된다.

 

 

void(0)

void는 아무것도 반환하지 않는 것을 말한다. 함수에서도 void는 아무런 결괏값도 반환하지 않는 것으로. 호출 시 undefined를 반환한다.

 

const sum = void(5+5);
console.log(sum); // undefined

5+5는 10이지만 void이기에 undefine가 출력된다.

따라서 void(0)도 마찬가지로 아무것도 반환되지 않는 것이다.

 

 

javascript:void(0)

이 두 개를 결합하게 되면, 페이지 이동도 안 하고 코드도 실행 안 하기에 아무런 변화가 없다.

클릭 시 페이지의 변화를 일으키고 싶지 않거나, 아무런 동작을 하지 않기를 원할 때 활용 가능하다.

 

또한 void안에 코드를 작성하게 되면 페이지 이동없이 단순히 자바스크립트 코드만 실행할 수 있다.