Javascript의 void operator 에 대하여 알아봅니다.

Explanation

오랜만에 포스팅을 하네요, 저는 주로 Webpack과 Babel을 사용해서 ES6+ 문법으로 코드를 작성하는데요. 우연히 Webpack으로 bundle된 파일을 보다가 void 연산자를 보게 되었습니다.
정확하게 기억은 안나는데 대략 아래와 같은 상황이에요.

그리고 거의 사용하지 않았던 void 연산자여서 문득 궁금증에 조금 알아보고 글로 정리해보려 합니다.

1. 정의

void 연산자는 뒤에 나타나는 표현식을 실행하고 무조건 undefined를 리턴합니다.
예를 들자면

2. 일반적 사용

딱 봤을때.. 이걸 언제쓰나.. 싶을 수 있는데요. 온라인 상에서도 사람들의 주고 받는 대화를 보면 ‘이제는 도태되어 사용되지 않는다’ 라는 말도 보일 정도에요.
하지만 Babel이 굳이 사용하고 있는 걸 보면 알아두는게 좋겠다 싶어요.

그나마 많이 사용되는 것으로 보이는 것은 a 태그에서 href 기능을 무효화할 때 인거 같아요.
예를 들자면

이렇게 하면 저 링크를 클릭하여도 페이지 이동이나 링크가 동작하지 않는답니다.

굳이 다른 방법들로는 href=”#”을 넣는 방법이 있는데, 그럼 대신 페이지 상단으로 이동하게 되고요. 그걸 막기위해 #null을 사용하기도 한답니다.
여기에서 null 자체가 딱히 의미가 있는건 아니고요, href=”#abc” 라고 적으면 엘리먼트의 id 값이 abc 인 곳으로 페이지 스크롤이 이동하는데요, 엘리먼트 id로 null을 잘 사용하지 않기도 하고 의미적으로도 맞기 때문에 사용하는 거 같아요.

만약 <div id=”null”>.. 을 사용한다면.. 다른 값을 넣어줘야 겠죠?

그런데 이것도 애매한 부분이 많아요 SPA를 개발하다보면 은근 url hash(#) 값을 이용해서 사용하는 경우도 많있고 그 밖에도 등등…

그런데… MDN의 글을 봤을때 javascript:… 도 그렇게 좋은 방법은 아닌거 같아요.

3. 의미있는 사용

인터넷에 검색을 해봤을때 이런저런 사용에 대해 몇가지 더 살펴볼 수 있었는데요. 대부분 애매한 부분이 많이 있는거 같아요. 그리고 그중에서 제가 생각하기에 의미가 있는 사용은 완전한 undefined의 보장하는 부분인 거 같아요.
오래된 브라우저(IE8이하)에서는 전역에 undefined를 변수로 선언할 수 있다고 하네요. 예를 들면

직접 IE8 이하의 브라우저에서 테스트해보진 않아서 확실하진 않아요.

하지만 최신 브라우저를 사용한다고 해도 아래와 같은 상황도 만들어 볼 수 있답니다. (거의 없겠지만..)

위와 같이 undefined는 지역 변수로는 선언될 수 있답니다.

4. 그밖의 사용

사실 몰랐는데, void로 IIFE(즉시 실행 함수 표현)을 쓸 수도 있더라고요.

참고 링크

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/void
http://2ality.com/2011/05/void-operator.html
https://hackernoon.com/is-void-forgotten-javascript-the-useful-parts-2de88901a1e0