DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

Day 33: Symbols

What are Symbols, Anyway? 🤔

Symbols are a primitive data type introduced in ECMAScript 6 (ES6), adding a new layer of functionality to the language. Unlike strings or numbers, Symbols are unique and immutable, making them perfect for creating hidden object properties or acting as unique identifiers. They're like magical sigils, each representing a distinct concept.

const magicSymbol = Symbol('I am a magic symbol!');
Enter fullscreen mode Exit fullscreen mode

The argument passed to Symbol() is merely a description, aiding in debugging and identification, but it doesn't affect the Symbol's uniqueness.

Uniqueness and Identity 🔑

One of the most remarkable qualities of Symbols is their uniqueness. Two Symbols with the same description are still distinct entities.

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

console.log(symbol1 === symbol2); // false
Enter fullscreen mode Exit fullscreen mode

This trait is especially valuable when avoiding naming collisions in various scenarios, such as defining object properties or implementing custom iterators.

Hidden Properties 🕵️‍♂️

Imagine having properties that are hidden from most operations, evading accidental overrides. Symbols offer precisely that capability.

const hiddenProperty = Symbol('hidden');
const myObject = {
  [hiddenProperty]: 'I am hidden!',
  visibleProperty: 'You can see me.',

console.log(myObject.visibleProperty); // "You can see me."
console.log(myObject[hiddenProperty]); // "I am hidden!"
Enter fullscreen mode Exit fullscreen mode

Symbols for Metadata 📦

Symbols are perfect for attaching metadata to objects without interfering with regular properties.

const metaDataSymbol = Symbol('metadata');

class MagicalSpell {
  constructor(name) { = name;
    this[metaDataSymbol] = 'Contains powerful magic!';

const spell = new MagicalSpell('Levitation');
console.log(spell[metaDataSymbol]); // "Contains powerful magic!"
Enter fullscreen mode Exit fullscreen mode

Well-Known Symbols 🌟

  • Symbol.iterator: Used to define the default iterator for an object.
  • Symbol.toStringTag: Determines the default description used by the Object.prototype.toString() method.
  • Symbol.species: Controls the constructor function used to create derived objects.
  • Symbol.hasInstance: Customizes the behavior of the instanceof operator.

Advantages 🔥

🔓 Encapsulation and Privacy: Symbols allow developers to create hidden properties, safeguarding crucial data from unintentional access or modification.

🔑 Uniqueness and Safety: Symbol uniqueness ensures that properties won't collide accidentally, reducing bugs and unintended side effects.

🔍 Metadata without Interference: Symbols can be used to attach metadata to objects without interfering with regular properties, maintaining clean and organized code.

🌀 Enhancing Built-in Objects: JavaScript's well-known symbols enable enhancing the behavior of objects without altering their fundamental structure.

Limitations ⚖️

While Symbols bring a touch of wizardry to JavaScript, they aren't a solution for all scenarios. Since they're not exposed through enumeration, common object iteration techniques like loops won't capture Symbol properties. However, the Object.getOwnPropertySymbols() method allows retrieval.

Top comments (0)