The Complete Guide to JS Symbols ES6
Vložit
- čas přidán 22. 07. 2024
- 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... - Věda a technologie
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.)
Someone has a crush.
@@pearlsswine lmao
who is the first
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.
Liked, commented, and subscribed. All the other videos on CZcams 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!
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!
Beautiful - the ONLY video lesson on Symbols that actually explains understandable use cases. Well done!
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! :)
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.
This is great, thank you! Was just catching up on your youtube videos and wondered if you might cover multithreading with web workers.
Brilliant explanation Colt,
we need the second video on Syboml :)
Very informative, helped me understand the concept very easily, especially with the examples.
The best video on Symbols! Thank you!
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!
Great video, thank you.
3:06 it's almost remarkable that your random numbers were so similar
Good job explaining this Colt
Thank you
Suddenly, I get it. Perfect. The example for me was the error handler.
You explained that very well thank you very much! keep up the good work :)
Thanks! Symbols would be useful when setting up ActionTypes in React Redux. Guarantees we are using the right "thing" and avoids sloppy coding.
Great video colt keep it up!
Thanks Colt ! Doing a Great Job
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
TheFlyAshTray
thank you will definitely do
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!
Hi colt, can you do a video about microservices? What they are and how they fit into the whole picture?
You're my favorite nerd. Your content is always so fucking high quality.
You are a really good teacher
Colt I desperately need that other video about the "well-known" Symbols
Hi Colt, any idea as to when you will release a full responsive website course from frontend to backend?
hi thanx for the video, can u plz tell me the theme and code formater u use?
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.
would you opt for Symbol() for an id/ key over downloading a library like uuid for React?
Upvoted at 2:50 thank you!!! 🙏
Can anyone please tell me what theme he is using on visual studios
can anyone pls tell the name of the VSCode color scheme (or theme) that is used in this tut?
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
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
So is symbol is just ram address or struct with address and label
great vid!
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!
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
What tool is he using on the right?
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.
How do you auto format the object so nicely? :D
how can i get users signature in my website
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..
Do you have an upcoming course Colt?
Informative!
good lesson, thank u
Thank you!
So its like uid() ?
The video is amazing.
where is another part?
Are symbols a good candidate for React development when you need a unique ID? Awesome explanation, thanks!
I was wondering the same, like could we use them as key properties ?
@@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.
it's better to use meaningful information as keys, such as the index or actual id from data source
In 8:47 why does the switch statement work when BLUE is all caps but u passed in small letters?
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.
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.
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?
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’).
Thanks, bro!
Thank you :)
realy well explained video (y)
Where is the Iterators and Well-known Symbols video you promised?
Please, Please, Please,
how did you do "vertical alignment"?
it seems you are using "prettier"
Thank you
If the Symbol() always unique, why did we assign value manually?
Why it is not like:
const obj = {id: Symbol()}
Wait so we can use Symbol() for react keys?
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()
Fantastic
Thanks a lot 🇰🇿
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...
.... thanks for the video...🤗
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...
hey bro can you do tagged templates
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 CZcams -- what do you think about the format?
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 :)
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++;
}
}
or simply use the subsequent "items" array property to store cars, as everyone do.
Legend !!
Yes!
The mustache joke. Nice. :-) And where's blue been?
oh you were sick, yeah i know the feeling, catchind a liddle colt
Please make video on Fetch Api
Nice
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.
I don't know why your switch statement didn't have the "break" keyword.
just called "return", no need to "break"
@@zanqwq9257 Oh yes. I've understood it now. Thanks.
nice
Hi Colt
When is your react course coming out?
when did he say the he is making a React course?
Its already here
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.
*uses VSC*
Me: *likes and subscribes*
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.
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
your JS masterclass course in udemy is lot lot better than a university education
👍
👌🏻👌🏻👌🏻👌🏻👌🏻
you had me a mustashe
I can't understand this syntax: this[something]
*"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.
Research javascript square brackets vs dots notation
czcams.com/video/D_ESB34x-Wo/video.html
@@moneyharry I think you mean this["something"] is the same as this.something
@@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
@@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.
PLEASE I BEG YOU MAKE A VIDEO ON RxJS
360p atm?
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.
The CZcams servers usually take time to fully allow all the resolutions, despite how hi-def it was originally recorded in.
Hello
Hey, it's spiderman a web developer
Damn, I want to see your mustache
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 :(
@@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 :(
Tom Holland teaching JS
You look like Tom Holland 😆😆
1st comment :)
Lol
Hi Abdisamad :) Where are you from?
@@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. :)
In other words, Symbol, the most useless stupid complicated to get thing ever created. Just I hate it.
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