Codesmith
The Hard Parts of Object Oriented JavaScript
4 hours, 30 minutes
CC
Course Description
Learn the fundamentals of Object Oriented Programming in JavaScript for organizing and scaling your code. You'll learn JavaScript’s prototypal design and how it works to enable the new ES6 classes under the hood. Understanding prototypes and classes in JavaScript is crucial for working with most modern frameworks and for those coming from traditional OOP languages.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I just finished "The Hard Parts of JavaScript OOP" by Will Sentance on Frontend Masters! I loved how Will tackled JavaScript object issues and offered diverse solutions until reaching the OOP approach, which just prototypes behind the scenes. Highly insightful! 🚀
Azedine Ouhadou
OuhadouAzedine
Going through Will Sentance's, "The Hard Parts of Object Oriented JavaScript" on Frontend Masters. Gaining an in-depth understanding of how prototypes govern almost everything related to objects under the hood in JavaScript.
Achara Chisom
Chisom14Solomon
Will Sentance courses on Frontend Masters are the best I've taken. Great use of graphical representations for explaining core basic concepts that we usually don’t understand clearly.
Ricardo Crespo
Ricardo53365192
Course Details
Published: October 22, 2018
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 11 minutes
Will Sentance introduces the ideology of the course, what makes a great software engineer, Codesmith, and how to get the most out of what is taught.
Will gives an overview of what will be taught and then answers why a paradigm, or way of organizing code, exists at all.
Object Creation
Section Duration: 19 minutes
Will starts by establishing objects as the best method to encapsulate data and functionality.
The basic way to assign data to an existing object is introduced.
Will uses Object.create to start a conversation about the DRY principle.
Will diagrams solution 1, a function that returns an object when initiated. It's then explained why the solution wouldn't work in practice.
Prototype & new
Section Duration: 55 minutes
Will introduces the next problem to be solved, which is refactoring the previous solution into one that uses object.create to create objects, but still has access to the functionality.
Will diagrams solution 2 using Object.create and prototype chaining with input from the audience.
Will traces the diagramed solution using increment() on the instantiated user1, demonstrating how JavaScript accesses the function. Lessons are taken away from the solution that impacts the way we consider object oriented programming in JavaScript
Will introduces the `new` keyword and what it automates in object creation, but also how it instantiates the need to refer to it.
Will maps out the object that gets attached to each instantiated function, and what it contains.
Will diagrams solution 3 using the new keyword and prototype chaining with input from the audience.
Will speaks to the benefits and disadvantages that solution 3 has, and topics covered later are foreshadowed.
Scope & this
Section Duration: 34 minutes
Will refactors solution 3 to include the implicit parameter, this. As the solution is diagramed, attention is given to when this is useful, and how scope comes into play.
The UserCreator.prototype.increment function is refactored further, and this poses an interesting problem with scope.
Will diagrams how arrow functions bypass the issue introduced in the previous section.
WIll introduces how JavaScript implements class syntactic sugar.
Will explains how classes in JavaScript are much different than in true OOP languages, and ties the previous sections into the next section of the course.
Default Prototype Chain
Section Duration: 22 minutes
Will uses an example to further explain how __proto__ is built into every object in JavaScript. In addition to __proto__, hasOwnProperty is a built-in method that has bonus functionality afforded to it.
WIll diagrams the prototype chain when calling a method on a function.
Will directs students to the practice problems and sets up pair programming.
Subclassing with Factory Functions
Section Duration: 52 minutes
Will introduces inheritance as a way to create subclasses within JavaScript and explains why inheritance is a misleading term.
Solution 3 is further refactored to implement classes. Will traverses the code with the audience.
Will sets up the next bit of code and explains how this code is interacting with the code that was written in the previous segment. Object.setPrototypeOf is utilized to set the __proto__ of a function to achieve the functionality that we need.
Will continues to diagram the solution and demonstrates how the sub-factory function affects the functionality of an object that is instantiated.
Will concludes this solution by diagramming a prototype lookup by an object that was previously instantiated.
Will reviews what was learned up until now in the course, and looks towards the call and apply functions that will be introduced to control the assignment of the this keyword.
WIll demonstrates how to manually set the value of the this keyword inside of a function.
Subclassing with new and call
Section Duration: 37 minutes
Will diagrams a refactored solution that provides the store of automatically linked functions by utilizing the new keyword.
WIll diagrams a solution that uses the new keyword, but then also uses a prototype chain to grant an object access to certain classes, while another doesn't.
By passing our newPaidUser object (`this`) to userCreator, Will demonstrates how this can refer to a context that is one level up from the current scope.
Will diagrams how instantiating a paidUser object using the new keyword would create a new context to consider.
Will traces the diagramed solution using called functions on the instantiated paidUser, ensuring that functions are specific to the paid user type, but are available to all users.
Subclassing with class, extends & super
Section Duration: 35 minutes
WIll diagrams a user object that is instantiated using the new keyword. No functions are copied on it, but they are still available for use.
Will introduces the extends, and diagrams what it offers to the refactored code.
The last execution context of the course is instantiated, and a paidUser is created using the new keyword. Will also briefly covers reflect.construct(), which acts like the new keyword, but as a function.
Will arrives at the final solution, where a paidUser1 has access to paidUser functionality, and user functionality. The paidUser1 also has the properties of a regular user by using the regular userCreator.
Conclusion
Section Duration: 1 minute
Will concludes the course with reasoning why it's important to understand what is going on under the hood in JavaScript.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops