Skip to content
Advertisement

What Symbol and public get [symbol]()?

I’m reading some Typescript code and I have a hard time understanding a line.

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

class Something { 

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

How does exactly get work? Is symbol an argument?

Advertisement

Answer

Symbol

According to Developer Mozilla

Every Symbol() call is guaranteed to return a unique Symbol. Every Symbol.for(“key”) call will always return the same Symbol for a given value of “key”. When Symbol.for(“key”) is called, if a Symbol with the given key can be found in the global Symbol registry, that Symbol is returned. Otherwise, a new Symbol is created, added to the global Symbol registry under the given key, and returned.

Well, to make it simple, if you’re familiar with object[key] in Javascript, you can understand Symbol easily.

Occasionally, we use key in some circumstances like below

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

Now we simply convert it to symbol usage

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

But beyond that, one outstanding feature, which we regularly use Symbol, is

Symbol-keyed properties will be completely ignored when using JSON.stringify():

It’s really good to serialize JSON data but ignore some fields in your code

If you want to have a better understanding of some Symbol features, I’d suggest you read this article

Getter (in your code it’s calling get)

According to Developer Mozilla again

The get syntax binds an object property to a function that will be called when that property is looked up.

But firstly, we ask why we need it?

To demonstrate it, let me show you one of my favorite examples

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

That fullName assignment will be repeated multiple times ridiculously even though you assigned values for firstName and lastName

To avoid that, we’d introduce getter

class Person {
    public firstName: string;
    public lastName: string;
    
    //here we go with getter!
    public get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

After this, you only need to assign values for firstName and lastName. And for fullName, you just simply call person.fullName which will be populated automatically!

And the last question is “Are we able to use getter with Symbol”. I’d say YES!

If you check the earlier document for the getter, you can find this part

const expr = 'foo';

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

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

Conclusion

About what you ask

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

class Something { 

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

Well, I guess that developer is trying to avoid unexpected data population during JSON serialization on that getter

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement