The Complete Guide to JS Symbols ES6

In this video I cover the new-ish primitive type: Symbols! What are they? How does they work? When would you use them? Towards the end of the video I show three different use cases/examples of Symbols in action. To help decide on future video topics, make sure to subscribe and turn on notifications!
If you're ready to launch your career as a software engineer, check out my job-guaranteed bootcamp with Springboard: springboard.com/workshops/sof...

[@dave_ynh]

It's just me, or every time when you watch a video lesson from Colt Steele - you smile? Colt, you are the second teacher in my life who: 1) brilliantly delivers the material 2) dilutes it in time with jokes so that brains don't boil. I think that's what talent is. And if someone doesn't take my word for it... Well, Ask me anything you want and I will answer without hesitation: Rusty is the sweetest and most amazing dog in the world!:) Thank you very much for your work, Colt! (P.S. Sorry for the possible clumsiness of my English. I'm working on it.)

[@pearlsswine]

Someone has a crush.

[@lycan2494]

@@pearlsswine lmao

[@nicholasc.5944]

who is the first

[@SyedAli-kr6qw]

To me personally JS is a monster and this teacher tames it like a badass. Listening to his videos is a joy not a mess.

[@imtanuki4106]

Beautiful - the ONLY video lesson on Symbols that actually explains understandable use cases. Well done!

[@Shubham-b]

Colt, anything that you teach is just a blessing for us. Glad you are bringing out more content. I would love if you could make some more substantial project videos like Yelpcamp!

[@CrimsonJoker641]

Liked, commented, and subscribed. All the other videos on KZbin on this topic made my head spin. But as soon as I come to yours, all the sudden it makes sense. Please never stop making videos, you really got a talent and I can see why you are a teacher!

[@sergeycleftsow4389]

This video is just splendid! I literally have killed half of my day trying to find out a real explanation why symbols can be indispensable. There are lots of resources attempting to reveal this but it seems they are not able to figure out the core problem preventing to realize the subject. Fortunately, this is the exact place to obtain such knowledge. It is told very simple, but logically and intelligently. +1000! Colt is a great teacher, indeed! :)

[@alveek]

The most popular videos are like "what you need to become a web developer in 2019?" or "Which framework to use". But your content is quite unique so far. Thank you.

[@russellabraham9208]

This is great, thank you! Was just catching up on your youtube videos and wondered if you might cover multithreading with web workers.

[@shashanknigade3662]

Very informative, helped me understand the concept very easily, especially with the examples.

[@anton4488]

The best video on Symbols! Thank you!

[@mustafaalfar7936]

Brilliant explanation Colt, we need the second video on Syboml :)

[@theprogramminggoat1859]

Good job explaining this Colt

[@FrankLi92]

Hey Colt, I bought both your web dev courses and the javascript data structures course. Really liking it so far. As I'm preparing for interviews with Leetcode and such, I do find myself wanting more content that teaches more how to solve various problems. You gave some nice strategies like sliding window, but if anyone can help fundamentally change how I approach problems, it would be you. If you can do more advanced content with that in mind, that'd be great! Afterall, besides projects, the algorithm-intensive tests are generally what stands between a candidate and a new job. Cheers, mate!

[@squidneyj7097]

Thank you

[@vitaliyd23]

Great video colt keep it up!

[@EdgyVidyaGeneral]

Great video, thank you. 3:06 it's almost remarkable that your random numbers were so similar

[@ciceroaraujo5183]

You are a really good teacher

[@ShirazEsat]

Thanks! Symbols would be useful when setting up ActionTypes in React Redux. Guarantees we are using the right "thing" and avoids sloppy coding.

[@000djw000]

Suddenly, I get it. Perfect. The example for me was the error handler.

[@ViciousViscount]

You're my favorite nerd. Your content is always so fucking high quality.

[@Me-ik9pj]

Thanks Colt ! Doing a Great Job

[@Mohammed-nr8ys]

hi colt , i am near to finish the web developer bootcamp . i want to see video that you teaching us how to be very good developer ( what is the thing we do , the mistakes in coding ) thanks colt i learned so much from you , you realy are the best thanks a lot

[@Mohammed-nr8ys]

TheFlyAshTray thank you will definitely do

[@AnweshAdhikari]

Informative!

[@jeinernoriega7910]

Hi colt, can you do a video about microservices? What they are and how they fit into the whole picture?

[@lucio2081]

great vid!

[@egorshumanskii8026]

Colt, tell us please the pros and cons of using relational and non-relational databases. Some sort of comparison. Especially Describe a decision-making process when i should use relational or non-relational DB. Thanks!

[@rachview]

Thank you!

[@rohanshenoy8353]

Colt I've taken alot of your courses on udemy..Love your contents. Can you add more on your web developer boot camp, that covers the latest Javascript content or post it here.

[@apall2764]

Colt I desperately need that other video about the "well-known" Symbols

[@mostafagh3573]

good lesson, thank u

[@gokharol]

Upvoted at 2:50 thank you!!! 🙏

[@theway5258]

Thanks, bro!

[@keemeshrampersad8859]

Hi Colt, any idea as to when you will release a full responsive website course from frontend to backend?

[@a21871]

Thank you :)

[@husainahmmed9025]

Thank you

[@mhezzetjr]

hi thanx for the video, can u plz tell me the theme and code formater u use?

[@aniket-kulkarni]

Fantastic

[@RogerThat902]

Are symbols a good candidate for React development when you need a unique ID? Awesome explanation, thanks!

[@JoseNavas]

I was wondering the same, like could we use them as key properties ?

[@The14Some1]

@@JoseNavas The main downside for this particular usecase is that symbols are not serializable, so whenever you would want to send them (via network or so) it will be problematic. The another disadvantage is that they are not very human-readable, and there is no way you can distinguish two symbols with "listItem" description whatsoever.

[@balls2thewall724]

it's better to use meaningful information as keys, such as the index or actual id from data source

[@yyydollars8456]

Hi Mr Colt I'm New at these things and I was wondering if *THE WEB DEVELOPER BOOTCAMP* course will make me build website with the ability to put live streams in it just for one guy

[@yassine_klilich]

realy well explained video (y)

[@hardikganatra2453]

Legend !!

[@moneyharry]

The video is amazing. where is another part?

[@joshualevan]

would you opt for Symbol() for an id/ key over downloading a library like uuid for React?

[@zaraczkizaraczki1755]

.... thanks for the video...🤗

[@sb9185]

Thanks a lot 🇰🇿

[@amberdawn6793]

Hi, would you mind clarifying something for me please? Around 5 min you show an example of using symbol for a user object and manually set the ID or symbol value. Did you just do this to help us visualize what it would look like or should we actually be hard coding a new symbol each time. I thought invoking symbol() automatically creates a value like 31515461564 without you actually having to do anything else. Please and thanks!

[@evenaicantfigurethisout]

8:54 this is a very useful use case, but how did getthreatlevel function know you intend to use Symbols as opposed to just plain strings?

[@UsernameUsername0000]

Two years late, but the switch cases test the function input against the Symbols defined (RED, ORANGE, etc). The string ‘blue’ is not the same as the BLUE switch case which refers to Symbol(‘blue’).

[@devashishbahri3353]

can anyone pls tell the name of the VSCode color scheme (or theme) that is used in this tut?

[@karthikeyan-hz8sw]

Yes!

[@christopherli2827]

Do you have an upcoming course Colt?

[@naveedalirehmani2959]

Can anyone please tell me what theme he is using on visual studios

[@420_gunna]

I really like the Traversy series on "JS Cardio" -- running through those has been an _awesome_ way to learn and build muscle memory. I wish there were more videos of a similar format on KZbin -- what do you think about the format?

[@ColtSteeleCode]

Hey Sam, definitely a fan of those short exercises and activities. I really like the name JS Cardio...I'll have to find something equally catchy :)

[@SuperQuwertz]

How do you auto format the object so nicely? :D

[@confuseduck227]

when i use $ inside ' ' or " " it doesn't wor ks as a string only and not as a function can you help me resolve it

[@satya4866]

Nice

[@dotanshlichta4348]

oh you were sick, yeah i know the feeling, catchind a liddle colt

[@boopfer387]

Q: can we use symbol's for unique keys in React without having to rely on UUID or some other NPM package? I guess I could answer my own question by giving it a whirl..

[@karansinghnegi9384]

Just one question , what if the third party code has [id] = 123 , Symbol in it. And we are doing , user[id] = 23 , This will still overwrite their Symbol. Isn’t it ? So Whats the benefit

[@erykczajkowski8226]

What is the VS Code color theme that you used here? :) I'm not thrilled with the use of Symbols as property names/references, as you need to constantly store the instance of the symbol to be able to access the property which does not seem convenient at all... You'd have to use the Symbol.for() to be able to access the properties in a more general way, which however you did not do in the examples.

[@aymanayman9000]

So is symbol is just ram address or struct with address and label

[@bolajahmad]

Why does the object property not log in the order it was written in when you console.log it, I mean it doesn't exactly change the object data but I would expect it to log the exact the same order and way you wrote it, I'm talking about 5:07.

[@heretoinfinity9300]

What tool is he using on the right?

[@antonytomy7215]

nice

[@johnrock174]

The mustache joke. Nice. :-) And where's blue been?

[@frownless]

In 8:47 why does the switch statement work when BLUE is all caps but u passed in small letters?

[@joeymdye]

Because the switch statement is checking to see if the value of color is equal to the value that was stored in variable BLUE, which was 'blue'. The value of cat was also 'blue', so both inputs were outputting the same response, which is why he used a symbol, so the value of variable BLUE would be unique. This threw me off at first as well.

[@jacobgasser3093]

*uses VSC* Me: *likes and subscribes*

[@shapelessed]

Gotta say, I've been using JS for 4 year already and never had the need to use symbols until I started an embedded db project...

[@bhavikakapadia2462]

Hi Colt When is your react course coming out?

[@christopherli2827]

when did he say the he is making a React course?

[@bicyclingmartian1873]

Its already here

[@maorben3313]

So its like uid() ?

[@jucoallison5741]

how can i get users signature in my website

[@zealousprogrammer4539]

Steele & Wes bos are highly respected for JS dev: I would like you to kindly answer a question that intrigue me, Why Rubi programming is so overlooked ? I don't get it why we let it die just to copy it's features ? Symbol, Map, Filter, template literals [Ruby: #{} ] and many others, I am a newbie so excuse my ignorance under the hood there may be a deep reason why JAVA and JS are still maintained... Because every new ft introduced in these languages were already in Rubi since 95 built in.

[@aymanayman9000]

Well Ruby is kinda of weird languages and. The features you mention is in python also to be honest there's something about Ruby syntax make it weird for me js is the worst famous languages it's crazy but they enforced to teach it cause it's the only language in the browser but I prefer to write code in js than Ruby it's elegant but in a strange way but if you like it then go with it I thought nk in USA they have demand on it

[@JesustheSaviour311]

👍

[@ShujathHussain0]

your JS masterclass course in udemy is lot lot better than a university education

[@mehrshad-moradshan9670]

👌🏻👌🏻👌🏻👌🏻👌🏻

[@stevenedwards8353]

Where is the Iterators and Well-known Symbols video you promised?

[@LuizOtavio-lr7kc]

It would be problematic if I needed to save the Symbol of any item in the database. Considering this, I reached the conclusion that this feature is intended to be used during the lifecycle of the operation since we don't have access to the identifier that distinguishes each Symbol.

[@hemangshrimali6308]

Please make video on Fetch Api

[@hamedelahifar7472]

Please, Please, Please, how did you do "vertical alignment"? it seems you are using "prettier"

[@johnconnor9787]

If the Symbol() always unique, why did we assign value manually? Why it is not like: const obj = {id: Symbol()}

[@jl-dq5ch]

you had me a mustashe

[@miunify]

Wait so we can use Symbol() for react keys?

[@ShirazEsat]

I was wondering the same thing, or whether it's an anti pattern. I think it would be more correct to add it to the objects that you are iterating, rather than directly as the keys property. That is, keys=obj.id, where id is set to Symbol()

[@ChrisFotosMusic]

hey bro can you do tagged templates

[@Retrofire-47]

it seems like much of this behavior has changed? at least in August of 2022 i cannot define a Symbol property using the square brackets, nor are Symbol primitives hidden from the console output...

[@romikonlinepotapenko3475]

What if I define the length property inside the constructor using Object.defineProperty() method and make it not enumerable?: class Train { constructor(){ Object.defineProperty(this, "length", { enumerable: false, value: 0, writable: true }); } add(car,contents){ this[car] = contents; this.length++; } }

[@The14Some1]

or simply use the subsequent "items" array property to store cars, as everyone do.

[@jamjam3448]

I don't know why your switch statement didn't have the "break" keyword.

[@zanqwq9257]

just called "return", no need to "break"

[@jamjam3448]

@@zanqwq9257 Oh yes. I've understood it now. Thanks.

[@Skorm88K]

PLEASE I BEG YOU MAKE A VIDEO ON RxJS

[@lazymacs2823]

Hey, it's spiderman a web developer

[@ayoobsaad]

The last example was not easy at all, I'm struggling with it now, and I'm not sure if I'll be able to understand it or not.

[@JK99LP]

Damn, I want to see your mustache

[@ColtSteeleCode]

I have tried in the past...and let's just say it does not look good. At all. My dad has had a huge mustache for his entire life, but apparently I didn't get that gift :(

[@JK99LP]

@@ColtSteeleCode I'm kind of in the same situation to be honest... I just don't want to have the skin of a baby on my face :(

[@alexblue8524]

I can't understand this syntax: this[something]

[@moneyharry]

*"this"* represents the object it is currently in or belongs to. And this[something] is the same as this.something, but this approach is used when the property name is dynamic.

[@maxp918]

Research javascript square brackets vs dots notation kzbin.info/www/bejne/epCohHVpad1gjdE

[@Daniel_WR_Hart]

@@moneyharry I think you mean this["something"] is the same as this.something

[@moneyharry]

@@Daniel_WR_Hart "something" could be a variable that holds some string value, but if it is a string itself then you have to use quotes

[@Daniel_WR_Hart]

@@moneyharry I know, I just didn't think it was clear from your example if 'something' was a constant string or a variable named 'something' but that had a different implied string value.

[@veerendhar]

Tom Holland teaching JS

[@tadejdanev5030]

360p atm?

[@ColtSteeleCode]

Hi Tadej, not sure why it was doing that (I had the same issue on my end) but it looks like it's working now on all resolutions.

[@FrankLi92]

The KZbin servers usually take time to fully allow all the resolutions, despite how hi-def it was originally recorded in.

[@sproutboot]

Hello

[@abdisamadkhalif4283]

1st comment :)

[@babatundeololade6765]

Lol

[@ColtSteeleCode]

Hi Abdisamad :) Where are you from?

[@abdisamadkhalif4283]

@@ColtSteeleCode from Somalia, FYI: I've enrolled almost all of your Udemy courses! You're one of my top 5 Udemy instructors provided I've 30+. Thank you so much for your support. :)

[@shaan8729]

You look like Tom Holland 😆😆

[@Beto64777]

In other words, Symbol, the most useless stupid complicated to get thing ever created. Just I hate it.

[@Retrofire-47]

i guess i am just confused about its utility. i thought i could use Symbol primitives really effectively when creating `enum` like data types, but it turns out the Symbol primitive cannot even be converted to a number or string, so it just seems utterly pointless to me atm