Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript symbol.description property
The symbol.description property in JavaScript returns the description string of a Symbol. Unlike Symbol.toPrimitive, the description property provides access to the optional description passed when creating a Symbol.
Syntax
symbol.description
Return Value
Returns the description string of the Symbol, or undefined if no description was provided during Symbol creation.
Example: Symbol with Description
<!DOCTYPE html>
<html>
<body>
<h2>Symbol Description Example</h2>
<p>Click to display symbol description...</p>
<button onclick="display()">Show Description</button>
<p id="result"></p>
<script>
function display() {
const sym1 = Symbol('user-id');
const sym2 = Symbol('email');
document.getElementById('result').innerHTML =
'sym1 description: ' + sym1.description + '<br>' +
'sym2 description: ' + sym2.description;
}
</script>
</body>
</html>
Example: Symbol without Description
<!DOCTYPE html>
<html>
<body>
<h2>Symbol without Description</h2>
<p>Click to see what happens with no description...</p>
<button onclick="display()">Check Description</button>
<p id="result"></p>
<script>
function display() {
const symWithDesc = Symbol('has description');
const symWithoutDesc = Symbol();
document.getElementById('result').innerHTML =
'With description: ' + symWithDesc.description + '<br>' +
'Without description: ' + symWithoutDesc.description;
}
</script>
</body>
</html>
Practical Example: Using Descriptions for Debugging
<!DOCTYPE html>
<html>
<body>
<h2>Symbol Debugging Example</h2>
<p>Click to see how descriptions help with debugging...</p>
<button onclick="display()">Debug Symbols</button>
<p id="result"></p>
<script>
function display() {
const userSymbols = [
Symbol('username'),
Symbol('password'),
Symbol('email'),
Symbol()
];
let output = 'Symbol descriptions:<br>';
userSymbols.forEach((sym, index) => {
output += `Symbol ${index + 1}: ${sym.description || 'no description'}<br>`;
});
document.getElementById('result').innerHTML = output;
}
</script>
</body>
</html>
Key Points
- The
descriptionproperty is read-only - Returns
undefinedfor Symbols created without a description - Useful for debugging and identifying Symbols in code
- The description is purely for developer convenience and doesn't affect Symbol uniqueness
Comparison with toString()
const sym = Symbol('test-symbol');
console.log(sym.description); // "test-symbol"
console.log(sym.toString()); // "Symbol(test-symbol)"
test-symbol Symbol(test-symbol)
Conclusion
The symbol.description property provides access to the optional description string of a Symbol. It's particularly useful for debugging and making code more readable when working with multiple Symbols.
Updated on: 2026-03-15T23:18:59+05:30
152 Views
Advertisements