JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

Symbol Object
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
﻿AI﻿
To get an optional description of the symbol object.
2
﻿AI﻿
It changes the object to async iterable.
3
﻿AI﻿
To check whether the constructor object counts the object as its instance.
4
﻿AI﻿
It determines that while using the array.concat() method array should be concatenated as an object or flattened array.
5
﻿AI﻿
Returns an iterator of the symbol.
6
﻿AI﻿
Matches the regular expression with the string.
7
﻿AI﻿
Returns all matches of the regular expression with the string.
8
﻿AI﻿
To replace a substring.
9
﻿AI﻿
To get an index of the matches value.
10
﻿AI﻿
To create a derived object.
11
﻿AI﻿
It specifies the method that splits string from the indices where regular expression matches.
12
﻿AI﻿
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
﻿AI﻿
To search for a given symbol.
2
﻿AI﻿
To retrieve a key from the global symbol registry.
3
﻿AI﻿
To convert the symbol into the string.
4
﻿AI﻿
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.
﻿
﻿
﻿

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

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

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Symbol Object

JavaScript Symbol

Syntax

Symbol Properties

Symbol Methods

Examples

Example: Creating a Symbol

Output

Example: Accessing Symbol Description

Output

Example: Each Symbol is Unique

Output

Example: Using Symbol as an Object Key

Output

Benefits of using Symbols