Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

javascript:void(0)란 무엇일까요? 의미와 사용법 총정리

웹 페이지에 표현식을 삽입했을 때 원치 않는 부작용이 발생한다면, 자바스크립트의 void 연산자를 사용해 이를 제거할 수 있습니다. 링크에 javascript:void(0)를 추가하면 undefined라는 원시 값(primitive value)이 반환됩니다.

void 연산자란?

void 연산자는 주어진 표현식을 평가(evaluate)한 뒤, 항상 undefined를 반환하는 역할을 합니다. 즉, void(0)처럼 작성하면 숫자 0을 평가한 후 그 결과와 무관하게 undefined 원시 값을 얻게 됩니다.

이러한 특성 때문에 void(0)는 하이퍼링크와 함께 자주 사용됩니다. 링크를 클릭해도 아무 동작도 일어나지 않도록 기본 동작을 무력화하는 용도입니다.

javascript:void(0)의 주요 용도

  • 페이지 새로고침 방지: 링크 클릭 시 페이지가 다시 로드되는 것을 막습니다.
  • 빈 링크 처리: 실제 이동할 URL이 없는 링크에 href 값을 지정할 때 사용합니다.
  • 부작용 제거: 표현식 실행으로 인한 불필요한 화면 전환이나 동작을 차단합니다.

예제 코드

아래는 javascript:void(0)를 실제로 활용한 라이브 데모입니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Understanding JavaScript void(0)</title>
   </head>
   <body>
      <a href="javascript:void(0);" ondblclick="alert('Click it twice!')">Click me not once, but twice.</a>
   </body>
</html>

코드 설명

위 예제에서 javascript:void(0)는 버튼(링크)을 처음 클릭했을 때 페이지가 새로고침되는 것을 방지하기 위해 사용되었습니다.

코드가 실행되는 방식은 다음과 같습니다. 링크를 한 번 클릭하면 아무 일도 일어나지 않습니다. 하지만 ondblclick 이벤트 핸들러가 등록되어 있기 때문에, 링크를 두 번 클릭하면 알림 창(alert)이 나타납니다.

동작 흐름 요약

  1. 사용자가 링크를 한 번 클릭 → void(0)가 undefined를 반환하여 페이지 리로드 없음
  2. 사용자가 링크를 두 번 클릭 → ondblclick 이벤트 발생 → alert 창 표시

정리

javascript:void(0)는 표현식을 평가하되 undefined를 반환함으로써, 링크의 기본 동작을 막고 싶을 때 유용하게 활용되는 패턴입니다. 다만 최신 개발 환경에서는 접근성과 유지보수 측면에서 event.preventDefault()나 <button> 요소 사용이 권장된다는 점도 함께 기억해 두면 좋습니다.