AWS ECR + Docker의 간단한 사용 흐름과 몇가지 docker 명령어를 정리합니다.
2018-12-16
Javascript의 void operator 에 대하여 알아봅니다.
2018-10-18
Explanation
오랜만에 포스팅을 하네요, 저는 주로 Webpack과 Babel을 사용해서 ES6+ 문법으로 코드를 작성하는데요. 우연히 Webpack으로 bundle된 파일을 보다가 void 연산자를 보게 되었습니다.
정확하게 기억은 안나는데 대략 아래와 같은 상황이에요.
|
1 2 3 4 5 |
// 트랜스파일 전 코드 let test; // 트랜스파일 후 코드 var test = void 0; |
그리고 거의 사용하지 않았던 void 연산자여서 문득 궁금증에 조금 알아보고 글로 정리해보려 합니다.
void 연산자는 뒤에 나타나는 표현식을 실행하고 무조건 undefined를 리턴합니다.
예를 들자면
|
1 2 3 4 5 6 7 8 9 10 |
let test = void(1+2); console.log(test); // undefiend // 1+2 를 수행하지만 test 변수에는 undefined 가 됩니다. let test2 = void(test = 10); console.log(test2); // undefiend console.log(test); // 10 |
딱 봤을때.. 이걸 언제쓰나.. 싶을 수 있는데요. 온라인 상에서도 사람들의 주고 받는 대화를 보면 ‘이제는 도태되어 사용되지 않는다’ 라는 말도 보일 정도에요.
하지만 Babel이 굳이 사용하고 있는 걸 보면 알아두는게 좋겠다 싶어요.
그나마 많이 사용되는 것으로 보이는 것은 a 태그에서 href 기능을 무효화할 때 인거 같아요.
예를 들자면
|
1 |
<a href="javascript:void(0)">링크</a> |
이렇게 하면 저 링크를 클릭하여도 페이지 이동이나 링크가 동작하지 않는답니다.
굳이 다른 방법들로는 href=”#”을 넣는 방법이 있는데, 그럼 대신 페이지 상단으로 이동하게 되고요. 그걸 막기위해 #null을 사용하기도 한답니다.
여기에서 null 자체가 딱히 의미가 있는건 아니고요, href=”#abc” 라고 적으면 엘리먼트의 id 값이 abc 인 곳으로 페이지 스크롤이 이동하는데요, 엘리먼트 id로 null을 잘 사용하지 않기도 하고 의미적으로도 맞기 때문에 사용하는 거 같아요.
만약 <div id=”null”>.. 을 사용한다면.. 다른 값을 넣어줘야 겠죠?
그런데 이것도 애매한 부분이 많아요 SPA를 개발하다보면 은근 url hash(#) 값을 이용해서 사용하는 경우도 많있고 그 밖에도 등등…
그런데… MDN의 글을 봤을때 javascript:… 도 그렇게 좋은 방법은 아닌거 같아요.
인터넷에 검색을 해봤을때 이런저런 사용에 대해 몇가지 더 살펴볼 수 있었는데요. 대부분 애매한 부분이 많이 있는거 같아요. 그리고 그중에서 제가 생각하기에 의미가 있는 사용은 완전한 undefined의 보장하는 부분인 거 같아요.
오래된 브라우저(IE8이하)에서는 전역에 undefined를 변수로 선언할 수 있다고 하네요. 예를 들면
|
1 2 3 4 5 |
var undefined = 'test'; var test; console.log(Boolean(test === undefined)); // IE8 이하의 브라우저 false // 그 이상의 브라우저 true |
직접 IE8 이하의 브라우저에서 테스트해보진 않아서 확실하진 않아요.
하지만 최신 브라우저를 사용한다고 해도 아래와 같은 상황도 만들어 볼 수 있답니다. (거의 없겠지만..)
|
1 2 3 4 5 6 |
(function() { var undefined = 'test'; var test; console.log(Boolean(test === undefined)); // false })(); |
위와 같이 undefined는 지역 변수로는 선언될 수 있답니다.
사실 몰랐는데, void로 IIFE(즉시 실행 함수 표현)을 쓸 수도 있더라고요.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
(function() { var undefined = 'test'; console.log(undefined); })(); void function() { var undefined = 'test'; console.log(undefined); }(); // test // test |
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
