JavaScript Symbols

The good perk of having a lot of people who code around you is that you end up discussing things that you don't get to see on a day-to-day basis as a simpleton frontend developer.

This time, I landed on the concept of symbols in JavaScript, which is something I don't have to deal with at work, but something that JavaScript offers and it'd be nice to understand what it is and why it is :D

What is a Symbol?

A symbol is a unique and immutable data type in JavaScript.

If that doesn't tell you anything (which indeed didn't for me), know that a symbol is one of the JavaScript primitive data types (Opens in a new tab) just as string, boolean, integer etc. but it works like a special identifier to access object properties, and it can be used more or less like a property key.

Let's imagine that we have an object where we store a person's name, an id and their age.

1let person = {
2  name: "Sophia",
3  id: 12345678,
4  age: 24, // (yes, I'm a trailing comma person)
5};

If we want to access the value of the id property, we'd just do:

1console.log(person.id); // will give us 12345678

It is fair to assume that id won't change as often as the other characteristics of a person, and tailor our work around that assumption.

Let's try to use a symbol as a key by creating it. This can be done using the Symbol() constructor:

1let symbolIDKey = Symbol("id");
2let person = {
3  name: "Sophia",
4  [symbolIDKey] = 12345678,
5  age: 30,
6};
7console.log(person[symbolIDKey]); // outputs 12345678

You could, in theory, use no "id" parameter (properly referred as descriptor), but if you were to use more than one symbol key, it'd be more challenging to know which is which.

Why symbols then?

Using symbols as object keys will provide you with a unique and guaranteed way of accessing object properties, even if other code adds or modifies properties with the same key.

For example:

1let symbolIDKey = Symbol("id");
2let person = {
3  name: "Sophia",
4  [symbolIDKey] = 12345678,
5  age: 30,
6};

Some other code, for whatever reason, will try to do

1person.id = 00000000;

You will be left with

1let symbolIDKey = Symbol("id");
2let person = {
3  name: "Sophia",
4  [symbolIDKey] = 12345678,
5  age: 30,
6  id: 00000000,
7};
8
9console.log(person.id); // will output 00000000
10console.log(person[symbolIDKey]); // will output our more expected 12345678

The symbol key is allowing us to preserve the original value even if some other code might try to alter the property id.

With symbols you can add private properties to an object that are not intended to be modified or accessed directly by other code.

But beware! Symbols keys are not enumerated, which means that they do not show up in the list of keys of the object if you try to access them by loops and mappings.

You cannot even access the symbol keys of an object with keys() (Opens in a new tab) nor with getOwnPropertyNames() (Opens in a new tab)!

You will need to be aware of the structure of your object and if you need to access the symbol keys, you'll have to use getOwnPropertySymbols() (Opens in a new tab).

...

And that's it! I don't see myself using this approach anytime soon, but it's good to know that, should I be concerned with the integrity of the data I work with, there are ways for me to preserve some information in the flimsy world that JavaScript often creates for us.