es6

Chapter 7: JavaScript Symbols — Unique and Hidden Identifiers in ES6

Chapter 7: The Symbol Type in JavaScript (ES6)

Symbol is a new primitive data type introduced in ES6. It represents a unique and hidden identifier used primarily as object keys to prevent property name conflicts — especially when different parts of code interact with the same object.

🔍 Why Use Symbols?

Consider working in a team or with third-party code, where multiple developers add properties to the same object. A conflict might occur if two properties share the same key. Using Symbol(), we can ensure that each property key is completely unique — even if they share the same description.

🧪 Example 1: Creating Unique Symbols


const symbol1 = Symbol();
const symbol2 = Symbol();

console.log(symbol1 === symbol2); // false
  

Explanation: Even though both symbols are created without a description, they are guaranteed to be unique.

🔑 Example 2: Using Symbols as Object Keys


const symA = Symbol("id");
const symB = Symbol("id");

const user = {};
user[symA] = "Admin";
user[symB] = "Customer";

console.log(user[symA]); // Admin
console.log(user[symB]); // Customer
  

Explanation: The object user has two different properties — both using a symbol with the same description "id", but they’re still different keys.

📚 Symbols Are Primitive Types


const symbol = Symbol("test");

console.log(typeof symbol); // "symbol"
console.log(symbol instanceof Object); // false

// Incorrect usage
// new Symbol(); // ❌ Throws TypeError
  

Note: You cannot use new Symbol() — Symbols are not constructors.

🪪 Descriptions for Debugging

Descriptions are used just for debugging. They do not affect the uniqueness of the symbol.


const a = Symbol("rajesh");
const b = Symbol("rajesh");

console.log(a === b); // false
console.log(a.toString()); // Symbol(rajesh)
console.log(a.description); // rajesh
  

🌐 Global Symbol Registry using Symbol.for()

Normally, each call to Symbol() creates a new symbol. However, Symbol.for() checks a global registry to reuse symbols with the same description.


const sym1 = Symbol.for("shared");
const sym2 = Symbol.for("shared");

console.log(sym1 === sym2); // true
  

Warning: Avoid global symbols unless necessary, as they can create naming conflicts in shared codebases.

👥 Real-World Example: Identifying Unique Users with Same Name

Suppose we need to store information about two users with the same name. Using strings as keys would overwrite the previous entry. With Symbol, we can safely store both.


const user1 = Symbol("rajesh");
const user2 = Symbol("rajesh");

const persons = {
  [user1]: "Prasad",
  [user2]: "Kumar"
};

console.log(persons[user1]); // Prasad
console.log(persons[user2]); // Kumar
  

Even though both symbols have the same description, they are treated as distinct keys.

🧑‍💻 Console Output


{
  [Symbol(rajesh)]: "Prasad",
  [Symbol(rajesh)]: "Kumar"
}
  

📘 Assignments: Practice with Symbols

  1. Create two symbols with the same description and verify that they are not equal.
  2. Use symbols as keys to store login roles in a user object and access their values.
  3. Try to create a symbol with new Symbol() and note what error is thrown.
  4. Use Symbol.for() to create two symbols with the same name and compare them.
  5. Create an object with two people having the same name using Symbol() and store unique data for both.

📌 Summary

  • Symbol is a primitive type introduced in ES6 to create unique identifiers.
  • Useful as keys in objects to avoid property collisions.
  • Each call to Symbol() returns a new unique value.
  • Symbol.for() accesses a global symbol registry, returning the same symbol for the same key.
  • Symbols cannot be used with new and are not instances of Object.

Leave a Reply

Your email address will not be published. Required fields are marked *