자바스크립트에서 void(0)의 의미와 활용과 대체 방법

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건, 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

JavaScript에서 void 연산자는 주어진 표현식을 평가한 후에 undefined를 반환하는 특수한 연산자이다. 이로써 함께 사용되는 코드는 JavaScript 엔진에서 실행 가능한 형태로 해석되는데 특히, 링크 클릭 시 페이지가 새로고침되지 않도록 하거나 클릭 이벤트의 기본 동작을 막는 데에 주로 활용되며, 이를 위해 void(0) 표현식이 주로 쓰이고 있다.

 

void 연산자
void는 JavaScript의 연산자 중 하나로, 특정 표현식을 평가하고 undefined를 반환하며, 보통은 void(0) 형태로 사용된다.

1. 링크 클릭 시 페이지 새로고침 방지

 

<a href="javascript:void(0);" onclick="doSomething()">Click me</a>

 

위 예제에서 링크를 클릭하면 doSomething 함수가 호출되지만, href 속성에 javascript:void(0);를 사용하여 페이지가 새로고침되지 않도록 한다.

 

2. 클릭 이벤트에서 기본 동작 막기

<button onclick="void(0);">Click me</button>

이 예제에서 버튼을 클릭하면 아무런 동작이 일어나지 않도록 하기 위해 void(0)를 사용했다.

 

하지만, 현대 웹 개발에서의 사용 제한을 통해 사용되었던 void(0)는 현대 웹 개발에서는 더 이상 권장되지 않는다. 대신, return false;나 event.preventDefault();을 사용하는 것이 더 일반적이다.

미사용된 값: void는 항상 undefined를 반환하므로, void(0)을 사용하는 것은 사실상 undefined를 반환하는 것과 동일하다.

그렇기 때문에 이벤트 핸들러에서 return false; 또는 event.preventDefault();를 사용하여 기본 동작을 막는 것이 더 효과적이다.

 

1) html에서

<a href="#" onclick="doSomething(); return false;">Click me</a>

 

또는

 

2) JavaScript에서

document.getElementById("myButton").addEventListener("click", function(event) {
  event.preventDefault();
  // 다른 작업 수행
});

 

이렇게 대체 방법을 사용하는 것이 코드를 더 명확하고 이해하기 쉽게 만는다.