What is 'global symbol registry'?

Question

var sym = Symbol();

is window['sym'] which is already global scope.

But MDN says:

The above syntax using the Symbol() function will not create a global symbol that is available in your whole codebase. To create symbols available across files and in a global scope-like environment, use the methods Symbol.for() and Symbol.keyFor() to set and retrieve symbols from the global symbol registry.

sym is already in global scope in a browser, with above declaration syntax.

What is global symbol registry?

Each html document is tied with window object.

So, In a browser world, How does this scope of symbol availability across files/realms different from global scope(window object)?

Answer 1

var sym = Symbol();

is creating a new property sym in dictionary(window), which is in global scope, where value can be accessed as window['sym'].

Well, no. It does create a symbol and assigns it to a local variable named sym. Only if you are executing this code in the global scope (which you usually wouldn't, for modularity) it does create a property on the global object of your realm (js environment). Notice that this global object is not always window like in web pages, it depends on your environment.

What is global symbol registry?

It's a registry (think: dictionary) for symbols that you can access via a string key. And "global" does in this case mean even more global than a global scope, the global symbol registry does span all realms of your engine. In a browser, the web page, an iframe, and web worker would all have their own realm with own global objects, but they could share symbols via this global registry.

And this sharing is exactly the purpose. If you'd otherwise put

var sym1 = Symbol("shared");

var sym2 = Symbol("shared");

in two places, then sym1 !== sym2. If you've got a shared object, using the symbols as property keys would create two different properties. If however you do

var sym1 = Symbol.for("shared");

var sym2 = Symbol.for("shared");

then sym1 === sym2 and when you use it you'll always get the same property.

See also Crossing realms with symbols on 2ality and Symbols and why they're awesome for more examples, including the well-known symbols which are similarly global.

Answer 2

The global symbol registry is just a convenient global repository for symbol instances. You could implement one yourself if you wanted to, but having such a repository built-in means that the runtime can use it as a place to publish symbol instances that have particular meaning for a given context.

In your own application, you can decide that some types of objects will have certain properties accessible via some symbol. All your code can find those symbols via Symbol.for():

var SPECIAL_PROPERTY = Symbol.for("mySpecialProperty");
// ...
var specialVal = someObject[SPECIAL_PROPERTY];

Because the registry is global, that works regardless of scope or compilation unit.

By making the registry part of the runtime, an environment like Node.js can use the symbol mechanism to extend objects without fear of causing problems for legacy code. Like, if Node wanted to make it such that you could find out how much memory an object used, they could invent a symbol, put it in the registry, and document the registry key. Any code could then use that:

var objectSize = myObject[Symbol.for("memory_use")];

(That's totally made up; it might make no sense at all for Node to do that particular thing.) Because of the way symbols work as property keys, code that doesn't know about that won't experience any weird issues should the objects it manipulates suddenly start carrying around that extra property.

(Of course, the namespace of the symbol registry itself is just a namespace, so collisions would have to be dealt with there in pretty much exactly the same way we deal with name collisions in the window object.)

Answer 3

Global symbol registry exists across all iframes in a window. (As symbols can't be passed across workers, there's no observable concept of it being identical across workers, barring the existence of sidechannel inspections, eg by memory probing.)

<script>
document.head.appendChild(document.createElement('iframe'))
.src=`javascript:
  alert(parent.Symbol===Symbol) /*false*/
  ,alert(parent.Symbol.for('a') === Symbol.for('a')) //true
`
</script>

Symbol.for is not much different from implementing your own cache using an object reference. It's merely in-built and thus more convenient. Instead of Symbol.for('a'), you can simply do:

obj['a']? obj['a'] : obj['a'] = Symbol()

.and maintain a ref to obj.

In fact, since javascript does not provide an API to remove symbols in the global registry, its beneficial to do it the manual-caching way if you need to manually manage the memory of the registry.