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

JavaScriptのSymbol（シンボル）とは？特徴と基本的な使い方を解説

JavaScriptにおけるSymbol（シンボル）は、ES6（ECMAScript 2015）で新たに導入されたプリミティブデータ型の一つです。シンボルは呼び出されるたびに必ず完全に一意（ユニーク）な値を返し、組み込みのSymbol()ファクトリ関数を使って生成します。

Symbolの主な特徴

  • 文字列や数値と同じくプリミティブ型として扱われる
  • Symbol()を呼び出すたびに、たとえ同じ引数（説明用の文字列）を渡しても、必ず異なる新しいシンボルが生成される
  • オブジェクトのプロパティキーとして利用でき、名前の衝突を防ぐことができる

JavaScriptシンボルのサンプルコード

以下のコードでは、同じ文字列「test」を渡して2つのシンボルを作成し、両者が等しくないことを確認しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18;
      color: blueviolet;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript symbols</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、シンボルの表示と比較が行われます</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let sym1 = Symbol("test");
   let sym2 = Symbol("test");
   BtnEle.addEventListener("click", () => {
      console.log(sym1);
      console.log(sym2);
      if (sym1 !== sym2) {
         resEle.innerHTML = "The symbols are not equal";
      }
   });
</script>
</body>
</html>

実行結果

JavaScriptのSymbol（シンボル）とは？特徴と基本的な使い方を解説

「CLICK HERE」ボタンをクリックし、コンソールの出力を確認すると次のようになります。

JavaScriptのSymbol（シンボル）とは？特徴と基本的な使い方を解説

コンソールには Symbol(test) が2つ表示されますが、見た目が同じでもこれらは別々の独立したシンボルです。そのため、厳密不等価演算子（!==）による比較では true となり、画面には「The symbols are not equal」というメッセージが表示されます。

このように、シンボルは同じ説明文字列を持っていても互いに等しくならないため、ライブラリ間でのキー名の競合回避など、一意性が求められる場面で活用されています。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2