The Symbol Type in JavaScript

A Symbol is a primitive data type in JavaScript that represents a unique and persistent identifier.

Unlike other primitive data types like number, string, or boolean, symbols are always unique.

This means that every time you create a new symbol, you get a distinct value that cannot be duplicated.

Creating a Symbol

To create a Symbol, we simply use the constructor function Symbol() without the new keyword.

const mySymbol = Symbol();

Symbol Description

It’s possible to provide an optional description when creating a Symbol. This description can be useful for identifying the purpose of the Symbol.

const name = Symbol('Symbol name');

A symbol’s description does not affect its uniqueness, but it can be useful for debugging.

let symbol = Symbol('my symbol');
console.log(symbol.toString()); // Prints: Symbol(my symbol)

Uniqueness of Symbols

The main characteristic of symbols is their value is always unique and different from all others (even if two symbols have the same description).

let symbol1 = Symbol('description');
let symbol2 = Symbol('description');

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

Uses of the Symbol Type

Preventing Property Overwriting

One of the most common uses of Symbols is as keys for object properties, to prevent them from being accidentally overwritten.

Let’s see it with an example.

let object = {
  property: 'value 1'
};

// Later, another part of the code adds a property with the same name:
object.property = 'value 2';

console.log(object.property);  // Prints: 'value 2'

// We create a Symbol with a description
let symbolProperty = Symbol('property');

let object = {};

// We use the Symbol as a key for the property
object[symbolProperty] = 'value 1';

// Later, we try to add another property with the same name,
// but since we used a Symbol, there is no overwrite
let anotherSymbol = Symbol('property');
object[anotherSymbol] = 'value 2';

// We access the properties using the Symbols
console.log(object[symbolProperty]);  // Prints: 'value 1'
console.log(object[anotherSymbol]);       // Prints: 'value 2'

Symbolic Methods and Properties

JavaScript includes several built-in symbols that are used as keys for special methods and properties. These symbols are defined in the Symbol object.

Global Symbols with Symbol.for()

Another different use of Symbols occurs with the Symbol.for() method. This allows creating a global symbol that is accessible throughout the runtime environment.

If you try to create a symbol with the same key, it returns the same symbol. That is, Symbol.for() maintains a kind of “global registry” of symbols.

const globalSymbol1 = Symbol.for('mySymbol');
const globalSymbol2 = Symbol.for('mySymbol');

console.log(globalSymbol1 === globalSymbol2); // Prints: true

Practical Examples

const privateProperty = Symbol('private');

class MyClass {
    constructor(value) {
        this[privateProperty] = value;
    }

    getValue() {
        return this[privateProperty];
    }
}

let instance = new MyClass(123);

console.log(instance.getValue()); // Prints: 123

const NAME = Symbol('name');

const person = {
  [NAME]: 'John',
  age: 30,
};

console.log(person[NAME]); // Result: John

const key1 = Symbol('key1');
const key2 = Symbol('key2');

const myObject = {
  [key1]: 'Value 1',
  [key2]: 'Value 2',
  name: 'Object',
};

const symbols = Object.getOwnPropertySymbols(myObject);
console.log(symbols); // Result: [Symbol(key1), Symbol(key2)]