a href="#", void(0) 의 의미 차이점

⚓ #, javascript:, void(0); 차이점

---

이 글은 anchor tag의 href 속성만 다룹니다.

링크로 이동시켜주는 앵커태그의 href 속성은 작성된 value값으로 이동시켜주는 HTML태그입니다.

간단하게 속성 살펴보기

URL 이동

특정 주소를 작성하면 해당 페이지로 이동해주는 역할을 합니다.

<a href="http://naver.com">네이버 이동</a>

이렇게 작성했을 경우, 화면에 렌더링 된 네이버 이동 텍스트를 클릭하면 네이버로 이동합니다.

스크롤 이동

다른 태그에 작성된 아이디 값을 추가하여 스크롤을 해당 위치로 이동시킬 수 있습니다.

<div id="obj"><div>
<a href="#obj">OBJ로 이동 </a>

이같은 경우는 다른 페이지로 이동하는 것이 아니라, 열려진 페이지에서 obj라는 id값을 가진 요소 위치로 스크롤을 이동시킵니다.

href="#, #none, javascript:void(0)" 차이점

태그는 로 사용해야 하고, 어느 홈페이지 URL도, id값 작성도 해야하지 않는 경우엔 어떻게 할까요?

그냥 href="" 로 비워두면 될까요?

❌ NO ❌

비워둘 경우엔 유효성 오류가 나기에 좋은 코드가 아닙니다.

그래서 비워두지 않고 아래와 같은 값을 넣어줍니다.

<a href="#"></a>
<a href="#none"></a>
<a href="javascript:;"></a>
<a href="javascript:void(0);"></a>

이 중에 아무거나 쓰면 될까요?

❌ NO ❌

차이점이 있습니다.

a href="#"
#만 쓸 경우에는 이 태그를 누르면 스크롤이 어디에 있든 최상단으로 이동합니다. 디자이너나 개발자에게 보여주는 퍼블리싱용일지 언정 이렇게 사용하면 잘못 눌렀을 때 불편하겠죠?

a href="#none"
샵 뒤에 아이디로 쓰지 않는 텍스트를 넣습니다. 그러면 어느 오브젝트로도 이동하지 않고, 스크롤 이동도 없습니다.

a href="javascript:;"
자바스크립트라고 작성하였지만 아무런 일도 생기지 않습니다. 스크롤 이동도, undefined 발생도 없습니다.

a href="javascript:void(0);"
void 안에 0말고 영문, 숫자도 사용가능합니다. 이 또한 a태그의 이동기능을 무력화시킵니다.
그러나 void 는 undefined를 리턴하는 연산자입니다. javascirpt:는 브라우저에게 뒤에 작성된 함수를 실행시키는 의미를 담고 있습니다. 그러다면 브라우저에게 void(0) 연산자를 실행하라고 말하는 의미겠죠?
그러면 a태그의 기본 기능은 작동되지 않겠지만 undefined를 리턴하기에 좋은 방법은 아니겠습니다.

The void operator evaluates the given expression and then returns undefined.

void 2 == '2';   // (void 2) == '2', returns false
void (2 == '2'); // void (2 == '2'), returns undefined

javascript:;

지금까지의 글로는 이 친구가 제일 괜찮아 보입니다.
저도 혼란이 옵니다…😓
하지만 stackoverflow에서 더 명확한 방법을 알려준 것 같습니다.

👉🏻a href 에는 무엇을 쓰는게 맞나요?

<a href="#" onclick="return false;">nothing hapeen</a>

href에 #만 작성했을 때의 스크롤이 위로 올라가는 문제점을 return false로 무력화했습니다.
a 태그의 기본기능도 사용하지 않고, 자바스크립트에게도 명확하게 어떠한 기능을 하지 않게끔 하네요.

잠깐! 과 의 차이는?

지금까지의 고민들은 앵커태그를 써야만 할 때의 이야기입니다.

앵커태그를 쓰지 않아도 된다면 태그 변경을 고려해보는 방법도 있습니다.

참고

stackoveflow: what does javascript:void(0) mean?