Javascript ES6 Symbol Type code examples | Typescript

In this tutorial, We will have a look into learn the Symbol Primitive Data type basics with examples.

Javascript 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 similar to 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

How to create and initialize Symbol

Symbol object is created as follows.

It creates unique name value for every object creation. Empty Symbol is created by Symbol() constructor.

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

And also, Can supply the key to Symbol Function as seen below example

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

How to compare Symbols for Unique in javascript?

Same Symbol with the same key always return same values, The objects with same value returns true.

using == checks and returns true.

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

How to use 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 . Hence, 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 in javascript Es6

toString() method returns the String version of Symbol Object. It 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 in javascript Es6?

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 example

Each symbol is created, 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 In javascript

To convert Symbol to number in javascript, Please follow below steps.

• use Number Constructor with give symbole object
• if the same code is used for Number like new Number(symboleObj), it gives compilation Error: Cannot convert a Symbol value to a number
• Pass different values to avoid the error

Javascript Es6 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
}