JavaScript Classes Tutorial

In JavaScript you can use the OOP (Object-Oriented-Programming) feature of "classes" to construct objects which are then useful resources for your script/application.
Learn all about classes in JavaScript in this video.
⭐️ Course Contents ⭐️
⌨️ (00:00) The Basics
⌨️ (14:40) Getters and Setters
⌨️ (22:43) Static Methods
⌨️ (30:11) Inheritance and Extends
⌨️ (40:22) Polymorphism
⌨️ (46:00) Classes in Practice
Learn more about JavaScript in this full course: • JavaScript Basics Course
🎥Tutorial by dcode. Check out the dcode channel for more great tutorials: / @dcode-software
🐦dcode on Twitter: @dcodeyt
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org

[@dcode-software]

Sorry about the light theme! I'll promise to use a dark theme for all my future videos 😁

[@magakz]

Which theme is that ?

[@dcode-software]

@@magakz from memory that one is the Brackets Light theme

[@ahmedk575]

light theme is better for people with sight problems

[@clarkrc82]

Yeah but light theme causes sight problems for those of us who DONT have sight problems lol

[@tharindadivakara2881]

I know it sounds odd, but I work with light themes. 😅 And this theme is really good!

[@user-hs6tg6zy4e]

I've been studying for 6 months. I aspire to be a web developer. In my 6 months, of all the topics i had to learn, this was the best teaching video I've watched. Also, I never comment, but this time I had to. Thank you,

[@karinmeersman5123]

beautifully explained. I especially appreciate the fact that you show how classes can be used in real situations. Often that is missing and then the explanation will not stick. I loved it!

[@jacobwilsh8517]

This was a great tutorial. Concise, clear, straight to the point. Thank you

[@KevinRamirez-vw5kv]

Best video I've seen on classes. First time they really made sense.

[@Kayotesden]

A wonderful & comprehensive revision of basics on Classes. I loved it. Thank you.

[@zeinab_3107]

I searched a lot to find this amazing class toturial. I can't say how thankful I am. It was the best explanation for class on the internet. God bless you❤🙏🏽

[@natashaswan7731]

This is super helpful! I watched many videos on OOP but this one by far more explanatory than all of them. THANK YOU!!!!

[@CianaCorto]

A very helpful refresher course! Thanks Dom!

[@starnsboy]

This is great! Do not be put of by the 1 hour length. Its worth a watch!

[@user-on8jd7tk3t]

Why? he discovers too many things.

[@dev4SEO]

Thank you. I liked the video, it is good and I've learned quite a bit. Just one thing about the last example of DOM manipulation - it was a bit harder to understand, because I felt that not all was laid out in a clear and correct order, so it was a bit confusing. But still - great job, thanks again.

[@sivko23]

who else loves the sound of keyboard?

[@erniea5843]

seriously, get a mic!

[@foxjonesofficial]

Me

[@jepqmw]

sound of keyboard is pretty cool but on white theme background it sucks :'(

[@xi_red4936]

It gives me chills lol

[@RosanaMoreno-vm5df]

Thanks a lot for the beginner-friendly classes' lesson!!! It was easy to understand and entertaining to watch

[@asaipriyans1744]

This was a great video. Clear, straight to the point. Thank you

[@TomFoley247]

Thank you so much. I've found this playlist to be the best JS Classes tutorial out there.

[@freecodecamp]

Here are some more JavaScript resources: JavaScript basics course: kzbin.info/aero/PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5 Another JavaScript course: kzbin.info/www/bejne/laqcoKuwiax4iNU Learn JavaScript in a text-based curriculum: www.freecodecamp.org

[@sumanboi]

"the programmer issa special type of person" 36:00 killed me 😂 🤣

[@JamesShisiah]

This is how front end frameworks are made, from minute #46. Great tutorial

[@ingavaiciakauskaite3485]

Great tutorial, excellent explanations, thanks a lot!

[@user-tj6ob8jz8h]

Enjoyed every second of the tutorial! Especially the practice part. Thank you a lot ;)

[@fatemeetsluck]

This video inspired me to add get and set properties to my own scripting language. Great video as always!

[@djnefrozhardstylepromotion3527]

Amazing tutorial, makes OOP really easy to dive into !

[@eliasvasques80]

Ohhh, fantastic tutorial, thanks for the lesson!

[@maujadiprogrammer]

thank you for the tutorial, it really helps me out.

[@Fishamble]

Thank you. I very mush appreciated the example with an actual real world implementation of a class.

[@pedrolelis7854]

Amazing content! Well explained, just to the point! Thanks A LOT!

[@PapaWilk]

on-screen tutorials like this are such a valuable resource. I followed along until the Classes in Practice section. I lost sight of what we were doing and why we would want to be doing it on our website. While I lost sight of the "big picture," the author's attention to detail was impeccable. Good video.

[@ChrisTian-ox5nr]

OOP can be especially beneficial when building complex websites or applications where you need to model different entities, such as users, products, or orders, and their interactions. It provides a clear and structured way to represent and manipulate these entities in your code.

[@limitless1692]

Great video . Neat introduction into the Class syntax and all its keywords . Thanks !

[@bekhzodbeknematov]

a perfect explanation with examples , i would appreciate

[@frankylopez4477]

Thanks, i liked it a lot. Its really concise and easy to understand. This help a lot for the basics.

[@thabosiphiwemngoma4772]

He's name is DOM can there a better teacher for this class? Oh man!!! great class and very constructive lessons(excuse me there). I needed this because I was about to assume that classes were a react.js syntax

[@brightprogrammer]

short, compact and to the point

[@burgerxxiii]

I finally conquered javascript classes basics, thanks to you!

[@yadikishameer9587]

This might be the first tutorial I have seen that's in bright mode 🤪

[@larreth]

The best OOP lesson i've ever taken!

[@shashankthapa659]

Thank god it took me 10 hours to watch and practice it throughly. Now, Im through! Thanks a lot coach!

[@user-xz8of6pk8q]

Thank for the explanation. Espcially the real situation.

[@user-ke4yx6uw1r]

Amazing amazing amazing. Absolutely loved it. Thank you very much.

[@ArmandoPineda4]

This was great, thanks!

[@jrunin]

excelently explained. Thank you.

[@EsnoFava]

Thanks, I hate reading MDN docs, this is so much better.

[@totfosk]

Dom is the best. The fact that he used underscore on the argements to not get more confusing is key. Most of the tutorials just put this.abc = abc and it's very confusing.

[@asyakim5555]

really understandable. thank you for your work

[@dapolcio3405]

I think this is the only tutorial on youtube where classes are shown in practice. Other tutorials only show theory so to speak and watching them you don't know how to use this theory in real life application.

[@raghumesta26]

Thank you for your effort!

[@wikylhr]

Super easy to understand. Thank you

[@dansmar_2414]

One of the best tutorials!

[@pearlsswine]

Thanks for the video! You did a really good job explaining classes, and I really appreciate using an example at the end of what a class would be used to manipulate the DOM. It actually helps understand the usefulness of classes.

[@MisterAndreSafari]

Great explaining skills. Thx!!

[@emmadebarros6214]

Really helpful, thank you!

[@GitGudZ]

Great Tutorial. Thanks you very much.

Thanks, I always was scared of classes, but now i see it's not thet hard

[@charanckck]

Thank you bro. Very well understood.

[@joedewhurst6569]

This has really helped! thanks :)

[@VocalStudioByTen]

Thank you very much! Very clear!

[@rossfindlay5375]

Great lesson, thanks!

[@Ali-lm7uw]

Nice tutorial. Is there anymore to OOP than this or is knowing this enough?

[@gosinP]

What is the keyboard of your choice? Thank for the video. It will be nice if there are some more practice examples, but either way - it is quite resourceful.

[@markm8090]

Although I'm close to completing a Udemy course, this vid has helped me to understand this part better. Know that this is an old video, but maybe would be better using dark mode in VS (little difficult for me to see the code on my screen). Thanks, love the tutorials! :)

[@DineshKumar-jt5tr]

bro can suggest me good javascript course in udemy for begginer to advance

[@chriseski]

Amazing tutorial, really helpfull. Subscription earned!!

[@henrysemaganda9587]

Great video, you have made my career !!

[@tyresew.4233]

This is free information!!!

[@user-ye4lg5im9y]

Great tutorial! Thanks.

[@Joseph.Ashenafi]

wuu 🤩 , great tutorial

[@AkaExcel]

Thank You for your useful video!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@fregina3813]

Brilliant class, thx a lot

[@emmanuelobonyo291]

Thank you for this.

[@havefun5519]

Thanks for your tutorial, really good.

[@havefun5519]

Ops, I have watched it 2 years ago, finally I re-watch again.haha

[@hazemabdo522]

what a very cool tutorial ❤❤.

[@DineshVutukuru]

Beautiful explanation

[@tuxmusicman]

Fixed my problem with super()! Thank you!

[@tuxmusicman]

I'm still having a problem where the class isn't being updated.

[@MsSamar2005]

excellent tutorial thanks alot

[@matthewdimicelli4191]

Can anybody clarify why the coder is using underscores at the beginning of the function parameters (for example, in the constructor methods)? Does this mean that the variables/arguments are not to be used outside of the class (eg. that they are "private" to the class)?

[@himanshuvashist3446]

thank you for this video. :)

[@SpiritMrKatarsis]

Classes are challenging 😅 Thanks for the video. Great explanation)

[@ericlanglaismm]

Dom, what a great name for a web developer!

[@joostvoncken950]

You just took me too the next level. Thanks!

[@mariyahadzhiyska7681]

Thank you! The tutorial was really helpful!

[@mcurtis13]

Thanks I now understand react lol

[@slmshady539]

yeah in fact I came here because of class-based react components.

[@limitless1692]

Michael Curtis Wow this is insane , I mean shouldn't you understand vanilla javascript before working with any framework ? Just saying ...

[@carmelon8917]

Useful lesson!

[@knightonhd1144]

Good stuff 👍

[@lesterdimitresque6315]

so to sum up what classes (in js) are : they are similar to functions ? but are being used to store objects and values ? did I get that right ?

[@zeroxcrusher]

Why exactly are we adding underscore before parameter name in constructor() function?

[@schlaus_kwab]

repeatedly calling the update method when using add() is a bit confusing. Why does it not remove the "dcode" when you add "dog"? Isn't it supposed to remove all the items if there is already a firsChild dcode? Can you please elaborate more on this? Thank you.

[@armanrozika]

It is in fact remove all the li tags, but after a (while) loop ends/break, it adds child node to it based on the text that added via push method (notice the for loop after while loop inside update function)

[@abhishekkrishna8056]

beautifully explained

[@marcinkalmar9964]

Very good explanation the name of core concept sound very confusing but when it is explain it turn out it isn't hard to absorb.

[@alijoyce2169]

CMD + B and CMD + SHIFT + "+" is what this guy needs in his life.

[@larryisenhourii9636]

Are you using jquery because at the beginning when i do the printDescription, the console shows ${this.width} instead of the width?

[@humayunakhtar2116]

Brother I'm getting this error. Any help? ListBInding.js:14 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

[@myankpraksh]

Thank you so much.

[@sriramnagarajanit]

Super explanation :)

[@michaelmellor6061]

Great content !

[@muhammadjawad9341]

Simple & to the point :)

[@aylincelik6586]

thank youu😊

[@sardertuhin796]

great explanation

[@muhammadsafiullah8428]

Great tutorial.

[@IGNACIOLUISGOMEZ]

Excellent video! I have a question: At minute 59:12 the method "add" is executed. The "add" method has the "update" method inside. Shouldn't the "update" method remove the "firstchild" from the list? Thanks for so much teaching!

[@nouvalkaf]

"update" method does not remove the "firstchild" anymore within "add" since Dom deleted it at minute 56:18. That eventually the "while" part within the "add" method was not executed.

[@mattyblake9427]

this is wonderful