Web Dev Roadmap for Beginners (Free!): https://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: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT
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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Eloquent JavaScript Chapter 6:
https://eloquentjavascript.net/06_object.html
More Beginner JS Videos:
freeCodeCamp: https://youtu.be/PkZNo7MFNFg
Traversy Media: https://youtu.be/hdI2bqOjy3c
The Net Ninja: https://youtu.be/iWOYAxlnaww
Follow Me:
Twitter: https://twitter.com/yesdavidgray
Reddit: https://www.reddit.com/user/DaveOnEleven
Medium: https://medium.com/@davegray_86804
#javascript #classes #explained