What are the possible usage scenarios for the new JavaScript "Symbol" datatype?
After reading the documentation and playing a little bit with this Symbol
type in chrome, it appears that a Symbol
is a way to define a name -- not a value --, and the fact that properties defined using symbols are not visible using for..in
, Object.getOwnPropertyNames()
or JSON.stringify()
makes symbols useful for metadata properties:
// define metadata symbols
var Metadata = {
Date: Symbol('Message date')
};
var email = function(recipient, message) {
this.Recipient = recipient;
this.Message = message;
this[Metadata.Date] = new Date();
};
var email1 = new email('@Me', 'test');
JSON.stringify(email1);
// {
// Recipient: '@Me',
// Message: 'test'
// }
// Date is still accessible using
email1[Metadata.Date];
// Thu Nov 27 2014 16:50:00 GMT+0000
// Debugging in Console:
// {
// Recipient: '@Me',
// Message: 'test'
// Symbol(Message date): Thu Nov 27 2014 16:50:00 GMT+0000
// }
Symbols can be made global using the Symbol.for
function, so metadata names can be created once and used across all project files.
Accessing the value using a symbol requires having a reference to the symbol when created. Each call to Symbol()
creates a new one even if the same description is used:
var a = Symbol('a');
var b = Symbol('a');
a != b
// and
a != Symbol('a')
but, creating a symbol using Symbol.for
, it will be registered in a global registry and the description becomes a key, meanong only one symbol with the same key will exist in the global registry:
var a = Symbol.for('a');
var b = Symbol.for('a');
a == b
// and
a == Symbol.for('a')
They pretty much help us having naming collisions. Anytime that you want to create a property in a unique way, that's when you should reach for a symbol.
Take a look at my example
const bert = Symbol('Bert');
'Bert'
Note: this is not a value this is what they called a descriptor, because the symbol itself is just a unique identifier. So if you were to visualize what a symbol would be maybe you can visualize is as something like this "sdfasdfa2342134987fgsdfgsdf9808fsfgsd" absolute unique symbol so that you can make sure that it will never overrides any other piece of code in there.
What's cool about this is if I create a second symbol, like
const person = Symbol('Bert')
You can see I used 'Bert' again. Are those going to be the same because I described them as the same thing?
const bert = Symbol('Bert');
const person = Symbol('Bert');
console.log(bert);
console.log(person);
console.log(bert === person);
console.log(bert == person);
This can be useful if you were creating an object of your class.
const classRoom = {
'Mia' : { grade: 50, gender: 'female' },
'Gilbert': { grade: 80, gender: 'male' },
'Gilbert' { grade: 80, gender: 'male' },
};
But then you have another named Gilbert, so you got a naming collision there. So imagine if you're working on million and millions of data. So rather than using the persons name or using some sort of unique identifier we can use a symbol to name them.
const classRoom = {
[Symbol('Mia')] : { grade: 50, gender: 'female' },
[Symbol('Gilbert')]: { grade: 80, gender: 'male' },
[Symbol('Gilbert')]: { grade: 80, gender: 'male' },
};
Another thing about symbols is that they are not enumerable, which means we cannot loop over them if I were to do
for (const person in classRoom) {
console.log(person);
}
I get nothing.
If you do want to get access to all your symbols because theyres some information that you want to get you can use the object method.
const syms = Object.getOwnPropertySymbols(classRoom);
const data = syms.map(sym => classRoom[sym]);
console.log(data);