DEV Community

Itachi Uchiha
Itachi Uchiha

Posted on

What is the Symbol in JavaScript?

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

I'm looking for real-world examples.

Top comments (9)

Collapse
 
mkrl profile image
Mikhail Korolev • 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.

Collapse
 
reegodev profile image
Matteo Rigon

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.

Collapse
 
misnina profile image
Nina

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.

Collapse
 
nestedsoftware profile image
Nested Software • Edited

If you want an overview of symbols in js, I think ES6 in Depth: Symbols is excellent.

One common use case is to define [Symbol.iterator] or [Symbol.asyncIterator] to create custom iterables. e.g:

Collapse
 
kurisutofu profile image
kurisutofu

What symbol is that?
Is there a "the symbol" meaning in javascript that I'm not aware of?

Collapse
 
defman profile image
Sergey Kislyakov • Edited
Collapse
 
stereobooster profile image
stereobooster
Collapse
 
awwsmm profile image
Andrew (he/him)

Is something not being rendered correctly? Can you post an image of the symbol you're interested in?

Collapse
 
stereobooster profile image
stereobooster