Javascript Classes Explained | Javascript Factory Functions | es6 private variables properties
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
✅ 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:
Classes: developer.mozilla.org/en-US/d...
Eloquent JavaScript Chapter 6:
eloquentjavascript.net/06_obj...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Ful...
Traversy Media: • JavaScript Crash Cours...
The Net Ninja: • Modern JavaScript Tuto...
✅ Follow Me:
Twitter: / yesdavidgray
Reddit: / daveoneleven
Medium: / davegray_86804
#javascript #classes #explained - วิทยาศาสตร์และเทคโนโลยี
You are a good teacher. Keep up the quality work.
Thank you!
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.
Glad to hear it EC! 💯🚀
Great video, good explanation, thank you very much Dave.
Thank you very much for this detailed explanations
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.
You're very welcome!
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!
Glad I could help! 💯
Great stuff. Much appreciated.
Glad I could help!
Excellent video, packed with information and the "Can I use" resource as a bonus.
Brilliant, as usual.
👌
Thank you, Alberto! 🙏
Thank you fro another lesson! Things are getting harder :) This video took me more time to understand what's going on.
You're welcome, Grigory! Yes, classes are a more complex topic when you are staring out. 💯
As always you're very talented teacher.
Thank you!
Your javascript playlist is helping me a lot, Thanks sir :)😀😀
You're welcome, Manish! 🙏
You are a Great Teacher. Thanks for this amazing course Dave😊😊
You're very welcome!
Nice tutorial!
Thanks!
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.
You're very welcome!
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.
Great tutorial
Thank you!
entire class should be crystal clear ...you save my day sir
Glad to hear that!
Wow...🙌🙌🙌🙌
thanks
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
Glad I could help!
Hello dave , amazing series thanks a lot, are you planning to add more JS projects ?
Thank you! 🙏 I may do more in the future. My focus this year has been React, MERN and other areas of Javascript. I always come back to Vanilla JS though! 💯
Super sir
Thanks!
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
Setters and getters are object methods. A constructor will define initial values for an object.
Iam Waiting For Your Java Script Project Tutorail
As of July, 2023, support for both private and public class fields is 93%
would you please consider adding time-stamp to the parts of videos like earlier videos of this series.Please it will be reallyu helpful
This video has many timestamps in the description. Maybe the description did not load for you?
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.
You are a great teacher. No doubt. But I have to say, JS has been extremely hard to understand. Loved HTML and CSS. This class is giving me headaches lol. When I checked the comments seems I'm the only one. I felt so bad and stupid. However, It also seems people here already have a basic experience and I'm having the first contact by your videos. So I wonder if there is any tip or path I should go first. Maybe start again or keep studying HTML/CSS more... I was planning to finish your JS videos before that but it feels I'm holding myself back now. So frustrating
Sorry to hear but don't give up. JS is hard. To supplement these videos, I also suggest the exercises at freecodecamp.org
What a cool site. Great way to review your content. Thank you very much@@DaveGrayTeachesCode
Is there a reason why 'getCrust' is declared before 'setCrust'?
Nope doesnt matter which one before the other
Sir please sir class explain agian another video sir please 🙏🙏🙏 i al from india.i have language problem also.you class i watched html css also very good.but javascript classes part i feel tough.you can explain slovely another video sir please sir.this for kind to tell your subscriber 🙏🙏🙏
Try changing the playback speed. Maybe that helps.
OKAY NOW MAKE ONE WITH METHODS
At 1:05 we add the bake() method to the first example and other methods are discussed and displayed in the video, too. With examples of methods provided throughout the tutorial, I'm not sure what you are requesting / wanting / missing / or SHOUTING? Please clarify. Thanks.
@@DaveGrayTeachesCode I was looking for a different way to hide class methods just like there’s private fields for properties.
Ah I see. It has been awhile since I made this tutorial, but I think you can review the factory function portion for a current way to make private properties and methods. 👍🚀
Now I want a pizza.
🍕🍕🍕
Imagine a pizza with pepperoni crust. 😂
Classes don't belong in JavaScript!
How come..?