How do you create a new Symbol in JavaScript?

In JavaScript, a symbol is a primitive data type that represents a unique identifier that can be used as an object property key.

Symbols are often used to define private object properties or to create well-known symbols that can be used as internal language features.

In this article, we’ll explore how to create new symbols in JavaScript:

Creating a Symbol:

To create a new symbol in JavaScript, we use the global Symbol() function. The Symbol() function returns a new symbol each time it is called, and the resulting symbol is always unique.

Here’s an example of creating a new symbol:

const mySymbol = Symbol();

In this example, we create a new symbol and assign it to the mySymbol constant. We can now use the mySymbol symbol as a property key in objects:

const myObj = {};
myObj[mySymbol] = "Hello, World!";
console.log(myObj[mySymbol]); // "Hello, World!"

Here, we create an empty object and set a property using the mySymbol symbol as the key. We can then access the property using the mySymbol symbol.

Symbol Description:

We can also create symbols with descriptions, which can be useful for debugging and understanding code. To create a symbol with a description, we pass the description as an argument to the Symbol() function:

const mySymbol = Symbol("My Symbol Description");
console.log(mySymbol.description); // "My Symbol Description"

In this example, we create a new symbol with the description "My Symbol Description". We can access the description of a symbol using the description property.

Well-Known Symbols:

JavaScript also provides several well-known symbols that can be used as internal language features. These symbols are defined in the global Symbol() registry and can be accessed using static properties on the Symbol() function.

Here are some examples of well-known symbols:

// Symbol.iterator
const myArray = [1, 2, 3];
const iterator = myArray[Symbol.iterator]();
console.log(iterator.next()); // {value: 1, done: false}

// Symbol.toStringTag
const myObj = {
  [Symbol.toStringTag]: "MyObject",
};
console.log(Object.prototype.toString.call(myObj)); // "[object MyObject]"

// Symbol.hasInstance
class MyClass {
  static [Symbol.hasInstance](obj) {
    return Array.isArray(obj);
  }
}
console.log([] instanceof MyClass); // true
console.log({} instanceof MyClass); // false

In the first example, we use the Symbol.iterator symbol to create an iterator for an array. We access the Symbol.iterator property on the array to get a reference to the iterator, which we can then use to iterate over the array.

In the second example, we use the Symbol.toStringTag symbol to define a custom toString() behavior for an object. We set the Symbol.toStringTag property on the object to "MyObject", which changes the result of calling Object.prototype.toString() on the object.

In the third example, we use the Symbol.hasInstance symbol to define a custom instanceof behavior for a class. We define a static method on the class with the Symbol.hasInstance property, which returns true if the object is an array.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.