Javascript Classes Explained | Javascript Factory Functions | es6 private variables properties

In this video we explore the Javascript Class syntax introduced in ES6. We look at adding parameters, getters, setters, child classes with extends, the super keyword, public properties and private fields. We also look at how Factory Functions help us create private variables when we create objects.

✅ Quick Concepts outline:
Javascript Classes:
(00:00) Intro
(0:11) Classes are "syntactic sugar" in JS
(0:45) Creating a simple class with a constructor
(0:50) Using the keyword this
(1:05) Adding a method to the class
(1:35) Classes are templates / blueprints for objects
(1:40) Using the new keyword to create the object
(1:55) Calling the object's method
(2:00) Adding parameters to the constructor
(3:20) Passing multiple parameters to the constructor
(4:35) Accessing properties with dot notation
(5:15) getters and setters
(6:52) A more readable getter and setter method
(8:15) An array property with a getter and setter
(10:20) A parent "super" class
(11:15) Creating a child class with extends
(11:35) The super keyword
(13:45) No need to create a parent object in order to create a child object from the classes
(16:15) A naming convention for private properties
(17:15) Good intentions but not enforced by the code
(17:45) Factory Functions
(19:50) Instantiating a pizza factory object
(20:20) Factory Functions solve the private properties problem
(22:00) New additions to JS allow public and private class fields
(28:40) How much support for public and private class fields?

📚 Further Reading:
MDN Web Docs:
Eloquent JavaScript Chapter 6:

📺 More Beginner JS Videos:

✅ Follow Me:

#javascript #classes #explained

[easycoding]

I've been looking for a detailed explanation on class for two days and I'm just amazed how good this video is. The only video on youtube that I found explaining how to make properties private in classes. Definitely subscribing.

[DevlogBill]

This is one exceptionally good tutorial! I just knew the basic bare bones concepts of creating classes with objects. You took these basic concepts and grew them in complexity where it is understandable to a simple person like me. Thank you for the education and for making this content free, I am always broke, lol, thank you so much.

[abdelbasset]

As always you're very talented teacher.

[UmitTunes]

You are the first tutor that made me understand super() and class concept for JavaScript. Usually I was confused in React.js tutorials when I try to understand class components!

[yatin]

Again, a great tutorial. As I learned Java as my first language, it was definitely easier grasping the objects and classes concepts. It reinforced past learnings.
Thanks Dave! 🙏
Edit: only one thing I feel mentioning here(for clarity) is, for factory functions we return a JavaScript Object which can be filled in by using the parameters passed to the function in variety of ways we see fit. That is why we get a object in 'myPizza' variable, and we can use it further with dot notation to call the function 'bake' by using it as a key in the key-value pair of the object.

[PavithranLion]

entire class should be crystal clear ...you save my day sir

[lamidimorufat]

Thank you very much for this detailed explanations

[hadibq]

Guess that was a workaround too to add # and limit its use inside classes to mimik the private behavior. Smart quick implementation though to solve the accessibility issue.

[oncoding]

I am learning React from TMZ and there is a section there like since in the first folder. Like I understand functional component in React to be honest, I didn't understand how to pass the previous state and I remember I have learned by one of your videos. So while learning like in the first hours from beginning react since the first minute that I opened that lecture with class component I say to myself. Stop the video right here, go to Dave class lesson of JavaScript (I didn't know it that you have this video I just trusted the logic that you are great, so you are not going to miss to teach us this concept). So after 1h of learning now, I'm going to go back to React with deeper understanding. I like to call it the epistemology of coding. Coming from social background I like to go to the root of the problem and since I enjoy JavaScript but didn't know class I feel more great :) Thank you

[CondeAlberto]

Excellent video, packed with information and the "Can I use" resource as a bonus.
Brilliant, as usual.
👌

[UmerKhokhar-vdnm]

You are a Great Teacher. Thanks for this amazing course Dave😊😊

[gorsahakyan]

Great video, good explanation, thank you very much Dave.

[Grihlo]

Thank you fro another lesson! Things are getting harder :) This video took me more time to understand what's going on.

[ofekezra]

Hello dave, amazing series thanks a lot, are you planning to add more JS projects ?

[manishneog]

Your javascript playlist is helping me a lot, Thanks sir :)😀😀

[webdevlop]

Iam Waiting For Your Java Script Project Tutorail

[roamingcelt]

Please justify obfuscation. Part of OOP was to get away from spaghetti code. Adding obfuscation is adding in spaghetti code. Go here to get there. But that points to this place.
It adds confusion and bloated code.

[waleedreaper]

As of July, 2023, support for both private and public class fields is 93%

[karkisanket]

would you please consider adding time-stamp to the parts of videos like earlier videos of this series.Please it will be reallyu helpful

[josiahcommey]

Dave sir, can I use setter and getter to achieve the same results from using the constructor?
If I can’t please tell the difference in their usage