GeezerVison is showing www.tutorialspoint.com — JavaScript - The Symbol Object

Selected Reading

JavaScript - The Symbol Object

Quiz

JavaScript Symbol

In JavaScript, Symbol is a primitive data type and it was introduced in ECMAScript 6 (ES6). It can be created using the 'Symbol' constructor.

Symbols are immutable and unique, unlike to other primitive data types like strings or numbers. They are especially helpful in situations where a unique identifier is required since they offer a way to create private object properties and avoid naming conflicts. Here, we have listed the properties and methods related to the symbol.

The points given below you should keep in mind while using the symbol.

Each symbol contains unique values.
The symbol is immutable. It means you can't update the value of the symbol.
Symbols are used to define unique object properties.
The type of the symbol can't be changed.

Syntax

You can follow the syntax below to create a new symbol using the Symbol() function. −

const sym = Symbol([description]);

Here description is an optional parameter. It specifies the symbol description, which you can access using the 'description' property.

Symbol Properties

In the following table, we have listed all the properties of Symbol −

Sr.No.	Name & Description
1	description To get an optional description of the symbol object.
2	asyncIterator It changes the object to async iterable.
3	hasInstance To check whether the constructor object counts the object as its instance.
4	isConcatSpreadable It determines that while using the array.concat() method array should be concatenated as an object or flattened array.
5	iterator Returns an iterator of the symbol.
6	match Matches the regular expression with the string.
7	matchAll Returns all matches of the regular expression with the string.
8	replace To replace a substring.
9	search To get an index of the matches value.
10	species To create a derived object.
11	split It specifies the method that splits string from the indices where regular expression matches.
12	toStringTag To create a default string description for the object.

Symbol Methods

In the following table, we have listed all the methods of Symbol −

Sr.No.	Name & Description
1	for() To search for a given symbol.
2	keyFor() To retrieve a key from the global symbol registry.
3	toString() To convert the symbol into the string.
4	valueOf() To get the primitive value of the symbol object.

Examples

Example: Creating a Symbol

In the example below, We used the Symbol() function to create a new symbol. Also, we have passed the string argument while defining the sym2 symbol.

You can observe the type of the 'sym1', which is 'symbol', a primitive value.

<html>
   <body>
      <p id="output"></p>
      <script>
         const sym1 = Symbol();
         document.getElementById("output").innerHTML = 
			"The sym1 is: " + sym1.toString() + "<br>" +
         "The type of sym1 is: " + typeof sym1 + "<br>";
         const sym2 = Symbol("description");
         document.getElementById("output").innerHTML += "The sym2 is: " + sym2.toString();
      </script>
   </body>
</html>

Output

When we execute the above script, it will generate an output consisting of the text displayed on the webpage.

The sym1 is: Symbol()
The type of sym1 is: symbol
The sym2 is: Symbol(description)

Example: Accessing Symbol Description

Let's look at the following example, where we are going to use the .description to get the description of the symbol.

<html>
   <body>
      <p id="output"></p>
      <script>
         const sym = Symbol("Welcome to Tutorials Point...");
         document.getElementById("output").innerHTML = 
			"The sym description of the symbol is : " + sym.description;
      </script>
   </body>
</html>

Output

On executing the above script, the output window will pop up, displaying the text on the webpage.

The sym description of the symbol is : Welcome to Tutorials Point...

Example: Each Symbol is Unique

In the example below, we have defined the sym1 and sym2 symbols. After that, we compare both variables and print the message accordingly.

Both symbols look similar but are different, which you can see in the output.

<html>
   <body>
      <p id="output"></p>
      <script>
         const sym1 = Symbol();
         const sym2 = Symbol();
         
         if (sym1 == sym2) {
            document.getElementById("output").innerHTML += "Sym1 and Sym2 are equal.";
         } else {
            document.getElementById("output").innerHTML += "Sym1 and Sym2 are not equal.";
         }
      </script>
   </body>
</html>

Output

After executing, it returns a text indicating that the both the symbols are not equal.

Sym1 and Sym2 are not equal.

Example: Using Symbol as an Object Key

The main purpose of the symbol is to use it as an object key. Here, we have used the 'objId' symbol as a key.

When we print the object by converting it to string or traversing the object properties, it won't print the symbol. So, the symbol can help developers to make object properties private.

<html>
   <body>
      <p id="output">The object is: </p>
      <script>
         const objId = Symbol();
         const person = {
            name: "John Doe",
            age: 30,
            [objId]: "abcd123",
         }
         document.getElementById("output").innerHTML += JSON.stringify(person);
      </script>
   </body>
</html>

Output

If we execute the above program, it will generate an output consisting of the text displayed on the webpage.

The object is: {"name":"John Doe","age":30}

Benefits of using Symbols

Here, we have explained the benefits of using symbols in real-time development.

Unique property keys − Each symbol is unique, even if its description is different. So, you can use the symbol as a key to avoid accidental collision between the keys with the same name. Mainly, it is useful when you need to use the same instance of the object in two different code snippets and need to insert the same properties.
Non-iterable properties − When you add the symbol as a key in JavaScript and traverse the object properties using the for...in loop, the loop doesn't traverse through the symbol keys.
Private Members − You can use the symbol to define the private properties in JavaScript classes.
Avoid overWriting − The symbol is unique, so it avoids overwriting similar properties.

Previous Quiz Next