[개발/자바스크립트] void 연산자

 

토스트(TOAST) UI 오픈소스를 보는 중에 void 0을 사용하는 로직을 보게되었습니다.

순간 이게 어떤 비교를 하고 싶은거지? 어떤 값을 변수에 넣는다는거지? 의문이 들어 찾아보게 되었습니다.

//CASE 1
placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder

//CASE 2
_exports["default"] = void 0;

 

void 연산자의 기본 개념

 

void 연산자는 단항 연산자로서, 주어진 표현식을 실행하고 결과는 무시한 채 undefined를 반환합니다.

 

void의 사용 사례

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

 

 

일반적으로 void 연산자를 모르더라도 a태그를 클릭할 때 페이지 이동을 막기 위해 사용되는 경우로 많이들 접하지 않았을까 생각합니다.

저 역시 저 구문을 아무렇지 않게 사용하고는 했는데, 어떤 결과로 인해 아무 동작을 하지 않았던건지 구글링 해보지 않았던 제 자신을 반성하게 되더군요.....

 

 

그리고 또 다른 사용 사례로는 이 글을 쓰게된 오픈소스에서 처럼 undefined 원시값을 얻기 위해 void 0 또는 void(0)을 사용하는 경우도 있습니다.

 

마무리

 

ES5 이전에는 undefined 키워드에 값을 할당할 수 있었으나, ES5부터 undefined는 쓰기가 불가능한 읽기 전용으로 개선되었으나, 전역 범위인 경우에만 해당된다고 합니다.

전역 범위 이외의 범위에서는 예약어가 아니므로 변수명으로 undefined를 사용할 수 있어 여전히 값을 할당할 수 있습니다.

하지만 어떤 영향도가 있을지 모르지 지양해야겠죠?

 

문제

// 문제1
void 2 == "2";
// 문제2
void (2 == "2");

 

void 연산자에 대해 이해가 되었다면 2가지 문제를 풀어보세요-!

문제 풀이와 결과는 아래를 참고하세요:)

// 문제1
void 2 == "2";
// void 2는 undefined이므로
// undefined == "2" 두 값을 비교하는 로직이 됩니다.
// 따라서 결과는 false 입니다.

// 문제2
void (2 == "2");
// 위 문제와 다르게 괄호가 있으므로
// 2 == "2" 두 값을 비교하는데 자바스크립트에서는 형변환을 알아서 수행하므로
// "2" == "2"로 변환되므로 결과는 true 이지만 void 연산자는 결과를 반환하지 않으므로
// 결과는 undefined 입니다.

 

FIND WORDS

#표현식(Expression)
값으로 평가될 수 있는 문(Statement)이다. 즉 표현식으로 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.