Design Patterns in JavaScript

A comprehensive collection of design pattern implementations and documentation in JavaScript, created as part of a post-graduate studies project.

📚 Overview

This repository contains practical implementations and detailed explanations of classic design patterns, organized by category. Each pattern includes:

• ✅ Clear explanations with real-world analogies
• ✅ Code examples showing problems and solutions
• ✅ Before/After comparisons
• ✅ Design principles (SOLID, DRY, etc.)
• ✅ Use cases and best practices

🗂️ Repository Structure

design-patterns/
├── Behavior-Pattern/
│   ├── Iterator/          # Iterator pattern implementation
│   ├── Observer/          # Observer pattern implementation
│   └── Strategy/          # Strategy pattern implementation
├── Creational-Patterns/
│   ├── Builder/           # Builder pattern implementation
│   ├── FactoryMethod/     # Factory Method pattern implementation
│   └── Singleton/         # Singleton pattern implementation
└── Structural-Patterns/
    ├── Adapter/           # Adapter pattern implementation
    ├── Decorator/         # Decorator pattern implementation
    └── Facade/            # Facade pattern implementation

🎯 Behavioral Patterns

Behavioral patterns are concerned with algorithms and the assignment of responsibilities between objects.

Iterator Pattern

Location: Behavior-Pattern/Iterator/

Provides a way to access elements of a collection sequentially without exposing its underlying structure.

• Documentation: IteratorPattern.md
• Key Benefit: Separation of traversal logic from collection storage
• Example: Iterating through users and products with forward/backward navigation

Observer Pattern

Location: Behavior-Pattern/Observer/

Defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified automatically.

• Documentation: ObserverPattern.md
• Key Benefit: Loose coupling through subscription mechanism
• Example: Store notifying clients when products arrive

Strategy Pattern

Location: Behavior-Pattern/Strategy/

Defines a family of algorithms, encapsulates each one, and makes them interchangeable at runtime.

• Documentation: StrategyPattern.md
• Key Benefit: Open/Closed Principle - extend without modifying
• Example: Different route calculation strategies (car, walking, public transport)

🏗️ Creational Patterns

Creational patterns deal with object creation mechanisms, trying to create objects in a manner suitable to the situation.

Builder Pattern

Location: Creational-Patterns/Builder/

Separates the construction of a complex object from its representation, allowing step-by-step creation.

• Documentation: BuilderPattern.md
• Key Benefit: Readable, flexible object construction with method chaining
• Example: Building pizzas with customizable size, crust, and toppings

Factory Method Pattern

Location: Creational-Patterns/FactoryMethod/

Defines an interface for creating objects, but lets subclasses decide which class to instantiate.

• Documentation: FactoryMethodPattern.md
• Key Benefit: Decouples object creation from usage
• Example: Logistics system with different transport types (truck, ship)

Singleton Pattern

Location: Creational-Patterns/Singleton/

Ensures a class has only one instance and provides a global point of access to it.

• Documentation: SingletonPattern.md
• Key Benefit: Centralized state and single instance guarantee
• Example: Logger with shared log storage

🔗 Structural Patterns

Structural patterns deal with object composition, creating relationships between objects to form larger structures.

Adapter Pattern

Location: Structural-Patterns/Adapter/

Allows incompatible interfaces to work together by wrapping an object with a compatible interface.

• Documentation: AdapterPattern.md
• Key Benefit: Integration without modifying existing code
• Example: Adapting VideoPlayer to work as AudioPlayer

Decorator Pattern

Location: Structural-Patterns/Decorator/

Attaches additional responsibilities to an object dynamically, providing a flexible alternative to subclassing.

• Documentation: DecoratorPattern-Problems.md
• Key Benefit: Dynamic behavior extension without inheritance
• Example: Adding text formatting (bold, italic, underline) and notification channels

Facade Pattern

Location: Structural-Patterns/Facade/

Provides a simplified interface to a complex subsystem, making it easier to use.

• Documentation: FacadePattern-Explained.md
• Key Benefit: Simplified API for complex systems
• Example: Unified notification service for email, SMS, and push notifications

🎓 Learning Resources

JavaScript OOP Reference

Location: JavaScript-OOP-Reference.md

A comprehensive guide to Object-Oriented Programming concepts in JavaScript, covering:

• Classes and constructors
• The this keyword
• Inheritance and extends
• The super() method
• Common patterns and best practices

🚀 Getting Started

Prerequisites

• Node.js installed on your system

Running Examples

Each pattern folder contains test files that demonstrate the pattern in action:

# Iterator Pattern
cd Behavior-Pattern/Iterator/src
node testIterator.js

# Observer Pattern
cd Behavior-Pattern/Observer/src
node testWithObserver.js

# Strategy Pattern
cd Behavior-Pattern/Strategy/project-navigation/models
node testNavigation.js

# Builder Pattern
cd Creational-Patterns/Builder
node buildPizza.js

# Factory Method Pattern
cd Creational-Patterns/FactoryMethod/src
node testLogistic.js

# Singleton Pattern
cd Creational-Patterns/Singleton
node singletonTestLogger.js

📖 Documentation Style

Each pattern follows a consistent documentation structure:

1. What is the Pattern? - Clear explanation with real-world analogies
2. The Problem - Code examples showing issues without the pattern
3. The Solution - Implementation using the pattern
4. How It Works - Detailed breakdown of each component
5. Comparison - Before/After code examples
6. Design Principles - SOLID principles demonstrated
7. Benefits - Key advantages of using the pattern
8. Real-World Use Cases - Practical applications
9. When to Use - Guidelines for applying the pattern

🎯 Design Principles Covered

Throughout the examples, you'll find implementations of key design principles:

• SOLID Principles

  • Single Responsibility Principle (SRP)
  • Open/Closed Principle (OCP)
  • Liskov Substitution Principle (LSP)
  • Interface Segregation Principle (ISP)
  • Dependency Inversion Principle (DIP)

• Other Principles

  • DRY (Don't Repeat Yourself)
  • Separation of Concerns
  • Composition Over Inheritance
  • Encapsulation
  • Loose Coupling

🤝 Contributing

This is a learning project for post-graduate studies. Feel free to:

• Suggest improvements to documentation
• Report issues or typos
• Share additional use cases or examples

📝 License

This project is created for educational purposes as part of post-graduate studies.

Acknowledgments

This repository was created as part of a post-graduate program to demonstrate understanding of software design patterns and best practices in JavaScript.

---

Note: All code examples are written in modern JavaScript (ES6+) and focus on clarity and educational value over production optimization.