2 Use Cases for Symbol Data Type in Real-Life

The purpose of symbols is to keep the value unique. Let’s look at real-life scenarios where they are used.

1. Unique property values

When you create a symbol using Symbol('some description'), it generates a new, distinct symbol value. This means that even if another symbol is created with the same description, the resulting symbols are unique and not equal to each other.

Let’s take an example where we are managing a system of permissions for a user role in a web application. We want to ensure that the permission names and their corresponding values are unique and not easily overwritten.

We'll use symbols to represent the permissions and their messages

const id = Symbol("id");

const READ = Symbol("Read");
const WRITE = Symbol("Write");
const DELETE = Symbol("Delete");
const ADMIN = Symbol("Admin");

const readMsg = Symbol("Can view content");
const writeMsg = Symbol("Can edit content");
const deleteMsg = Symbol("Can delete content");
const adminMsg = Symbol("Admin privileges");

let permissions = [
  {
    [id]: READ,
    name: READ.description,
    message: readMsg.description,
  },
  {
    [id]: WRITE,
    name: WRITE.description,
    message: writeMsg.description,
  },
  {
    [id]: DELETE,
    name: DELETE.description,
    message: deleteMsg.description,
  },
  {
    [id]: ADMIN,
    name: ADMIN.description,
    message: adminMsg.description,
  },
];

If you log permissions you’ll see that the ID ([id]) and its value (READ, WRITE, DELETE, ADMIN) are both symbols.

If you convert it to JSON, only the properties with string keys are included in the result. Symbols are excluded from the JSON representation, maintaining their privacy.

It’s therefore extremely hard to mistakenly overwrite the ID or the value itself unless you know that they are there or you retrieve them.

2. Unique keys for identifying object properties

Before symbols were introduced, object keys were always strings, making them susceptible to accidental overwrites. This issue became particularly apparent in scenarios involving multiple libraries or when working with JSON data from external sources.

Imagine two libraries working with a user object in a web application. One library is responsible for user authentication, and it adds a role property to the user object.

Another library manages user preferences and also tries to add a role property, unaware of the changes made by the first library. This creates a conflict, as the second library unintentionally overwrites the role property added by the first library.

In the example below, the value of role is overwritten

// Initial user object representing user data
let user = {
  username: "jsmith",
  email: "jsmith@example.com",
};

// Library 1: Handles user authentication and adds a property
function authenticateUser(userInfo) {
  // ... authentication logic ...
  userInfo.role = "user";
}

// Library 2: Manages user preferences and also adds a property with the same name
function setUserRole(userInfo) {
  // ... preferences logic ...
  userInfo.role = "admin"; // Conflict! Overwriting the previous property
}

// Using the libraries on the same user object
authenticateUser(user);
setUserRole(user);

console.log(user);

Now let’s see how Symbol helps to solve this problem.

// Initial user object representing user data
let user = {
  username: "jsmith",
  email: "jsmith@example.com",
};

// Creating a unique Symbol to represent the user role
let userRoleSymbol = Symbol();

// Setting the initial user role using the Symbol
user[userRoleSymbol] = "user";

console.log(user);

If you look at the user object above, you’ll see that it has a Symbol(): "user" property. This is the [userRoleSymbol] key, which is a symbol. Since this doesn’t show up in the JSON, it’s hard to overwrite it.

Also, you can’t overwrite this value when there’s no description attached to the symbol as a string.

user[Symbol()] = "overwritten";

console.log(user);