Symbols are really hard to understand at the beginning, so I will try to explain in a very simple way by providing real world examples.
element.addEventListener('click', handler) and you create a function addEvent() which will, let say, store all the handler functions in a custom property of that element, let say, element.handlers..handlers and now we have a conflict (collision), everything broken up.element.[Symbol()]instanceof works yourself1 + 2 could do because in C++ you can define how + should work.instanceof, for .. in and some others. This list is updated and currently there is very bad browser support for that.In Google Chrome open the console and paste this code:
const MyComponent = {
create() {
return {
test() { console.log('test') }
}
},
[Symbol.hasInstance](instance) {
return typeof instance.test === 'function'
}
}
const obj = MyComponent.create() and now you can call if (obj instanceof MyComponent).new or custom methods for that anymore.TypeError: invalid 'instanceof' operand MyComponent anymore.MyPaginator.currentPage property which shouldn't be easily accessed from the outside and used only within internal object methods. If modified from outside everythjing can be broken now.Object.keys() for example.There is a very good article I would strongly recommend to read - Metaprogramming in ES6: Symbols and why they're awesome
Another good article - ES6 in Depth: Symbols
Symbols are still badly supported and in most cases impossible to polyfill. Because of that in current world I wouldn't recommend to use them, except simple Symbol() properties on objects if you don't care about IE.