Motivation to bring symbols in ES6

Javascript comprised six datatypes undefined, null, boolean, String, Number and Object (includes array datatype). The Symbol is newly introduced datatype in ES6 also known as JavaScript 6, which makes the total number of data types in JavaScript is 7. It is a primitive datatype which means Symbol cannot be instantiated. Symbols are immutable datatype and act as unique identifiers for object keys. Before the introduction of Symbol, it was very difficult to generate unique object keys. It was important to maintain unique object keys to prevent the overwriting of values having similar object key as this could result in loss of data. The introduction of Symbol helped overcome this problem as unique keys could be generated without writing a complicated piece of code. Unique object keys can be generated using Symbol() function. The Symbol() function returns a value of type symbol. Given below are examples that demonstrate the purpose of symbols.

Syntax:

let symbol = Symbol();

Example 1: In this example, we are going to generate symbols.

• Code:

  <script>
  
      // Write Javascript code here
      let sym1 = Symbol()
      let sym2 = Symbol('mysymbol')
      console.log('Type of sym1: ', typeof(sym1))
      console.log('Type of sym2: ', typeof(sym2))
  </script>
• Output:

  Type of sym1:  symbol
  Type of sym2:  symbol

Example 2: In this example we will see Symbol() function generates unique object keys .

• Code:

  <script>
  
      // Write Javascript code here
      let sym1 = Symbol('mysymbol')
      let sym2 = Symbol('mysymbol')
      console.log('sym1===sym2: ', sym1===sym2)
  </script>
• Output:

  sym1===sym2: false

Note: Symbol datatype is primitive datatype and cannot be instantiated

Comparison of Symbol and without Symbol: Let us consider an example where a list of marks obtained by students in a particular exam needs to be maintained. The students are yet to be assigned their roll numbers. In this situation, the name of a student is to be used as an object key. However, there can be more than one student with similar names. This can cause overwriting of marks obtained by each student resulting in data loss. To overcome this problem symbol datatype can be used.

• Code 1: The code snippet below shows the scenario when symbol is not used.

  <script>
  
  // Write Javascript code here
  var marks = {}
  marks["Joe"] = 100
  marks["Ana"] = 90
  marks["Chloe"] = 95
  marks["Marie"] = 75
  console.log(marks)
  console.log('Another student with'
            + ' name Chloe appears')
  marks['Chloe'] = 60
  console.log('After the marks of the'
       + ' fifth student is entered')
  console.log(marks)
  </script>
• Output: The marks of Chloe gets overwritten when another student with same name appears.
  

  

• Code 2: The code snippet below shows the scenario when symbol is used

  <script>
  
  // Write Javascript code here
  var marks={}
  var sym1=Symbol("Joe")
  marks[sym1]=100
  var sym2=Symbol("Ana")
  marks[sym2]=90
  var sym3=Symbol("Chloe")
  marks[sym3]=95
  var sym4=Symbol("Marie")
  marks[sym4]=75
  console.log(marks)
  console.log('Another student '
      + 'with name Chloe appears')
  var sym5=Symbol("Chloe")
  marks[sym5]=60
  console.log('After the marks of '
      + 'the fifth student is entered')
  console.log(marks)
  </script>
• Output: The marks of Chloe does not get overwritten when another student with same name appears, no data is lost. You have to run this locally.
  

  

Limitations of Symbol:

• Symbols are ignored in for..in loop.
• Ignored by functions such as Object.keys(), Object.getOwnPropertyNames() and JSON.stringify() and hence cannot be serialized.
• Symbol was primarily used to ensure privacy. But methods like Object.getOwnPropertySymbols() returns an array of any symbol-based keys and Reflect.ownKeys() returns an array of all keys, including symbols.