Which symbol or character corresponds to the public "get symbol" method?

Question

Which symbol or character corresponds to the public "get symbol" method?

While going through some Typescript code, I came across a line that is giving me trouble to understand.

const symbol = Symbol.for('symbolname');

class Something { 

    public get [symbol]() {
        return true;
    }
...
}

I am confused about how the get function works in this context. Is symbol being used as an argument here?

javascript typescript

Answer 1

Answer №1

Unique Identifier

As per information provided by Mozilla Developer Network

Each call to Symbol() guarantees the return of a distinct Symbol. On the other hand, calling Symbol.for("key") will consistently return the same Symbol for a specific "key". When Symbol.for("key") is invoked, if an existing Symbol with the specified key exists in the global registry, that Symbol will be returned. Otherwise, a new Symbol is generated, added to the global registry under the given key, and then returned.

To put it simply, you can think of Symbol as similar to object[key] in Javascript.

Sometimes, we use keys in scenarios like this

const key = "keyname"
const object = {
   [key]: "value"
}

We can now switch to using symbols instead

const symbol = Symbol.for('symbolname');
const object = {
   [symbol]: "value" //the key is represented by a symbol
}

Additionally, one notable advantage of utilizing Symbols is that

Symbols used as keys will not be included when JSON.stringify() is employed:

This proves helpful when serializing JSON data while excluding specific fields within your code.

If you wish to delve deeper into some features of Symbols, I recommend reading this article

Getter Function (also known as get)

Referencing once again the details from Mozilla Developer Network

The get syntax links an object property to a function that is triggered whenever that property is accessed.

But why would we require this functionality?

To illustrate, consider one of my favorite examples

class Person {
    public firstName: string;
    public lastName: string;
    public fullName: string; //imagine assigning a value for `fullName` like this `${firstName} ${lastName}`?
}

The assignment of fullName could become repetitive despite setting values for both firstName and lastName

To address this issue, we introduce a getter function

class Person {
    public firstName: string;
    public lastName: string;
    
    //introducing the getter!
    public get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Following this modification, you only need to assign values to firstName and lastName. Accessing person.fullName will automatically populate the full name!

The question arises, "Can getters be used with Symbols?" The answer is affirmative!

By referring to the preceding documentation on getters, you'll come across this segment

const expr = 'foo';

const obj = {
  get [expr]() { return 'bar'; }
};

console.log(obj.foo); // "bar"

In Conclusion

In response to your query

const symbol = Symbol.for('symbolname');

class Something { 

    public get [symbol]() {
        return true;
    }
}

This approach seems geared towards avoiding unintended data inclusion during JSON serialization via that getter function

Answer 2

Unique Identifier

As per information provided by Mozilla Developer Network

Each call to Symbol() guarantees the return of a distinct Symbol. On the other hand, calling Symbol.for("key") will consistently return the same Symbol for a specific "key". When Symbol.for("key") is invoked, if an existing Symbol with the specified key exists in the global registry, that Symbol will be returned. Otherwise, a new Symbol is generated, added to the global registry under the given key, and then returned.

To put it simply, you can think of Symbol as similar to object[key] in Javascript.

Sometimes, we use keys in scenarios like this

const key = "keyname"
const object = {
   [key]: "value"
}

We can now switch to using symbols instead

const symbol = Symbol.for('symbolname');
const object = {
   [symbol]: "value" //the key is represented by a symbol
}

Additionally, one notable advantage of utilizing Symbols is that

Symbols used as keys will not be included when JSON.stringify() is employed:

This proves helpful when serializing JSON data while excluding specific fields within your code.

If you wish to delve deeper into some features of Symbols, I recommend reading this article

Getter Function (also known as get)

Referencing once again the details from Mozilla Developer Network

The get syntax links an object property to a function that is triggered whenever that property is accessed.

But why would we require this functionality?

To illustrate, consider one of my favorite examples

class Person {
    public firstName: string;
    public lastName: string;
    public fullName: string; //imagine assigning a value for `fullName` like this `${firstName} ${lastName}`?
}

The assignment of fullName could become repetitive despite setting values for both firstName and lastName

To address this issue, we introduce a getter function

class Person {
    public firstName: string;
    public lastName: string;
    
    //introducing the getter!
    public get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Following this modification, you only need to assign values to firstName and lastName. Accessing person.fullName will automatically populate the full name!

The question arises, "Can getters be used with Symbols?" The answer is affirmative!

By referring to the preceding documentation on getters, you'll come across this segment

const expr = 'foo';

const obj = {
  get [expr]() { return 'bar'; }
};

console.log(obj.foo); // "bar"

In Conclusion

In response to your query

const symbol = Symbol.for('symbolname');

class Something { 

    public get [symbol]() {
        return true;
    }
}

This approach seems geared towards avoiding unintended data inclusion during JSON serialization via that getter function

Which symbol or character corresponds to the public "get symbol" method?

Answer №1

Similar questions

Using Jquery Regex to Validate Numeric Range Input on KeyUp Event in an Input Field

Providing static content within the generated code structure by Yeoman for the Angular Fullstack framework

Passing a JavaScript variable to PHP resulted in the output being displayed as "Array"

A demonstration of VueJS Nested Builder functionality

The onClick functionality for the IconComponent (dropdown-arrow) in React Material UI is not functioning properly when selecting

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

Array updating using the foreach method in Angular

Tips for retrieving a child component's content children in Angular 2

What causes objects to be added to an array even when the condition is not met?

The issue with Postman Express.js Response Body not displaying any content is quite common

Tag in HTML not being replaced

Development with Node JS, express, Mongoose, and intricate nested queries

Troubleshooting: jQuery AJAX .done() function failing to execute

Disrupting methods on a dependency within QUnit can cause tests against that dependency to fail

Do not engage with the website while animations are running

What is the best way to toggle the enablement of a textbox with jQuery?

An uncaught exception has occurred: An error was encountered indicating that the specified path is not valid for either posix or windows systems, and it appears that there is no 'join' method defined in the

angular primeng table has a checkbox to select all checkboxes

Using Websockets in combination with AngularJS and Asp.net

utilizing vueJS for global notifications