[자바스크립트] javascript:void(0)이란?

javascript:void(0)

javascript:void(0)은 undefined를 반환해주는 함수다.

 

---

 

undefined를 반환해주는 함수, javascript:void(0)를 왜 사용할까?

대부분 javascript:void(0)를 검색해서 들어온 분들이라면 앵커 태그 안에서 왜 사용되는지가 궁금할 거다.

 

<a href="javascript:void(0);">개발자 퉁이리</a>

다음과 같은 하이퍼링크를 WEB에서 클릭하면 어떻게 될까?

 

결론부터 말하면 아무일도 일어나지 않는다.

 

 

---

 

🤔 아무일도 일어나지 않는 javascript:void(0)를 왜 사용할까?

1️⃣

<a href="#">개발자 퉁이리</a>

2️⃣

<a href="javascript:void(0);">개발자 퉁이리</a>

 

위 1️⃣과 2️⃣ 코드의 차이점이 무엇일까?

당연히 생긴 것부터 다르다. 그거 빼고.

 

 

1️⃣번은 하이퍼링크 클릭 이벤트 발생 시 해당 페이지의 최상단으로 스크롤된다.

몸소 경험해보고 싶으신 분이 있을 거 같다.

 

---

1️⃣번 링크

<a href="#">개발자 퉁이리</a>

 

개발자 퉁이리

---

 

 

그렇다면 2️⃣번 코드인 javascript:void(0)은?

하이퍼링크 클릭 이벤트 발생 시 아무 일도 일어나지 않는다.

 

---

2️⃣번 링크

<a href="javascript:void(0);">개발자 퉁이리</a>

 

개발자 퉁이리

 

---

 

 

3️⃣

<a href="#none">개발자 퉁이리</a>

그러면 귀찮게 2️⃣번 사용하지 않고 3️⃣번 코드 사용하면 아무일도 안 일어나는데요????

 

---

3️⃣번 링크

<a href="#none">개발자 퉁이리</a>

 

개발자 퉁이리

 

---

 

 

3️⃣번 코드는 추천하지 않는다.

추천하지 않는 이유는 none이라는 id를 가진 요소가 생길 가능성도 존재한다.

이 가능성을 아예 없애기 위해 2️⃣번 코드를 지향하는 것을 추천한다.

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!