The Complete Guide to JS Symbols ES6

Поделиться
HTML-код
  • Опубликовано: 11 июл 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...
  • НаукаНаука

Комментарии • 132

  • @dave_ynh
    @dave_ynh 5 лет назад +87

    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.)

  • @SyedAli-kr6qw
    @SyedAli-kr6qw 4 года назад +5

    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.

  • @Shubham-b
    @Shubham-b 5 лет назад +5

    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!

  • @imtanuki4106
    @imtanuki4106 Год назад +3

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

  • @CrimsonJoker641
    @CrimsonJoker641 5 лет назад

    Liked, commented, and subscribed. All the other videos on RUclips 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
    @sergeycleftsow4389 5 лет назад

    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
    @alveek 5 лет назад +1

    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.

  • @anton4488
    @anton4488 5 месяцев назад

    The best video on Symbols! Thank you!

  • @shashanknigade3662
    @shashanknigade3662 Год назад

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

  • @mustafaalfar7936
    @mustafaalfar7936 4 года назад

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

  • @squidneyj7097
    @squidneyj7097 5 лет назад

    Thank you

  • @theprogramminggoat1859
    @theprogramminggoat1859 4 года назад

    Good job explaining this Colt

  • @russellabraham9208
    @russellabraham9208 4 года назад

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

  • @FrankLi92
    @FrankLi92 5 лет назад

    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!

  • @vitaliyd23
    @vitaliyd23 5 лет назад

    Great video colt keep it up!

  • @ciceroaraujo5183
    @ciceroaraujo5183 4 года назад

    You are a really good teacher

  • @000djw000
    @000djw000 2 года назад

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

  • @linoymiz22
    @linoymiz22 12 дней назад

    You explained that very well thank you very much! keep up the good work :)

  • @gokharol
    @gokharol 3 года назад

    Upvoted at 2:50 thank you!!! 🙏

  • @EdgyVidyaGeneral
    @EdgyVidyaGeneral 5 месяцев назад

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

  • @Mohammed-nr8ys
    @Mohammed-nr8ys 5 лет назад +2

    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
      @Mohammed-nr8ys 5 лет назад

      TheFlyAshTray
      thank you will definitely do

  • @ShirazEsat
    @ShirazEsat 4 года назад +2

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

  • @ViciousViscount
    @ViciousViscount 2 года назад

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

  • @rachview
    @rachview Год назад

    Thank you!

  • @lucio2081
    @lucio2081 Год назад

    great vid!

  • @AnweshAdhikari
    @AnweshAdhikari Год назад

    Informative!

  • @theway5258
    @theway5258 4 года назад

    Thanks, bro!

  • @mostafagh3573
    @mostafagh3573 2 года назад

    good lesson, thank u

  • @apall2764
    @apall2764 5 лет назад +1

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

  • @rohanshenoy8353
    @rohanshenoy8353 5 лет назад

    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.

  • @husainahmmed9025
    @husainahmmed9025 5 лет назад

    Thank you

  • @a21871
    @a21871 2 года назад

    Thank you :)

  • @Me-ik9pj
    @Me-ik9pj 4 года назад

    Thanks Colt ! Doing a Great Job

  • @aniket-kulkarni
    @aniket-kulkarni 4 года назад

    Fantastic

  • @egorshumanskii8026
    @egorshumanskii8026 5 лет назад

    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!

  • @hardikganatra2453
    @hardikganatra2453 3 года назад

    Legend !!

  • @yassine_klilich
    @yassine_klilich 5 лет назад

    realy well explained video (y)

  • @zaraczkizaraczki1755
    @zaraczkizaraczki1755 5 лет назад

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

  • @jeinernoriega7910
    @jeinernoriega7910 5 лет назад +1

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

  • @sb9185
    @sb9185 2 года назад

    Thanks a lot 🇰🇿

  • @karthikeyan-hz8sw
    @karthikeyan-hz8sw 3 года назад

    Yes!

  • @RogerThat902
    @RogerThat902 5 лет назад +9

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

    • @JoseNavas
      @JoseNavas 4 года назад +1

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

    • @The14Some1
      @The14Some1 Год назад +1

      @@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
      @balls2thewall724 9 месяцев назад

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

  • @moneyharry
    @moneyharry 4 года назад

    The video is amazing.
    where is another part?

  • @keemeshrampersad8859
    @keemeshrampersad8859 5 лет назад

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

  • @dotanshlichta4348
    @dotanshlichta4348 4 года назад

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

  • @satya4866
    @satya4866 3 года назад

    Nice

  • @yyydollars8456
    @yyydollars8456 5 лет назад

    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

  • @evenaicantfigurethisout
    @evenaicantfigurethisout 3 года назад +1

    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
      @UsernameUsername0000 11 месяцев назад

      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’).

  • @mhezzetjr
    @mhezzetjr 4 года назад

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

  • @johnrock174
    @johnrock174 4 года назад

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

  • @amberdawn6793
    @amberdawn6793 4 года назад

    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!

  • @jacobgasser3093
    @jacobgasser3093 5 лет назад +1

    *uses VSC*
    Me: *likes and subscribes*

  • @ShujathHussain0
    @ShujathHussain0 5 лет назад +2

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

  • @joshualevan
    @joshualevan Год назад

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

  • @shapelessed
    @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...

  • @antonytomy7215
    @antonytomy7215 3 года назад

    nice

  • @420_gunna
    @420_gunna 5 лет назад +3

    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 RUclips -- what do you think about the format?

    • @ColtSteeleCode
      @ColtSteeleCode  5 лет назад +1

      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 :)

  • @christopherli2827
    @christopherli2827 5 лет назад

    Do you have an upcoming course Colt?

  • @erykczajkowski8226
    @erykczajkowski8226 2 года назад

    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.

  • @SuperQuwertz
    @SuperQuwertz 2 года назад

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

  • @karansinghnegi9384
    @karansinghnegi9384 4 года назад

    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

  • @boopfer387
    @boopfer387 3 года назад

    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..

  • @JesustheSaviour311
    @JesustheSaviour311 2 года назад

    👍

  • @bolajahmad
    @bolajahmad 4 года назад

    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.

  • @jl-dq5ch
    @jl-dq5ch 3 года назад

    you had me a mustashe

  • @mehrshad-moradshan9670
    @mehrshad-moradshan9670 2 года назад

    👌🏻👌🏻👌🏻👌🏻👌🏻

  • @devashishbahri3353
    @devashishbahri3353 4 года назад

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

  • @aymanayman9000
    @aymanayman9000 4 года назад

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

  • @confuseduck227
    @confuseduck227 4 года назад

    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

  • @zealousprogrammer4539
    @zealousprogrammer4539 5 лет назад

    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
      @aymanayman9000 4 года назад

      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

  • @frownless
    @frownless 5 лет назад

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

    • @joeymdye
      @joeymdye 5 лет назад

      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.

  • @bhavikakapadia2462
    @bhavikakapadia2462 5 лет назад +4

    Hi Colt
    When is your react course coming out?

  • @naveedalirehmani2959
    @naveedalirehmani2959 3 года назад

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

  • @heretoinfinity9300
    @heretoinfinity9300 4 года назад

    What tool is he using on the right?

  • @hemangshrimali6308
    @hemangshrimali6308 4 года назад

    Please make video on Fetch Api

  • @miunify
    @miunify 4 года назад

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

    • @ShirazEsat
      @ShirazEsat 4 года назад

      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()

  • @jucoallison5741
    @jucoallison5741 4 года назад

    how can i get users signature in my website

  • @stevenedwards8353
    @stevenedwards8353 Год назад

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

  • @LuizOtavio-lr7kc
    @LuizOtavio-lr7kc 7 месяцев назад

    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.

  • @johnconnor9787
    @johnconnor9787 2 года назад

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

  • @maorben3313
    @maorben3313 2 года назад

    So its like uid() ?

  • @Skorm88K
    @Skorm88K 4 года назад

    PLEASE I BEG YOU MAKE A VIDEO ON RxJS

  • @romikonlinepotapenko3475
    @romikonlinepotapenko3475 2 года назад

    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
      @The14Some1 Год назад

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

  • @Retrofire-47
    @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...

  • @hamedelahifar7472
    @hamedelahifar7472 Год назад

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

  • @ChrisFotosMusic
    @ChrisFotosMusic 3 года назад

    hey bro can you do tagged templates

  • @jamjam3448
    @jamjam3448 4 года назад +1

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

    • @zanqwq9257
      @zanqwq9257 4 года назад +1

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

    • @jamjam3448
      @jamjam3448 4 года назад +1

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

  • @JK99LP
    @JK99LP 5 лет назад

    Damn, I want to see your mustache

    • @ColtSteeleCode
      @ColtSteeleCode  5 лет назад +1

      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
      @JK99LP 5 лет назад

      @@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 :(

  • @lazymacs2823
    @lazymacs2823 3 года назад

    Hey, it's spiderman a web developer

  • @veerendhar
    @veerendhar 3 года назад

    Tom Holland teaching JS

  • @ayoobsaad
    @ayoobsaad 3 года назад

    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.

  • @alexblue8524
    @alexblue8524 4 года назад +3

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

    • @moneyharry
      @moneyharry 4 года назад

      *"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
      @maxp918 4 года назад

      Research javascript square brackets vs dots notation
      ruclips.net/video/D_ESB34x-Wo/видео.html

    • @Daniel_WR_Hart
      @Daniel_WR_Hart 4 года назад

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

    • @moneyharry
      @moneyharry 4 года назад

      @@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
      @Daniel_WR_Hart 4 года назад

      @@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.

  • @sproutboot
    @sproutboot 4 года назад

    Hello

  • @abdisamadkhalif4283
    @abdisamadkhalif4283 5 лет назад +2

    1st comment :)

    • @babatundeololade6765
      @babatundeololade6765 5 лет назад +1

      Lol

    • @ColtSteeleCode
      @ColtSteeleCode  5 лет назад +1

      Hi Abdisamad :) Where are you from?

    • @abdisamadkhalif4283
      @abdisamadkhalif4283 5 лет назад +1

      @@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. :)

  • @tadejdanev5030
    @tadejdanev5030 5 лет назад

    360p atm?

    • @ColtSteeleCode
      @ColtSteeleCode  5 лет назад

      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
      @FrankLi92 5 лет назад

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

  • @shaan8729
    @shaan8729 4 года назад

    You look like Tom Holland 😆😆

  • @Beto64777
    @Beto64777 2 года назад +2

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

    • @Retrofire-47
      @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