javascript-advance

A Guide to ES6 Symbol

In ECMAScript 6 (ES6), the Symbol data type was introduced as a new primitive type in JavaScript. It is a unique and immutable value that can be used as an identifier for object properties. Symbols are often used to create private properties and methods, as well as to define special behavior in JavaScript objects.

Symbols are created using the Symbol() function, which returns a unique symbol value. Here's an example:

const mySymbol = Symbol();
console.log(typeof mySymbol); // output: symbol

As shown in the example, the typeof operator can be used to check the type of a symbol, which returns "symbol". This helps to differentiate symbols from other JavaScript data types.

Creating Symbol with Description

When creating a symbol, you can also provide an optional description as a parameter to the Symbol() function. This description is useful for debugging purposes, but it does not affect the uniqueness or behavior of the symbol. Here's an example:

const mySymbol = Symbol('My Symbol');
console.log(mySymbol.toString()); // output: Symbol(My Symbol)

The toString() method can be used to retrieve the description of a symbol. In the example above, the output will be "Symbol(My Symbol)".

Usage of Symbol

Symbols have various uses in JavaScript, such as:

Creating Private Properties and Methods: Symbols can be used to create private properties and methods in JavaScript objects. Since symbols are unique, they can be used as keys to access private members without exposing them to the outside world. Here's an example:

const privateSymbol = Symbol('private');
class MyClass {
  constructor() {
    this[privateSymbol] = 'Private Property';
  }
  
  [privateSymbol]() {
    return 'Private Method';
  }
}

const obj = new MyClass();
console.log(obj[privateSymbol]); // output: Private Property
console.log(obj[privateSymbol]()); // output: Private Method

Defining Special Behaviors: Symbols can be used to define special behaviors in JavaScript objects. By using well-known symbols from the Symbol object, you can override default behaviors of built-in JavaScript methods and operators. For example, the Symbol.iterator symbol can be used to implement custom iteration logic in an object.
Preventing Property Collisions: Since symbols are unique, they can be used as keys for object properties to prevent property collisions. This is particularly useful when working with third-party libraries or frameworks that rely on symbols for internal implementation.

Symbol in Built-in Objects

ES6 introduced several well-known symbols that are used by built-in JavaScript objects. These symbols provide the ability to customize and extend the behavior of objects.

Here are some examples of well-known symbols:

Symbol.iterator: Used to define an iterator for an object, enabling iteration with the for...of loop.
Symbol.toStringTag: Used to specify the string representation of an object when calling Object.prototype.toString().
Symbol.hasInstance: Used to define the behavior of the instanceof operator.
Symbol.species: Used to specify the constructor function that is used to create derived objects.

These well-known symbols can be accessed using the Symbol object, like this:

const obj = {};
console.log(typeof obj[Symbol.iterator]); // output: undefined

By accessing specific symbols on objects, you can customize their behavior according to your requirements.

Conclusion

Symbols in ES6 provide a powerful way to create unique identifiers and extend the behavior of JavaScript objects. They can be used to create private properties and methods, define special behaviors, and prevent property collisions. With their ability to create unique symbols, you can enhance the functionality and maintainability of your JavaScript code.

For more information on ES6 symbols and their usage, refer to the following resources:

My Profile

Courses

A Guide to ES6 Symbol

Creating Symbol with Description

Usage of Symbol

Symbol in Built-in Objects

Conclusion