Understanding JavaScript Symbols

Introduction: Why Symbols Exist

Welcome to the first lesson of our course, " Symbols, Iteration, and Asynchronous JavaScript ." I am excited to guide you through this journey. In this course, we will explore the more specialized parts of JavaScript that make the language powerful and flexible. We are starting with Symbols because they provide the foundation for how JavaScript handles custom object behavior and iteration behind the scenes. In JavaScript, we usually use strings to name our object properties. For example, if you want to store a user's name, you use the string "name" . However, as your code grows larger or when you use libraries written by other people, you might run into a problem called name collisions . This happens when two different parts of a program try to use the exact same property name for different purposes, causing one to accidentally overwrite the other. Symbols were created to solve this. A Symbol is a unique data type that can be used as an identifier for object properties. Because every Symbol is guaranteed to be unique, you can add properties to any object without worrying about accidentally overwriting existing data. In this lesson, we will learn how to create Symbols, how to share them when needed, and how to use special "well-known" Symbols to change how JavaScript interacts with your custom objects.

Creating Unique Symbols With Symbol()

To create a Symbol, you call the Symbol() function. You can optionally pass a string as a description; this is very helpful for debugging but does not affect its uniqueness . JavaScript // Every Symbol() call returns a NEW, unique value. const TYPE = Symbol("type"); console.log(Symbol("x") === Symbol("x")); // Every Symbol() call returns a NEW, unique value. const TYPE = Symbol("type"); console.log(Symbol("x") === Symbol("x")); Output: text false false In the code above, we create a Symbol called TYPE . Even though we gave it the description "type", the description is just a label. When we compare two Symbols created with the same description "x", the result is false . This is the most important feature of Symbols : every time you call the function, you get a brand-new, one-of-a-kind value that will never equal anything else in your entire program.

The Global Symbol Registry With Symbol.for()

While uniqueness is usually what we want, there are times when you might want to use the same Symbol across different files or parts of your application. JavaScript provides a " Global Symbol Registry " for this purpose. You can access it using the Symbol.for() method. JavaScript // Symbol.for: shared global registry — same key returns the same symbol. const SHARED = Symbol.for("app.shared"); console.log(Symbol.for("app.shared") === SHARED); // Symbol.for: shared global registry — same key returns the same symbol. const SHARED = Symbol.for("app.shared"); console.log(Symbol.for("app.shared") === SHARED); Output: text true true When you use Symbol.for("app.shared"), JavaScript checks the registry to see if a Symbol with that name already exists. If it does, it returns that existing Symbol . If it does not, it creates a new one and saves it in the registry. This allows different parts of your code to share the exact same Symbol by simply remembering a string key. This is different from the regular Symbol() function, which always creates something new.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JavaScript

// Every Symbol() call returns a NEW, unique value.
const TYPE = Symbol("type");
console.log(Symbol("x") === Symbol("x"));

JavaScript

// Symbol.for: shared global registry — same key returns the same symbol.
const SHARED = Symbol.for("app.shared");
console.log(Symbol.for("app.shared") === SHARED);

JavaScript

const TYPE = Symbol("type");
const obj = { 
  name: "Ada", 
  [TYPE]: "account" 
};

console.log(obj[TYPE]);
console.log(Object.keys(obj));            
console.log(Object.getOwnPropertySymbols(obj));

const TYPE = Symbol("type");
const obj = { 
  name: "Ada", 
  [TYPE]: "account" 
};

console.log(obj[TYPE]);
console.log(Object.keys(obj));            
console.log(Object.getOwnPropertySymbols(obj));

text

account
["name"]
[Symbol(type)]

account
["name"]
[Symbol(type)]

JavaScript

class Money {
  constructor(amount) { this.amount = amount; }

  // Customize Object.prototype.toString.call(...)
  // We use a getter because this acts as a static descriptive property.
  get [Symbol.toStringTag]() { return "Money"; }

  // Customize coercion to primitive (string vs number)
  // We use a method because it must process a 'hint' argument.
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.amount;
    return `$${this.amount.toFixed(2)}`;
  }
}

const m = new Money(42.5);
console.log(`as string: ${m}`);                          
console.log("as number:", +m);                            
console.log("tag:", Object.prototype.toString.call(m));

class Money {
  constructor(amount) { this.amount = amount; }

  // Customize Object.prototype.toString.call(...)
  // We use a getter because this acts as a static descriptive property.
  get [Symbol.toStringTag]() { return "Money"; }

  // Customize coercion to primitive (string vs number)
  // We use a method because it must process a 'hint' argument.
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.amount;
    return `$${this.amount.toFixed(2)}`;
  }
}

const m = new Money(42.5);
console.log(`as string: ${m}`);                          
console.log("as number:", +m);                            
console.log("tag:", Object.prototype.toString.call(m));

text

as string: $42.50
as number: 42.5
tag: [object Money]

as string: $42.50
as number: 42.5
tag: [object Money]

JavaScript

const TYPE = Symbol("type");
const obj = { 
  name: "Ada", 
  [TYPE]: "account" 
};

console.log(obj[TYPE]);
console.log(Object.keys(obj));            
console.log(Object.getOwnPropertySymbols(obj));

text

account
["name"]
[Symbol(type)]

JavaScript

class Money {
  constructor(amount) { this.amount = amount; }

  // Customize Object.prototype.toString.call(...)
  // We use a getter because this acts as a static descriptive property.
  get [Symbol.toStringTag]() { return "Money"; }

  // Customize coercion to primitive (string vs number)
  // We use a method because it must process a 'hint' argument.
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.amount;
    return `$${this.amount.toFixed(2)}`;
  }
}

const m = new Money(42.5);
console.log(`as string: ${m}`);                          
console.log("as number:", +m);                            
console.log("tag:", Object.prototype.toString.call(m));

text

as string: $42.50
as number: 42.5
tag: [object Money]

Introduction: Why Symbols Exist

Creating Unique Symbols With Symbol()

The Global Symbol Registry With Symbol.for()

Join the 1M+ learners on CodeSignal

Using Symbols As Object Property Keys

Introduction To Well-Known Symbols

Customizing Objects With Symbol.toStringTag And Symbol.toPrimitive

Summary And Practice Preview