What are the possible usage scenarios for the new JavaScript "Symbol" datatype?

Question

I just stumbled upon the documentation for the new (proposed for ES6, but already implemented in Firefox, Chrome & Opera) datatype in JavaScript, Symbol:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol http://people.mozilla.org/~jorendorff/es6-draft.html#sec-symbol-objects

I'm reading about it, but I just can't think of a possible usage scenario.

The documentation says:

A symbol is a unique and immutable data type and may be used as an identifier for object properties.

OK, fine, let's say I do as the documentation says:

obj[Symbol("a")] = "a";

but, since Symbol('a') always returns unique value (object) and:

Symbols are not visible in for...in iterations.

how do I retrieve my property from obj?

var obj = { normalProperty: 'just a string' };
obj[Symbol('a')] = 'a';

document.getElementById('retrieve').addEventListener('click', function() {
  document.write('Stringified object:' + JSON.stringify(obj) + '<br/><br/>');
  document.write('Trying to get Symbol-property value, aaaand...: <br/>');
  document.write(obj[Symbol('a')]); // undefined
}, false);

<button id="retrieve">Retrieve obj's property</button>

Edit

Of course, you can retrieve it like this:

var x = Symbol('a');
obj[x] = 'a';
obj[x]; // "a"

but what's the purpose of doing it this way?

Thanks in advance :)

Answer 1

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')

Answer 2

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);