ES6 Symbol Play

by Jason Butz

HTML

<div>
    Module 1 Value: <span id="v1"></span>
</div>
<div>
    Module 2 Value: <span id="v2"></span>
</div>
<div>
    Module 3 Value: <span id="v3"></span>
</div>
<div>
    Module 4 Value: <span id="v4"></span>
</div>
<pre id="json"></pre>

JavaScript

var myData = {};
(function() {
	var sym = Symbol.for('jbutz.jsfiddle.symbol.test');
    
	Object.assign(myData, {
    	name: 'Bob',
        email: '[email protected]',
        [sym]: {
        	metaValue1: 1,
            metaValue2: 2
        }
    });
    
    document.getElementById('v1').innerText = myData[sym].metaValue1;
}());

(function() {
    document.getElementById('v2')
    	.innerText = (myData['jbutz.jsfiddle.symbol.test'] || {}).metaValue1;
}());

(function() {
    document.getElementById('v3')
    	.innerText = (myData[Symbol('jbutz.jsfiddle.symbol.test')] || {}).metaValue1;
        
	myData[Symbol('jbutz.jsfiddle.symbol.test')] = {
    	metaValue1: 5
    }
}());

// Playing with them on DOM Nodes

(function() {
    document.getElementById('v4')
    	.innerText = myData[Symbol.for('jbutz.jsfiddle.symbol.test')].metaValue1;
    console.log(myData);
    document.getElementById('json').innerText = JSON.stringify(myData);
}());

(function() {
    var el = document.getElementById('json');
    el[Symbol.for('jbutz.jsfiddle.symbol.test2')] = 'my apps value';
}());

(function() {
    var el = document.getElementById('json');
    el[Symbol.for('someoneelse.jsfiddle.symbol.test2')] = 'MY apps value';
}());

(function() {
    var el = document.getElementById('json');
    console.log(Object.getOwnPropertySymbols(el))
}());