JavaScript에서 void 연산자/ "#"과 "void(0)"의 차이점

티스토리 뷰

ALL/Javascript

JavaScript에서 void 연산자/ "#"과 "void(0)"의 차이점

whoAmI_ 2022. 11. 28. 17:57

void 연산자

JavaScript에서 void 연산자는 주어진 표현식을 평가 후 undefined를 반환하도록 지시하는 연산자이다. 여기서 주어진 표현식을 평가한다는 의미는 void 연산자와 함께 작성한 소스 코드가 실행 가능한 코드인지 JavaScript 엔진이 해석한다는 의미이다.

간단히 말해서 void 연산자는 실행되는 코드에 대해 undefined를 반환한다는 의미이다.

void(0)의 실제 의미

a 태그의 href 속성에는 일반적으로 URL을 상대 경로 또는 절대 경로 방식으로 작성한다.

href 속성에는 상대 경로 또는 절대 경로 이외에도 다음과 같이 javascript:를 작성할 수 있으며, 웹 개발자라면 때때로 a 태그의 href 속성에 javascript:void(0)라는 코드가 작성된 것을 볼 수 있다.

<a href="javascript:void(0);">클릭</a>

href 속성에 javascript:를 작성하는 경우 URL을 이동하지 않고 콜론(:) 뒤에 작성된 JavaScript 소스 코드를 해석 후 실행한다.

<a href="javascript:console.log('Hello');alert('Hello');">클릭</a>

해당 링크를 클릭하면 다음과 같이 콘솔에 Hello와 alert창을 실행하며,

위 예제에서 확인할 수 있듯이 href 속성에 작성된 코드를 경로가 아닌 JavaScript 코드로 처리한다.

웹 페이지를 개발하다 보면 a 태그는 사용해야 하지만, 다른 페이지로 이동하거나 새로고침 하면 안 되는 경우가 존재할 수 있다. 이러한 경우 href 속성에 javascript:void(0)을 작성하여 아무런 동작을 하지 않도록 할 수 있다.

<a href="javascript:void(0);">클릭</a>

void 연산자는 JavaScript ES 버전이 개선되면서 더 이상 사용되지 않고 있다.

ES5 이전에는 다음 예제처럼 undefined 키워드에 값을 할당할 수 있었으며, true를 반환했다.

하지만, ES5부터 undefined는 쓰기가 불가능한 읽기 전용으로 개선되었으며, 더 이상 void 연산자가 필요하지 않게 되었다.

a 태그의 기본 동작을 방지하기 위해 href 속성에 javascript:void(0)를 작성하는 것보다 button 태그를 사용하는 것을 권장하며, 마우스 커서가 a 태그처럼 동작해야 한다면 CSS를 수정하는 것이 낫다.

아무것도 입력하지 않은 하이퍼링크를 클릭하면 현재 페이지의 갱신이 일어나며,

아무것도 입력하지 않은 하이퍼링크는 현재 페이지 URL이 있는 것과 같은 것으로 처리가 된다.

페이지 갱신이 일어나지 않도록 하려면 하이퍼링크 URL에 뭔가를 입력해서 페이지 페이지 이동을 막아야 한다.

하이퍼링크에서 페이지 이동을 막는 막는 방법은 다음 2가지가 있다.

<a href="#">하이퍼링크</a> <a href="void(0)">하이퍼링크</a>

#

"#"의 정확한 용도는 페이지 안에 있는 ID가 있는 요소로 위치로 이동하는 기능이다.

"#test는 "test" ID를 가진 요소로 위치로 이동한다. 정확하게는 "현재 페이지 URL#test"와 같다.

"#ID" 사용 방법의 가장 중요한 특징은 페이지 URL이 같으면 전체 페이지 갱신 없이 ID가 있는 요소로 위치를 이동한다는 점이다.

그리고, "#" 뒤에 ID를 따로 정하지 않으면 웹 페이지 맨 위(문서 최 상위)를 가리키게 된다.

스크롤이 있는 페이지를 작성할 때 스크롤 이동까지 막고 싶으면 "#" 뒤에 존재하지 않는 ID를 붙여주면 된다.

하이퍼링크에 "#"을 그대로 유지하고 싶으면 다음과 같이 onclick 이벤트 처리 방법을 사용할 수 있습니다.

<a href="#" onclick="noaction()">하이퍼링크</a> function noaction(){ event.preventDefault(); // 이벤트 버블링 차단 return false; }

이벤트 순서상 onclick 이벤트 함수 호출이 먼저 되고 그 뒤에 <a> 태그의 하이퍼링크 클릭이 실행된다.

중요한 것은 onclick 이벤트 처리 함수이다. 함수를 정의할 때 끝 부분에 다음과 같이 이벤트 버블링을 차단하는 코드를 넣어주면 하이퍼링크 태그의 클릭 이벤트가 차단된다.

버블링(bubbling) ?

한 요소에 이벤트가 발생하면 해당 요소에 핸들러가 동작하고, 부모요소의 핸들러가 동작한다. 가장 최상단의 부모 요소 를 만날때까지 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

<body>
	<div onclick='alert("div1")'>div1 
    	<div onclick='alert("div2")'>div2 
        	<div onclick='alert("div3")'>div3
        </div> 
    </div> 
</body>

div3 을 누르면 alert 창에 div3 -> div2 -> div1 식으로 버블링 현상이 되는 걸 볼수 있다. 이러한 흐름을 이벤트 버블링 이라고 부른다.

이벤트 버블링은 <html> 요소를 거쳐 document 객체를 만날 때 까지 각 노드에서 모두 발생하는데 이러한 이벤트 버블링을 막는 방법은 이벤트 객체의 메서드인 event.stopPropagation() 을 사용하면 된다.

javascript:void(0)

함수 호출에서 알 수 있듯이 "void(0)"은 자바스크립트 함수이다.

하이퍼링크에는 페이지 URL 표기 외에 자바스크립트 함수를 표기해서 자바스크립트 함수가 실행되도록 할 수 있다.

하이퍼링크를 클릭하면 URL에 해당하는 페이지 이동을 하는 대신 자바스크립트 함수가 실행된다.

void(0) 함수는 아무런 기능을 하지 않고 함수를 종료한다.

아무런 동작 없이 함수를 종료를 하는 것은 일반 함수로도 구현이 가능하지만, void(0) 함수는 별도로 함수를 작성하지 않아도 동작하는 내장 함수이다.

'ALL > Javascript' 카테고리의 다른 글

[JavaScript] forEach is not a function error (0)	2023.06.29
[한입크기로 잘라먹는 리액트] 자바스크립트 기본 문법 실습 (1)	2023.06.10
VSCode에서 Prettier의 Format on Save가 동작하지 않을 때 해결법 (0)	2023.03.20
[Javascript] 배열함수 Array function (0)	2023.01.01
JSON(JavaScript Object Notation) (0)	2022.12.05

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

시행착오와 배움을 기록하는 공간

티스토리 뷰