void 演算子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

void 演算子は与えられた式 (expression) を評価し、undefined を返します。

試してみましょう

const output = void 1;
console.log(output);
// 予想される結果: undefined

void console.log("式が評価されました");
// 予想される結果: "式が評価されました"

void (function iife() {
  console.log("IIFE が実行されました");
})();
// 予想される結果: "IIFE が実行されました"

void function test() {
  console.log("test 関数が実行されました");
};
try {
  test();
} catch (e) {
  console.log("test 関数が定義されていません");
  // 予想される結果: "test 関数が定義されていません"
}

解説

この演算子により、何らかの値を生成する評価式を、式が undefined と評価されることが望ましい場面に置くことができます。

void 演算子は、よく単にプリミティブ値 undefined を得る目的で使われ、一般的に "void(0)" と書かれます（これは "void 0" と等価です）。この目的であれば、グローバル変数 undefined を使用することができます。

なお、void 演算子の優先順位を考慮するべきであり、括弧は void 演算子に続く式の解決を明確にするのに役立つとされています。

js
void 2 === "2"; // (void 2) === '2', false を返す
void (2 === "2"); // void (2 === '2'), undefined を返す

例

即時実行関数式

即時実行関数式が使用される場合、 function キーワードは文のすぐ先頭に置くことはできません。そうすると、関数宣言と解釈され、呼び出しを表す括弧に達した時点で構文エラーが発生します。関数に名前が付けられていない場合、関数が宣言として構文解析されると即座に構文エラーとなります。

js
function iife() {
  console.log("実行されました！");
}(); // SyntaxError: Unexpected token ')'

function () {
  console.log("実行されました！");
}(); // SyntaxError: Function statements require a function name

関数を式として構文解析するためには、 function キーワードが、文ではなく式のみを受け入れる位置に現れる必要があります。これは、キーワードの前に単項演算子を付けることで実現することができます。単項演算子はオペランドとして式のみを受け入れます。関数呼び出しは単項演算子よりも優先順位が高いため、最初の（すなわち最も重要な）操作として実行されます。その返値（ほとんどの場合 undefined）は単項演算子に渡すと、直ちに破棄されます。

単項演算子の中で、 void が最もよい意味づけを提供します。関数呼び出しの返値を破棄すべきことを明確に示すからです。

js
void function () {
  console.log("実行されました！");
}();

// Logs "実行されました！"

これは関数式を括弧で囲むよりも少し長いですが、同じ効果が得られます。つまり、 function キーワードが文の開始ではなく式の開始として解析されるように強制するのです。

js
(function () {
  console.log("実行されました！");
})();

ただし、このテクニックは function キーワードで定義されたIIFEにのみ適用されます。アロー関数で括弧を避けるために void 演算子を使用しようとすると、構文エラーが発生します。アロー関数式は呼び出される際に常に括弧で囲む必要があります。

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

JavaScript URI

javascript: URI に対応しているブラウザーでは、 URI の中のコードを評価し、返値が undefined でない限り、返された値でページの内容を置き換えます。 void 演算子は、undefined を返すために使用することができます。

html
<a href="javascript:void(0);">ここをクリックしても何もしません</a>

<a href="javascript:void(document.body.style.backgroundColor='green');">
  ここをクリックすると背景が緑色になります
</a>

メモ: javascript: 擬似プロトコルは控えめなイベントハンドラーなどの代替であり、積極的に使用するべきではないでしょう。