Creating and Using JavaScript Symbols

a few weeks ago I received a request to talk more about symbols in this tutorial we will look at how to create them how to refer to them and for what purpose you might use a symbol that you have created welcome to another tutorial from all things JavaScript where we help bridge the gap between novice and expert to be notified about new tutorials make sure to click that Bell button and subscribe also check out the discount links to my courses that I've included in the description of this tutorial and if you'd like to support the channel there's a link in the description for how you can do that now symbols came to us via the es6 standard so they've been around for some time but are seldom talked about that is probably because their application is limited a symbol is new primitive type in JavaScript so just like a number boolean string a symbol has a primitive type of symbol now what a symbol is is it's a unique identifier that is hidden from the code you can't display or check the unique ID that is created so that might beg the question well what would you use it for well let's first look at how we create one and some properties of a symbol then we will discuss applications so first creating a symbol I'm going to declare a variable here and then I'm going to set it equal to a symbol it's as simple as that now something very important to notice here that we don't use the new keyword new is not a part of the technique used to create a symbol we do use the uppercase s to create a symbol object but we don't use the new keyword so remember that now this has created a symbol let's just take a look at it really quick so I'm gonna save that and open up the console so we can just take a look at some things there we see that it is a symbol object and if we do to string method here we basically get the same thing as a string now when we're creating a symbol there is one a parameter that we can include and this is a description of what that symbol is so this might be helpful for us in identifying why we've done the symbol or why we've created the symbol so I'm gonna put a description in here it's a string and let's just take a look at that same information again so now you can see it just adds the description is all it does but that description can be helpful if we're trying to identify what the purpose of the symbol is why we created it because remember the symbol creates a unique identifier and as you can see here we cannot get access to that unique ID it's a probably a long string of characters but we can't see it we don't know what it is right now the only way we can access this symbol is using the variable now one more thing I want to do here I mentioned that symbol is a new primitive type well if we do a type of the variable we get symbol back and that's the primitive type I'm talking about there so this is the new primitive type we have in JavaScript the newest one that's been added in quite some time so here's how we create a symbol we can add a description to help us identify what it is we can see that it is a new primitive type but what would we use it for now one possible application is inside of an object because as unique ID we can use that symbol as the key in a key value pair and that unique ID would not overwrite another ID that may be a part of that and something else about this unique ID it wouldn't show up along with the other key and so we could use it to create metadata because it won't show up we could put metadata in there about the object and it wouldn't interfere with some of the other properties that we've designated are important so let's just look at that for a second so I'm going to create a new object and I'll put property this is a property I care about we have a name property and now I want to use the symbol as the key to another property now how would I do that if I type in Sim one it will actually create a property Sim one so the way I do that is with square brackets I put the sim one inside of square brackets and then I do a colon and now I can add the data that I want to that key value pair now since I'm talking about an application of metadata let's say we wanted to put a timestamp date and timestamp of when this object was created so let me put that in as the data that I want okay there we have our very simple object no back here I'm going to refresh and let's go ahead and take a look at that now we can see that there is a symbol in there notice it doesn't give us the unique ID we can't see what that unique ideas but we can see the data there however there's something you should be aware of let me jump back here I mentioned that you don't have access to that property that's added with a symbol so let's take a look at that let's do a four in loop and just take a look and see if we can see what that key is or even what that property is so there we're going to display the key and an another console.log statement to display the value of the key in obj so to console.log statements let's see what we get if I come out here and refresh I get name that's the first key and I get the value of Steve it doesn't show us the second property and that's because that second property is not available to us however we could access that property using the variable that contains the symbol so obj and then in square brackets so we can still get access to the data if we need it so that metadata is accessible but it's not going to pollute some of the other properties that we may have and so if we're considering it metadata we may not want it to Pluto those other properties now one other way we can see that we're not able to access the property that is designated by the symbol is using object keys if I use object keys and pass in the object object got keys returns all the keys of an object what do I get back I get back an array which is simply one key and that's the name key I don't get the key that is created with this symbol so just another example of that all right now there is another way to create a symbol that I want to show you and the second way creates a symbol in a way that we can't refer to it another way to refer to it instead of just having to use the symbol all the time so let me show you that because there might be an application for that where you're adding this metadata to a number of different objects and you want to use the same unique identifier you want to use the same symbol so let's look at how we would do that in this case I'm going to declare a variable will do symbol two this time here's how we would create the symbol there is a four method as a part of symbols and then inside of that for method inside the parentheses I can pass in a string that will identify the symbol now this isn't a description of the symbol it's not the same as this up here as I'll show you in a minute this is a way to identify it and so I'm going to call it object data that's my identifier now let's create another object I commented out the previous one so I'll just use the same variable here and we're gonna put the same type of data on here and then we're going to use a symbol this new symbol we created symbol two and we'll just attach metadata again so date object there we go oh semicolon down there all right so now we have an object with that on so let's save that and let's take a look at this again some different ways to work with this No so we can still see that object keys obj is not going to show us that key value pair we're not going to see that but we're able to still access this information and get information about it we can do it the same way we talked about before so here's symbol - there's our metadata we talked about so there's some other ways to identify it so let's say I wanted to determine what string I use to identify it well I can use a key for method and then put in symbol - and also it displays that information to me now also I can use that same string to create additional symbols that have the same unique ID so I'm gonna do the exact same thing as I did up here I mean use that same text description or text identifier I should say the same one here to create another symbol now let's see what that does for me now if I do symbol two equal symbol three I get true those are the same thing also I can go obj and then in square brackets symbol three and it will access that property because those two are the same now because I created those two symbols using the same text identifiers those have the same unique ID so basically I'm able to store that symbol and access it anytime I need to using that text identifier and that allows me to then create additional objects and attach the same information the same metadata using an identifier that I know so for example I could use a square bracket skin but this time I'll do symbol dot four and then inside a parenthesis I'm gonna do the object data like that and I will set this one equal to new date so this is a new object for me so now let's refresh that I don't know why I keep putting a semicolon at the end there let's refresh that let's spell it correctly all right now notice I can refer to that property using any one of the other symbols I've already created because they refer to they point to the same symbol because I used the same text identifier okay so that is a way to create symbols and be able to refer to them again using a text identifier and not having to have access to the variable in which you place the symbol that was what was required for the first technique we used we had to have access to that variable in order to use it here we can have a text identifier that is stored and then we get access to that symbol so once again the two applications for using a symbol one would be to attach metadata to an object that you don't want showing up with the other properties a symbol will give a unique ID and it allows you to do that to an object the second application is if you're trying to add something to an object and you don't want the key to conflict with other keys you want to make sure that it is unique well a symbol will be a unique identifier and it shouldn't conflict with anything else which you already have an object so two possible applications and those applications may come together in certain places now if you found this tutorial and symbols helpful please hit the like button and remember to subscribe also remember the discount links to all my courses in the description section click that Bell button to be notified about new releases I release a new tutorial each week and thanks for watching

Channel: All Things JavaScript, LLC

Views: 3,459

Rating: 4.973856 out of 5

Keywords: JavaScript, Learning, Tutorial, All Things JavaScript, Getting Started, instruction, training, JavaScript Tutorial, Understanding JavaScript, Symbols, Creating and Using JavaScript Symbols

Id: 8BUdadBDC88

Length: 15min 16sec (916 seconds)

Published: Thu Feb 27 2020