ES6 Symbol in JavaScript

#javascript #webdev #programming #tutorial

ES6 Symbol in JavaScript is a new primitive data type introduced in the ECMAScript 6 specification. It is used to create unique, immutable values that can be used as property keys for objects.

Benefits of Symbols

One of the main benefits of using symbols is that it prevents property name collision. For instance, if you have a property with the same name in two different objects, the property value of the first object will be overwritten by the second object. But with symbols, you can avoid this problem by creating unique keys for each property.

Creating a Symbol

To create a symbol, you can use the Symbol() function. For example:

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

You can also provide a description for the symbol as an argument to the Symbol() function. This description is optional and is used for debugging purposes. For example:

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

Accessing Symbol Description

Symbol description can be accessed with the .description property. For example,

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

Using as a Property Key

Once you have created a symbol, you can use it as a property key for an object. For instance:

const mySymbol = Symbol();
const user = {
  name: 'John Doe',
  [mySymbol]: 'Private data'
};

You can access the value of the symbol property using the square bracket notation []. For example:

console.log(user[mySymbol]); // 'Private data'

Symbols are Unique

It is important to note that symbols are unique and immutable. This means that if you create two symbols with the same description, they will not be equal. For instance:

const symbol1 = Symbol('My description');
const symbol2 = Symbol('My description');

console.log(symbol1 === symbol2); // false

Symbols are Immutable

In addition, you cannot modify the value of a symbol once it has been created. For example:

const mySymbol = Symbol();
mySymbol = 'New value'; // TypeError: Assignment to constant variable.

Encapsulating

Another advantage of symbols is that they are not enumerable. This means that when you use a for...in loop to iterate over the properties of an object, the symbol properties will not be included. This makes them ideal for storing private data in an object that you don't want to be accessible by external code. For example,

// creating a symbol
const mySymbol = Symbol();

// creating an object with some properties
const user = {
  name: 'John Doe',
  age: 29,
  [mySymbol]: 'Private data'
};

// for…in to loop through object properties
for (let x in user)
{
    console.log(user[x]);
}
// Output:
// John Doe
// 29

Conclusion

Symbols are a useful addition to the JavaScript language. They provide a way to create unique and immutable values that can be used as property keys for objects. This helps prevent property name collision and allows you to store private data in your objects

That's all for this article, hope you learned something. Thanks for reading, catch you later!

You can also buy me a coffee that would help me grow as a frontend developer :)