void 연산자

void 연산자는 주어진 표현식을 평가한 다음 undefined를 반환합니다. Baseline Widely available — 2015년 7월부터 여러 브라우저에서 지원되는 잘 정착된 기능입니다.

출처: void operator

본문

void 연산자는 주어진 표현식을 평가한 다음 undefined를 반환합니다.

시도해 보기 (Try it)

const output = void 1;
console.log(output);
// Expected output: undefined

void console.log("expression evaluated");
// Expected output: "expression evaluated"

void (function iife() {
  console.log("iife is executed");
})();
// Expected output: "iife is executed"

void function test() {
  console.log("test function executed");
};
try {
  test();
} catch (e) {
  console.log("test function is not defined");
  // Expected output: "test function is not defined"
}

구문 (Syntax)

void expression

설명 (Description)

이 연산자는 값을 만들어 내는 표현식을, undefined로 평가되는 표현식이 필요한 위치에서 평가할 수 있게 해 줍니다.

void 연산자는 보통 undefined 원시 값을 얻기 위해 사용되며, 대개 void(0)(void 0과 동등)을 사용합니다. 이런 경우 전역 변수 undefined를 사용할 수도 있습니다.

void 연산자의 우선순위를 고려해야 하며, 괄호가 void 연산자 뒤에 오는 표현식의 해석을 명확히 하는 데 도움이 될 수 있다는 점에 유의하세요:

void 2 === "2"; // (void 2) === '2', returns false
void (2 === "2"); // void (2 === '2'), returns undefined

예제 (Examples)

즉시 실행 함수 표현식 (IIFE)

즉시 실행 함수 표현식(IIFE)을 사용할 때, function 키워드는 문(statement)의 맨 처음에 올 수 없습니다. 그렇게 되면 함수 선언으로 파싱되어, 호출을 나타내는 괄호가 도달할 때 구문 오류가 발생하기 때문입니다 — 함수가 이름 없는 경우 함수가 선언으로 파싱되면 즉시 구문 오류가 됩니다.

function iife() {
  console.log("Executed!");
}(); // SyntaxError: Unexpected token ')'

function () {
  console.log("Executed!");
}(); // SyntaxError: Function statements require a function name

함수가 표현식(expression)으로 파싱되려면 function 키워드가 문이 아니라 표현식만 받아들이는 위치에 나타나야 합니다. 이는 표현식만 피연산자로 받는 단항 연산자(unary operator)로 키워드에 접두사를 붙여 달성할 수 있습니다. 함수 호출은 단항 연산자보다 우선순위가 높으므로 먼저 실행됩니다. 그 반환값(거의 항상 undefined)은 단항 연산자에 전달된 후 즉시 버려집니다.

모든 단항 연산자 중에서 void가 가장 좋은 의미를 제공하는데, 함수 호출의 반환값이 버려져야 함을 명확히 알려주기 때문입니다.

void function () {
  console.log("Executed!");
}();

// Logs "Executed!"

이는 함수 표현식을 괄호로 감싸는 것보다 조금 더 길지만, 같은 효과(즉 function 키워드가 문이 아닌 표현식의 시작으로 파싱되도록 강제)가 있습니다.

(function () {
  console.log("Executed!");
})();

이 트릭은 function 키워드로 정의된 IIFE에만 적용된다는 점에 유의하세요. 화살표 함수에 대해 괄호를 피하기 위해 void 연산자를 사용하려 하면 구문 오류가 발생합니다. 화살표 함수 표현식은 호출될 때 항상 주위에 괄호가 필요합니다.

void () => { console.log("iife!"); }(); // SyntaxError: Malformed arrow function parameter list

JavaScript URI

브라우저가 javascript: URI를 따라가면, URI의 코드를 평가한 다음 반환값이 undefined가 아니라면 페이지의 내용을 그 반환값으로 대체합니다. void 연산자를 사용해 undefined를 반환할 수 있습니다. 예를 들어:

<a href="javascript:void(0);">Click here to do nothing</a>

<a href="javascript:void(document.body.style.backgroundColor='green');">
  Click here for green background
</a>

참고: javascript: 의사 프로토콜은 눈에 거슬리지 않는(unobtrusive) 이벤트 핸들러 같은 대안에 비해 권장되지 않습니다.

누출되지 않는 화살표 함수 (Non-leaking Arrow Functions)

화살표 함수는 표현식을 반환하는 중괄호 없는 간결한 문법을 도입합니다. 그 표현식이, 반환값이 undefined에서 어떤 다른 값으로 바뀌는 함수 호출일 경우 의도하지 않은 부작용을 일으킬 수 있습니다.

예를 들어 아래 코드에서 doSomething()이 false를 반환하면, 체크박스를 클릭했을 때 더 이상 체크/체크 해제로 표시되지 않게 됩니다(핸들러에서 false를 반환하면 기본 동작이 비활성화되기 때문).

checkbox.onclick = () => doSomething();

이것은 바람직하지 않은 동작일 가능성이 높습니다!

안전하게, 함수의 반환값을 사용할 의도가 없을 때는 void 연산자에 전달해서 (예를 들어) API가 변해도 화살표 함수의 동작이 바뀌지 않도록 보장할 수 있습니다.

checkbox.onclick = () => void doSomething();

명세 (Specifications)

void 연산자는 ECMAScript 언어 명세에 정의되어 있습니다.

브라우저 호환성 (Browser compatibility)

이 기능은 대부분의 현대 브라우저에서 널리 지원됩니다(Baseline Widely available). 자세한 호환성 표는 MDN의 브라우저 호환성 섹션을 참고하세요.

더 알아보기

undefined
관련 연산자: typeof, new, this