This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Symbols" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: This next one there isn't really a before and after, cuz this is gonna be one of those rare few features in ES6, that doesn't have an equivalent pre-ES6 at least not directly. Next thing I'm gonna talk to you about is a thing called a Symbol. Now, this is actually a new data type added in JavaScript as of ES6.
[00:00:27] So we went from having six primitive types, to now having a seventh, being Symbol. And I'll be honest with you right off the bat, these are not all that useful in the general case, meaning they're not all that useful for you to make your own symbols. I'll tell you why people think that they want to create their own symbols and I'll show you a use case for that, but honestly the only reason I'm introducing you to symbols is that we can talk about.
[00:00:55] Existing what are called well known symbols. Those are actually really useful. But creating your own symbols that's kind of I'm not sure that. I've never done it. Not once in all of my programming, but we'll explain what this is all about okay? So the way to make a new value of this type, [INAUDIBLE] column symbol function which is capital S.
[00:01:15] And notice I did not put the new keyword there, because you can't actually call it as a constructor. You have to use it as a regular function. What I've now constructed is this special new value type, and your brain is immediately gonna think, well, under the covers, what is it?
[00:01:32] Is it a number? Is it a string? It's most closely associated with the string value but, it is not a string value. Here's what symbol is. Symbol is a unique, globally unguessable value within the context of your program. What kind of value it is? It's a symbol value.
[00:01:54] What is a symbol? A symbol is the symbol. It's very circular and recursive, because you're not supposed to think about what it is under the covers. Technically the engines use numbers. Okay, I think. I think they use unique numbers. But from your perspective that is, the developer in your program, you make this symbol and you just use it opaquely, you don't know what value it is.
[00:02:18] You can't find out what value it is, and you're not supposed to care what value it is okay. You're supposed to use it as a symbolic placeholder, for this unique globally unguessable value. That's the invariant the JavaScript promises for you. Okay. So, the symbol function optionally takes a string value which is whatever description you want, it doesn't matter what you put there because the value that you put there is not useful programatically.
[00:02:59] The value that you put there is only useful from the debugging perspective. It's a label for the object. It's technically called the name for the symbol. Okay, so let me give you an example, if we come over here to my console if I just make a plain old symbol.
[00:03:16] And then I ask what is the value of Symbol you'll notice the way the developer tool prints it out it just says Symbol() because it has no label. But if I make one to have a label. Like this is cool. And then I ask for its value, the developer tools will tell me this is cool.
[00:03:38] Still doesn't tell me what the underlying value is because we're not supposed to know. And programatically, that label doesn't matter to us. It's not like you can access it with that label or anything. So as a matter of fact I can make two, with exactly the same description.
[00:03:53] Maybe not a great idea in terms of confusing yourself in the console. But now, y prints out exactly the same way. And yet, these are not the same. Because no two symbols will ever be equal to each other. They are globally unique within the context of our program.
[00:04:11] Okay, so that description is only there to help you and your developer tools. Now what are we supposed to be able to use these for why on earth would we want the x symbol. Well it's supposed to be used most directly as the property name for an object, in side of an object so say I have an object here, that normally has property names like ID 42, and so forth but let's say I wanna put a special property on this object.
[00:04:41] I wanna say object of x is equal to "shhhh this is secret" It's not really secret, okay. But what I've done is I've created a property name, on obj that is, the property name itself is this special globally unique unguessable value. So what happens if I do that if I then, take this and I come over here, to the browser.
[00:05:10] And then I ask what is the contents of a obj? You'll notice that I have the ID 42 and I have the symbol whatever description. Okay, so that I have two properties on obj, one is at position ID's and one is at this symbol. What happens if I ask for the keys?
[00:05:30] Of obj, and just get id. What happens if I ask for Object.getOnPropertyNames of obj, I just get "id" so you might start to think it's kinda like a hidden property, cuz it doesn't show up in the object dot keys or the object dot get on property names. Shows up in my developer console but it doesn't show up programmatically, so I start to think it's sorta like this special hidden property.
[00:06:05] It is not a hidden property. But it's kind of like a special property in that it's collected into a different bucket than other properties. That's the only difference. So now we have two buckets in an object. We have regular properties, and then we have symbol properties. Okay? And it is possible programatically to ask, for the getOwnPropertySymbols(obj) and you notice that gives us an array of that symbol, so it's not hidden.
[00:06:37] Somebody takes your value, they can get the symbol out. They can never know what the symbol value underlying is, but they can get that symbol and then they can access your object at that location. So it's not really a hidden property. But it's kind of like when we used to do this kind of silliness.
[00:07:02]
>> Kyle Simpson: Remember how we pretty commonly will append or prepend and an underscore a couple of underscores to a property name, cuz we're kind of trying to signal to people leave this alone, right. My favorite one is like in I think it's see their angular reactor. I think it might be reactor, whatever.
[00:07:21] They have a property name that's underscore, underscore. This is the super secret dome don't touch it or something crazy.
>> Speaker 2: [INAUDIBLE]
>> Kyle Simpson: Yeah, something like that, that's their name for it, right? Cuz we use that underscore convention to tell people, leave it alone. Symbols are like a way of doing that with a direct data type, as opposed to doing it through the convention of naming okay.
[00:07:44] So it's like if you wanted to put a special like meta property onto an object. It's not hidden, but at least it makes it clear to somebody. Hey you probably shouldn't be messing with this thing. On the scale of one to ten, one being that stupid and ten being that's oh-my-god awesome.
[00:08:01] This is like a 1.1. Okay, I don't really think that I'm gonna ever hardly use that, but you might want to use those for your special matter properties, as opposed to doing the underscore convention, okay? And that's how you use them. You create a symbol use it, okay?
[00:08:20] By the way, we can now do that with object literals because of computed symbols. I mean computed property names. So now we can say, compute the property value. I mean the value of x, and use that as the property name. So by convention that's how we include,
>> Kyle Simpson: Symbols in our object literals, any questions about user symbols like that?
[00:08:46]
>> Kyle Simpson: Like I said, I don't use user symbols but, I introduce you to this data type cuz, the other thing I'm about to teach you is well known symbols and those are super useful.