ES6 Learn Symbol Type in javascript | Typescript

In this blog post, We are going to learn the Primitive Data type Symbol basics with examples.

ES6 Symbol Datatype

The symbol is a primitive data type introduced with ES6 or ECMAScript 2015 in javascript. Typescript also supports this Symbol as a Primitive data type like String, number, and Boolean.

• The symbol is a special primitive type that represents Unique values or keys of an object.
• It is used to identify unique objects with symbols object.
• Symbol variables always return a new unique value

All the above examples will work in javascript and typescript

Initialize and Creation

Symbol object is created as follows. It creates unique value for every object creation. Empty Symbol is created by Symbol() And also Can supply the key to Symbol Function as seen below example

var symboleObj = Symbol();
console.log(symboleObj) //Symbol()
console.log(typeof symboleObj) //symbol

var symboleObj1 = Symbol('keyhere');
console.log(symboleObj1) //Symbol(keyhere)

Symbols Unique Check

The object creates always returns new values. Same Symbol with the same key

let symboleObj1= Symbol("s1");
let symboleObj2 = Symbol("s1");
console.log(symboleObj1==symboleObj2) //false

Key as a Symbol in Object

Symbols can be stored in the object as a key. And value can be retrieved as normal keys. Object.keys and Object.getOwnPropertyNames will not get the Symbol Keys, meaning Keys are not iterable in for…in for..of the iteration process. To retrieve symbol keys, Object.getOwnPropertySymbols is be used.

var symboleObj = Symbol();
let myObject = {
    [symboleObj]: "myvalue",
    "key1": "value1"
}
console.log(myObject) //Object Symbol(): "myvalue"

console.log(myObject[symboleObj]) //myvalue
console.log(Object.keys(myObject))  // return [ 'key1' ]
console.log(Object.getOwnPropertyNames(myObject)) // return [ 'key1' ]
console.log(Object.getOwnPropertySymbols(myObject)) // return [ Symbol() ]

How to Convert Symbol to String

toString() method returns the String version of Symbol Object. Can also convert to String using String(symboleObj). if you use new String(symboleObj) - It throws ‘Uncaught TypeError: Cannot convert a Symbol value to a string’

var symboleObj = Symbol();
console.log(String(symboleObj)) //myvalue
console.log(symboleObj.toString()) //myvalue

How to Convert Symbol to Boolean

Pass Symbol object to Boolean Class, always returns true. Can also be used with ! not operator to return false

var symboleObj = Symbol(123);
console.log(new Boolean(symboleObj)) //true
console.log(!symboleObj) //false

Symbol for method

Each symbol is created will be registered in the global scope. for() method takes input string - a description which searches global scope for Symbols for the given description and returns the Symbol.

let test = Symbol.for('test');
console.log(test === test); // true

How to Convert Symbol to Number

For Number, if the same code is used for Number like new Number(symboleObj), it gives compilation Error: Cannot convert a Symbol value to a number

Pre builtin Symbols

Javascript and typescript defined native symbols as part of the language. Symbol.iterator Example This returns the iteration for an object which can be used for loop syntax. Here is an example of String’s iteration of an object

interface IIterationString {
  [Symbol.iterator](): IterableIterator;
}

class StringIteration implements IIterationString {
    private strings = ['one', 'two', 'three'];

    constructor() {}

    *[Symbol.iterator]() {
        for(let ss of this.strings) {
            yield ss;
        }
    }
}

for(let elem of (new StringIteration())) {
    console.log(elem); // returns one two three
}