Live Instruction · JavaScript · OOP · Masterschool
Object-Oriented JavaScript —
Prototypes, Closures & Modules
A live Masterschool group session covering object-oriented JavaScript from the ground up — four ways to create objects, prototypical inheritance, ES6 class syntax, closures via IIFEs, and the Revealing Module Pattern. Closes with a direct connection to how these concepts appear in React.
The Session
Covering the same ground four different ways.
This session filled in for the regular instructor and built on the previous day's introduction to object-oriented JavaScript. Rather than repeat the same examples, I expanded the coverage — adding more approaches to object creation, working through the prototype chain with live browser demos, and introducing two new topics: closures through the lens of scope, and the Revealing Module Pattern as a practical application of both.
The core question the session kept returning to was why — why does JavaScript use prototypical inheritance instead of classical inheritance? Why would you choose a factory function over a constructor? Why does a closure let you keep state between calls when a regular function can't? Answering those questions with running code, not just slides, is what makes them stick.
Students participated throughout — asking about the prototype chain, raising edge cases, and testing syntax
live. The session closed by pulling up the React documentation to show how class-based components use the exact
same extends pattern we'd just written.
4
ways to create an object
Masterschool Coding Bootcamp
JavaScript · OOP · Closures · Revealing Module Pattern
International cohort · Live Q&A format
The Content
What the session covered
From JavaScript's origin story to the Revealing Module Pattern — a full arc through object-oriented and functional concepts.
JavaScript Origins
Opened with a brief history of JavaScript and how major technologies (TypeScript, React, Angular, Bootstrap) emerged from companies solving their own problems. Framed the language as a living solution, not a fixed rulebook.
Prototypical Inheritance
Explained why JavaScript doesn't use classical inheritance — it has one construct (the object) and a prototype chain. Walked through how property lookup traverses the chain, what happens when a property isn't found, and why null terminates it.
Object Literals
Started with the simplest approach — declaring an object directly with curly braces and attaching properties and methods with dot notation. Established the baseline before showing more complex patterns.
Factory Functions
Showed how a regular function can return an object without the new keyword. Demonstrated a makePerson factory that accepts name and age as arguments and returns a new object each time — a clean pattern with no constructor syntax.
Object.create()
Demonstrated Object.create() with a personStore prototype object — creating a Sandra object that inherits methods like greet() from the store. Showed the prototype chain live in the browser console to make inheritance visible.
Constructor Functions & new
Walked through the constructor function pattern — capitalizing the function name by convention, using this to attach properties, and calling it with new. Added a method via dot prototype to illustrate how shared methods attach to the prototype.
ES6 Class Syntax
Introduced class syntax as syntactic sugar over constructor functions — the same prototype behavior underneath, dressed up to feel familiar to developers coming from Java or Python. Covered constructor(), method definitions, extends, and super.
Scope & the Window Object
Explained scope in terms of variable lifetime — local variables exist while a function runs, global variables persist until the browser window closes. Opened the window object in the console to show how global variables become properties on it.
Closures via IIFE
Demonstrated why a simple counter function resets to zero every call (scope gets discarded), then fixed it with a closure — an immediately invoked function expression that keeps the counter variable alive across multiple calls.
Revealing Module Pattern
Built a revealing module from scratch: private variables and methods declared inside an IIFE, with only a selected subset returned as a public object. Showed that trying to access private members from outside returns undefined — encapsulation in practice.
React Class Components
Pulled up the React documentation to show how class-based components extend React.Component — the same extends and super(props) pattern students had just written. Connected OOP fundamentals directly to a real-world framework.
instanceof & typeof
Ran instanceof checks on created objects — showing that an Animal instance returns true for both Animal and Person class when chaining extends. Used typeof to show that a class is a function under the hood, reinforcing the syntactic sugar point.
The Approach
Four patterns. One concept. Multiple angles.
The structure of the session reflects a deliberate instructional decision: when there are multiple ways to do the same thing in JavaScript, teaching them side by side — rather than committing to one — builds a more resilient mental model. Students who only learn ES6 class syntax are often confused when they encounter constructor functions in older codebases or prototype-based examples in documentation.
Each pattern was shown with the same example — a person object with a name, an age, and a greet method — so students could compare them directly without having to track new domain concepts at the same time. The question "how would we do this with Object.create()?" lands differently when students have already done it with a factory function.
The session built toward the Revealing Module Pattern not as an advanced topic bolted on at the end, but as a natural destination. Once students understood closures (scope that persists), and objects (a way to organize and expose functionality), the module pattern was the logical next step: use a closure to protect state, and return an object to expose only what the outside world needs.
Closing with React documentation was intentional. Abstract JavaScript concepts are easier to motivate when students can see exactly where they show up in the frameworks they're about to learn.
Object Literals
The baseline — direct declaration, dot notation
Factory Functions
Return an object — no new, no this
Object.create()
Set the prototype explicitly — live chain in console
Constructor + new
this keyword — dot prototype for shared methods
ES6 Classes
Syntactic sugar — extends, super, instanceof
Closures & Modules
IIFE → private state → Revealing Module Pattern
Session Recording
Object-Oriented JavaScript — Live Session
Prototypes, four object creation patterns, ES6 classes, closures, and the Revealing Module Pattern — with live browser demos and student Q&A throughout.
Reflection
Why JavaScript's object model is worth teaching four times.
JavaScript's object model is one of the things that most distinguishes it from the languages many developers learned first. Classical inheritance — classes, subclasses, instantiation — is intuitive because it maps onto how we think about categories in the real world. Prototypical inheritance doesn't map onto anything most people have seen before. You have to teach it by showing it.
That's what this session was designed to do: show the prototype chain in action, in the browser, on objects students could inspect themselves. The moment when a student looks at a Sandra object in the console and sees her own properties alongside an inherited greet function on the prototype is worth more than any diagram.
The Revealing Module Pattern was the most rewarding part to teach because it requires everything that came before. You have to understand scope to understand why the counter resets. You have to understand closures to understand why an IIFE preserves state. You have to understand objects to understand why returning one from an IIFE gives you controlled access to that state. It's a concept that doesn't make sense in isolation — and that makes it a good test of whether the rest of the session actually landed.
1
concept — object creation
Object literal · Factory function · Object.create()
Constructor + new · ES6 class
All roads lead to the prototype chain
Keep Exploring
Related Case Studies
Interested in working together?
I'm open to remote opportunities in technical learning experience design, developer education, and customer enablement.