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

JavaScriptのSymbol.for()関数とは？グローバルシンボルレジストリの仕組みと使い方

Symbol.for()関数は、ランタイム全体で共有されるグローバルシンボルレジストリから、指定されたキーに対応するシンボルを検索するための関数です。

検索の結果、該当するシンボルがすでに登録されていればそれを返し、存在しない場合は新しいシンボルをレジストリに登録したうえで返します。この仕組みにより、異なるスコープやモジュール間でも同じキーを持つシンボルを共有できるようになります。

Symbol.for()とSymbol()の違い

通常のSymbol()呼び出しは、同じ引数を渡しても毎回まったく別の新しいシンボルを生成します。一方、Symbol.for('key')は同じキーを渡せば必ず同じシンボルを返す点が大きな特徴です。これは、Symbol.for()が文字列キーとシンボルを対応付けるグローバルな辞書（レジストリ）を利用しているためです。

  • Symbol('key'): 呼び出すたびに常に新しい一意のシンボルを作成する
  • Symbol.for('key'): グローバルシンボルレジストリを検索し、既存なら再利用、なければ新規作成する

Symbol.for()関数のコード例

以下は、Symbol.for()関数を使って複数のシンボルを作成し、ボタンクリックで画面に表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Symbol.for()のデモ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    div {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Symbol.for()関数</h1>
<div class="sample"></div>
<button class="Btn">クリックしてください</button>
<h3>
上のボタンをクリックすると、作成されたシンボルが表示されます。
</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let symbol = [];
    symbol.push(Symbol.for("New"));
    symbol.push(Symbol.for("Hello"));
    symbol.push(Symbol.for(345));
    document.querySelector(".Btn").addEventListener("click", () => {
        symbol.forEach((item) => (fillEle.innerHTML += item.toString() + "<br>"));
    });
</script>
</body>
</html>

このコードでは、Symbol.for()を使って「New」「Hello」「345」という3つのキーを持つシンボルを配列に格納しています。数値345のように非文字列の値を渡すと、自動的に文字列に変換されてキーとして扱われます。

実行結果

ページを読み込んだ直後の初期表示は次のとおりです。

JavaScriptのSymbol.for()関数とは？グローバルシンボルレジストリの仕組みと使い方

「クリックしてください」ボタンを押すと、以下のように各シンボルの内容が出力されます。

JavaScriptのSymbol.for()関数とは？グローバルシンボルレジストリの仕組みと使い方

出力にはSymbol(New)、Symbol(Hello)、Symbol(345)といった形式でシンボルが表示されます。toString()メソッドによって、各シンボルに関連付けられたキー名を確認できることが分かります。

  1. JavaScriptでのメソッド借用：call()・apply()・bind()の使い方を解説

    JavaScriptでは、call()、apply()、bind()という3つのメソッドを使うことで、あるオブジェクトが持つメソッドを別のオブジェクトが「借用」できます。これは、本来そのメソッドを持たないオブジェクトに対して、thisの参照先を差し替えてメソッドを実行できる便利なテクニックです。 3つのメソッドの違い call()：引数をカンマ区切りで個別に渡し、即座に関数を実行します。 apply()：引数を配列（または配列風オブジェクト）として渡し、即座に関数を実行します。 bind()：thisを固定した新しい関数を返すだけで、即座には実行されません。返された関数は後から好きなタイミン

  2. 【初心者向け】JavaScriptでボタンクリック時に数値を加算するSum関数の作り方

    はじめに 本記事では、ボタンをクリックするたびに指定した値を加算していき、結果を画面に表示するシンプルなJavaScriptの「Sum関数」の実装方法を解説します。onclickイベントとparseInt()を組み合わせることで、わずか数行のコードで動的な加算処理を実現できます。 ボタンの準備 まず、以下のようなHTMLボタンを用意します。 <button type=button onclick=addTheValue(10)>Sum</button> このボタンがクリックされると、引数として10を渡して関数 addTheValue(10) が呼び出されます。つま