Design Patterns Advanced
Design patterns are proven, reusable solutions to common software problems — like the Singleton, Observer, and Factory patterns — that give developers a shared vocabulary for structuring flexible, maintainable JavaScript code.
Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.
Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:
Master Factory, Singleton, Strategy, Observer, Decorator, and Facade patterns for scalable applications
What You'll Learn
Design patterns are reusable solutions for common problems in JavaScript applications. They are not "copy/paste code" — they're mental tools to structure your app cleanly so it's easier to extend, debug, maintain, test, and scale. Every professional developer uses patterns daily.
⭐ The 3 Core Pattern Categories
1. Creational
Object creation: Factory, Singleton, Builder, Prototype
2. Structural
Object relationships: Adapter, Facade, Decorator, Proxy
3. Behavioral
Object behaviour: Strategy, Observer, Command, State
⭐ 1. Factory Pattern
Creates objects without exposing the creation logic. Use when object creation depends on input or you need different classes based on conditions.
Use when: Creation logic is variable, many object types
Avoid when: Only one type exists, simple creation
⭐ 2. Singleton Pattern
Ensures only one instance of a class exists throughout the app. Perfect for configuration, database connections, logging, caching, or global state.
⚠️ Warning: Don't use Singletons for user-specific data, UI state, or anything that should reset per page/component.
⭐ 3. Strategy Pattern
Switch between different algorithms without rewriting code. Your anti-if/else superpower for payment methods, sorting, filters, shipping rules, etc.
⭐ 4. Observer Pattern
One event, many listeners. Used in UI frameworks, WebSockets, pub/sub systems, notifications, and data stores.
⭐ 5. Decorator Pattern
Add features to an object without changing its original code. Perfect for logging, caching, authentication checks, retry logic, and performance measurement.
⭐ 6. Facade Pattern
Simplifies complex systems behind a clean API. Hide ugly complexity from users of your code.
⭐ Real-World Example: Authentication System Using 4 Patterns
Combining Strategy + Factory + Decorator + Singleton for a professional login system.
⭐ Refactoring: Switch Statement → Patterns
Turning messy code into clean, extensible architecture.
⭐ Pattern Comparison Table
✅ Senior-Level Understanding
Practice quiz
What are the three core categories of design patterns in this lesson?
- Frontend, Backend, Database
- Simple, Medium, Complex
- Creational, Structural, Behavioral
- Public, Private, Protected
Answer: Creational, Structural, Behavioral. The 3 core categories are Creational (object creation), Structural (object relationships), and Behavioral (object behaviour).
Which pattern creates objects without exposing the creation logic?
- Factory
- Singleton
- Observer
- Facade
Answer: Factory. The Factory pattern creates objects without exposing creation logic, useful when creation depends on input or conditions.
What does the Singleton pattern guarantee?
- Many instances for performance
- Objects are created lazily
- Each user gets their own instance
- Only one instance of a class exists throughout the app
Answer: Only one instance of a class exists throughout the app. Singleton ensures only one instance exists app-wide, perfect for config, database connections, logging, or global state.
The lesson warns NOT to use a Singleton for which kind of data?
- Global configuration
- User-specific data or UI state that should reset
- Logging
- Caching
Answer: User-specific data or UI state that should reset. The warning says don't use Singletons for user-specific data, UI state, or anything that should reset per page/component.
Which pattern lets you switch between algorithms and is called your 'anti-if/else superpower'?
- Strategy
- Decorator
- Facade
- Singleton
Answer: Strategy. The Strategy pattern switches between interchangeable algorithms (payment methods, sorting, filters) without long if/else chains.
What does the Observer pattern provide?
- One instance globally
- A simplified interface
- One event, many listeners
- Object creation logic
Answer: One event, many listeners. Observer means one event with many listeners, used in UI frameworks, WebSockets, pub/sub systems, and data stores.
How does the Decorator pattern add features in the lesson's examples?
- By editing the original function's source
- By wrapping a function to add behavior without changing its original code
- By creating a subclass
- By using a global variable
Answer: By wrapping a function to add behavior without changing its original code. Decorators like withLogging and withTiming wrap a function to add behavior (and can be stacked) without changing the original code.
What is the purpose of the Facade pattern?
- Create many object types
- Ensure a single instance
- Swap algorithms at runtime
- Simplify a complex system behind a clean API
Answer: Simplify a complex system behind a clean API. The Facade (e.g. NotificationFacade) hides complex subsystems behind a clean interface so callers don't deal with the complexity.
In the Factory example, what permissions does UserFactory.create('Alice', 'admin') assign?
- read
The roleMap maps 'admin' to ['read', 'write', 'delete'], so the admin user receives all three permissions.
What is the lesson's overall guidance on when to use patterns?
- Always use as many as possible
- Avoid patterns entirely
- Use patterns only when they reduce complexity
- Use one pattern per file
Answer: Use patterns only when they reduce complexity. The senior-level takeaway: patterns are mental tools, not copy/paste code, and should be used only when they reduce complexity.