JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの「void」演算子とは？構文と使い方を実例付きで解説

void演算子とは

void はJavaScriptにおける重要なキーワードの一つで、単項演算子として機能します。オペランド（被演算子）は任意の型を取ることができ、void の後に記述されます。この演算子は「式を評価するものの、その結果（戻り値）を返さない」という動作を指定します。

つまり、void を使うと、式そのものは実行されるものの、常に undefined が返されるため、評価結果が画面やドキュメントに影響を与えることはありません。

構文

void の構文は、以下の2つの形式のどちらでも記述できます。

<head>
   <script>
      <!--
         void func()
         javascript:void func()
         または：
         void(func())
         javascript:void(func())
      //-->
   </script>
</head>

括弧を使う形式 void(func()) の方が、どこまでが評価対象の式なのかが視覚的に分かりやすいという利点があります。

主な用途：「javascript:」URLでの利用

この演算子の最も一般的な使用例は、クライアントサイドの javascript: URL です。リンクの href 属性などに記述することで、「副作用のためだけに式を評価し、評価結果の値をブラウザに表示させない」という挙動を実現できます。

たとえば次の例では、alert('Warning!!!') という式は実際に評価（実行）されますが、その戻り値は現在のドキュメントには読み込まれません。そのため、クリックしてもページが遷移したり内容が書き換わったりすることはありません。

サンプルコード

<html>
   <head>
      <script>
         <!--
         //-->
      </script>
   </head>

   <body>
      <p>下のリンクをクリックしてください。何も反応しません…</p>
      <a href="javascript:void(alert('Warning!!!'))">ここをクリック！</a>
   </body>
</html>

このコードでは、リンクをクリックすると警告ダイアログは表示されますが、ページ自体は一切変化しません。これは void が alert() の戻り値を捨てているためです。

補足：void 0 で確実な undefined を取得する

void は常に undefined を返すため、古くから void 0 と書くことで「確実に undefined を取得する」イディオムとしても使われてきました。これは、グローバル変数の undefined が上書き可能だった時代（ES5以前）に特に有効な手法でした。

また、モダンな開発では href="javascript:void(0)" を使って「クリックしても何も遷移しないプレースホルダーリンク」を作る用法も知られています。ただし現在では、代わりに <button> 要素を使うことや、イベントハンドラ内で preventDefault() を呼ぶことがベストプラクティスとされています。

  1. JavaScriptの感嘆符（!）演算子とは？論理否定の基本と使い方

    JavaScriptにおける感嘆符（!）は、論理否定（NOT）演算子と呼ばれる単項演算子です。式や値の前に付けることで、その真偽値を反転させます。つまり、true は false に、false は true に変換されます。 論理否定演算子（!）の動作 「!」演算子は、対象の値がtruthy（真とみなされる値）であれば false を返し、falsy（偽とみなされる値）であれば true を返します。 falsyな値には以下のようなものがあります。 false 0（数値のゼロ） ""（空文字列） null undefined NaN サンプルコード 以下のコードを実行

  2. JavaScriptのビットごとのOR（|）演算子とは？使い方をわかりやすく解説

    JavaScriptにおけるビットごとのOR（|）演算子は、2つの数値を2進数のビット列として比較し、対応するビットのどちらか一方でも「1」であれば結果として「1」を返す演算子です。両方のビットが「0」の場合のみ、結果は「0」になります。ビットOR演算の基本ルールビットごとのOR演算は、以下のようなルールで各ビットが評価されます。0 | 0 → 00 | 1 → 11 | 0 → 11 | 1 → 1サンプルコード以下のコードを実行すると、JavaScriptのビットごとのOR（|）演算子の動作を確認できます。この例では、「7」と「1」をOR演算しています。<!DOCTYPE html&