JavaScript Classes Tutorial

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

[@WisdomStacks]

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

[@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!

[@BernardoGuerreiro-d8m]

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,

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

[@KevinRamirez-vw5kv]

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

[@starnsboy]

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

[@TigranKheranyan-c1s]

Why? he discovers too many things.

[@Happiness-z7l]

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❤🙏🏽

[@jacobwilsh8517]

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

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

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

[@Kayotesden]

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

[@RosanaMoreno-vm5df]

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

[@burgerxxiii]

I finally conquered javascript classes basics, thanks to 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!!!!

[@JamesShisiah]

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

[@Fishamble]

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

[@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!

[@sfoxj]

Me

[@jepqmw]

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

[@xi_red4936]

It gives me chills lol

[@TomFoley247]

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

[@shashankthapa659]

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

[@АринаСамукова]

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

[@frankylopez4477]

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

[@bekhzodbeknematov]

a perfect explanation with examples , i would appreciate

[@EsnoFava]

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

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

[@eliasvasques80]

Ohhh, fantastic tutorial, thanks for the lesson!

[@maujadiprogrammer]

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

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

[@Larreth]

The best OOP lesson i've ever taken!

[@dansmar_2414]

One of the best tutorials!

[@brightprogrammer]

short, compact and to the point

[@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)

[@fatemeetsluck]

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

[@CianaCorto]

A very helpful refresher course! Thanks Dom!

[@yadikishameer9587]

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

[@alijoyce2169]

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

[@herentran]

Thank for the explanation. Espcially the real situation.

[@sowmyakonkala1046]

very nice video for the first time it did not feel like its an hour video

[@স্বচ্ছনিরবতা]

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

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

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

[@ericlanglaismm]

Dom, what a great name for a web developer!

[@limitless1692]

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

[@wieroaisdfjlkds]

What you call "Instance methods" like the getArea method in the rectangle class is actually a prototype method that is shared between all instances of the class.If you were to do something like const prototype = Object.getPrototypeOf(myRectangle1); prototype.getArea = () => 'i am a new method'; console.log(myRectangle1.getArea()); // 'i am a new method' console.log(myRectangle2.getArea()); // 'i am a new method' they would both print out "I am a new method". as also shown by the fact that myRectangle1.hasOwnProperty('getArea'); is false to be a real instance method the constructor would have to be defined as follows: constructor(_width, _height, _color){ this.width = _width; this.height = _height; this.color = _color; this.getArea = function() { return this.width * this.height; } } then if we do the following: myRectangle1.getArea = ()=> 'i am awesome'; console.log(myRectangle1.getArea()); // 'i am awesome' console.log(myRectangle2.getArea()); // 170 myRectangle2.getArea() doesn't change this time as it is it's own instance method and this time myRectangle2.hasOwnProperty('getArea'); is true also the add method in the listBinding class is not the best example to show, if you have a list of 1000 items and want to add one thing you are doing 1000 deletions and 1001 insertions into the dom which is one of the slowest things you could do.

[@kels-nz9if]

thank you so much for this masterpiece 🙏

[@pedrolelis7854]

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

[@tanishpanjwani3117]

JS teacher named Dom. Nice.

[@ingavaiciakauskaite3485]

Great tutorial, excellent explanations, thanks a lot!

[@djnefrozhardstylepromotion3527]

Amazing tutorial, makes OOP really easy to dive into !

[@henrysemaganda9587]

Great video, you have made my career !!

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

[@sumanboi]

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

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

[@tyresew.4233]

This is free information!!!

[@joedewhurst6569]

This has really helped! thanks :)

[@adnansaiyed8843]

Last example was beautiful..

[@fregina3813]

Brilliant class, thx a lot

[@sfoxj]

You can also create functions that start with capital letters and they will create classes Example: var Person = function(age, name) { This.age=age This.name=name }

[@amitkumargupta-]

These are called Constructor function, It's all good but it adds up a little bit of boilerplate when trying to make use of inheritance.

[@charanckck]

Thank you bro. Very well understood.

[@hazemabdo522]

what a very cool tutorial ❤❤.

[@chriseski]

Amazing tutorial, really helpfull. Subscription earned!!

[@michaelmellor6061]

Great content !

[@SpiritMrKatarsis]

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

[@Ali-lm7uw]

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

[@আমরাব্যাচেলরছেলে]

Great tutorial! Thanks.

[@MisterAndreSafari]

Great explaining skills. Thx!!

[@muhammadjawad9341]

Simple & to the point :)

[@abhishekkrishna8056]

beautifully explained

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

[@Joseph.Ashenafi]

wuu 🤩 , great tutorial

[@asyakim5555]

really understandable. thank you for your work

[@emmanuelobonyo291]

Thank you for this.

[@tuxmusicman]

Fixed my problem with super()! Thank you!

[@tuxmusicman]

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

[@sardertuhin796]

great explanation

[@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)?

[@DineshVutukuru]

Beautiful explanation

[@jd-king1760]

Hi Dom - excellent video - so informative - the last section with the was so benificical to see how real application of it works - However I'm stuck - can you direct me? I'm looking to nest classes - so with the example you have - each of the having their own class to define/generate them. My application is a Group Menu Kanban style (so columns) and the Cards - looking for that simple explainer how to reference Cards within Columns👍

[@MsSamar2005]

excellent tutorial thanks alot

[@georgemarwanqana3478]

Great tutorial. The naming of the setter could've been changed though, so that we can pick which area you talking about But great explanation

[@SheikhAmeen]

You mean both the setter and getter have the same name "area"?? Actually it does make sense to name them both the same. When getting, you use: console.log( myRectangle.area ); This calculates the area based on the width and height. And when setting, you say: myRectangle.area = 25; This sets the width and height based on this area. The assigned value becomes the argument to the setter method.

[@josecordero3077]

I like your OOP style.. it’s almost the same as c#

[@havefun5519]

Thanks for your tutorial, really good.

[@havefun5519]

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

[@yashuverma5399]

Awesome tutorial

[@jrunin]

excelently explained. Thank you.

[@binitrupakheti4246]

I love your keyboard sound

[@VocalStudioByTen]

Thank you very much! Very clear!

[@wikylhr]

Super easy to understand. Thank you

[@codezier2738]

Cool video! The syntax moving from Java to this isn't all that different which was my main concern. Since all they teach at school is Java, which we learned JavaScript Instead it has more Freedom and I feel like it has all the concepts we need in real life application (RESTful API JSON) and All front end development is JS so I rlly don't get why we do Java. (Don't get me wrong I like Java but I prefer JavaScript more)

[@sfafsashfdh6589]

2 years passed, have your opinion changed? What are you doing now? Do you have a job as developer?

[@ThisIsLiving__]

I have a question. Why should i use the classes instead of using a function constructor to create a new object and assign properties and method to it

[@alsonick]

It's literally just syntactic sugar, it's just to make the code look much better and cleaner for programmers.

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

[@sonamuhialdeen7866]

Awesome tutorials

[@spicy_bala]

Eye heavy pain while seeing light theme. But your teaching awesome. Thanks

[@rossfindlay5375]

Great lesson, thanks!

[@mariyahadzhiyska7681]

Thank you! The tutorial was really helpful!

[@mattyblake9427]

this is wonderful

[@envisionstudio2512]

Super bro...!

[@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 ?

[@Anon-yy4ns]

First 45min are excellent as it's well explained. Last 15 min you're rushing through it and throwing in several new techniques and combing them, hence causing confusion.

[@kozie928]

He didn't explain it because it's an OOP JS tutorial and not HTML 😅 (An intermediate JS tutorial requires basic HTML knowledge)

[@myankpraksh]

Thank you so much.

[@somilbichpuriya161]

How to declare a static variable for method... For example ,if I want to count the number of objects created for a class.