What is the Symbol in JavaScript?

#help #explainlikeimfive

Hi, is there any use case for the symbol in JavaScript?

I'm looking for real-world examples.

Top comments (9)

Mikhail Korolev • Apr 5 '19 • Edited

I assume you already know what symbol as a primitive is (if you don't, you can read it in whatever pops up in Google first).

The main use case for symbols is having non-enumerable (the usual way) object properties you don't want to iterate over but still have a quick access to if you ask for them specifically:

const age = Symbol()
const lady = {
    name: "Jess",
    location: "Washington, D.C.",
    likescats: true,
    [age]: 31
}

Object.getOwnPropertyNames(lady)
// (3) ["name", "location", "likescats"]

lady[age]
// 31

The other interesting case I saw is using symbols as "truly unique" constant:

const ONE = Symbol.for('Shovel Mk. 2')
const TWO = Symbol.for('Shovel Mk. 2')

ONE === TWO
// true

Symbols are always unique when declared with Symbol('whatever'), but in this case the Symbol.for() checks if this symbol already exists in the global symbol registry and does the job of allocating TWO not just to a symbol with the same key, but to the exact same part of the memory as the original constant that was first to be declared. Can be retrieved with Symbol.keyFor(ONE).

Plus, if you are a true JS enthusiast, you can have fun with symbols and metaprogramming, there is a great article on that.

Matteo Rigon • Apr 5 '19

Great reply!
Another thing i'd like to add is that Symbols are useful to avoid accidental overrides when developing a library that can be extended by 3rd party plugins.

Imagine we have the following extensible library:

export default {
  x: 1,
  y: 2,
  usefulMethod() {
    return this.x;
  },
  extend(property, value) {
    Object.defineProperty(this, property, {
      value
    })
  },
  register(plugin) {
    plugin(this)
  }
}

And the following 3rd party plugin

export default (MyLib) => {
  MyLib.extend('x', 2);
}

You can consume it like this

import MyLib from 'mylib'
import MyPlugin from 'myplugin'

MyLib.register(MyPlugin);
MyLib.usefulMethod() // returns 2 instead of 1

As you can see, the plugin replaced the value of x. If we never want that to happen we can protect our keys with Symbols:

const _x = Symbol('x')
const _y = Symbol('y')

export default {
  [_x]: 1,
  [_y]: 2,
  usefulMethod() {
    return this[_x];
  },
  extend(property, value) {
    Object.defineProperty(this, property, {
      value
    })
  },
  register(plugin) {
    plugin(this)
  }
}

Now the properties we don't want to get modified are safe while the whole object can be extended at will.

Nina • Apr 5 '19

I'm interested in this question too. I've been reading a lot about symbols and suggested use cases, but can't find an example of some real world usage.