Scribd
Upload
7 views

Learn JavaScript Chapter 14 - Design Patterns

Uploaded by

tulipramanik1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Learn JavaScript Chapter 14 - Design Patterns

Uploaded by

tulipramanik1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Learn JavaScript

Chapter 14
Design Patterns

Learn with Yunus Sheikh


Index
Introduction

Types of patterns

Creational Patterns

Singleton

Factory

Structural Patterns

Module Pattern

Behavioral Patterns

Observer

Learn with Yunus Sheikh


Let's dive into the world of JavaScript Design
Patterns! This is where we separate the amateurs
from the pros, folks. But don't worry, I'll break it
down so even your grandma could understand it
(assuming she's into coding, of course).

Learn with Yunus Sheikh


Introduction

Design patterns in JavaScript are like secret recipes


handed down from master chefs. They're solutions to
common problems that pop up when you're cooking
up some tasty code. Think of them as tried-and-true
techniques that smart developers have figured out
over the years.

Why should you care? Well, using design patterns can


make your code more organized, easier to
understand, and less likely to break when you're
knee-deep in a project at 2 AM, chugging your fifth
cup of coffee.

Learn with Yunus Sheikh


Types of Patterns

Now, let's talk about the different flavors of design


patterns we have in our JavaScript cookbook. We
generally group them into three main categories:

Creational Patterns: These are all about object


creation. They're like the sous chefs of the
programming world, prepping your ingredients
(objects) just right.
Structural Patterns: These deal with object
composition. Think of them as the plating experts,
arranging your code into beautiful, functional
structures.
Behavioral Patterns: These handle communication
between objects. They're like the waitstaff, making
sure everything flows smoothly between different
parts of your application.

Learn with Yunus Sheikh


Let's dig into each of these categories and look at some
specific patterns.

Learn with Yunus Sheikh


Creational Patterns

Creational patterns are all about creating objects


in a way that's flexible and situation-appropriate.
Let's look at a couple of the most common ones:

Singleton

The Singleton pattern is like that one friend who's


always available - there's only one of them, and
everyone knows how to reach them.

Here's a real-world example:

Learn with Yunus Sheikh


const Database = (function() {
let instance;
function createInstance() {
// Imagine this is your database connection
return { data: [] };
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// Usage
const db1 = Database.getInstance();
const db2 = Database.getInstance();
console.log(db1 === db2); // true

Learn with Yunus Sheikh


In this example, no matter how many times you call
‘Database.getInstance()’, you always get the same
instance. This is super useful for things like database
connections or configuration objects where you want
to ensure you're always working with the same
instance.

Learn with Yunus Sheikh


Factory

The Factory pattern is like a pizza shop. You don't


need to know how to make each type of pizza; you
just tell the shop what you want, and they create it
for you.

Here's how it might look:

function CarFactory() {
this.createCar = function(type) {
let car;
if (type === 'sports') {
car = new SportsCar();
}
else if (type === 'family') {
car = new FamilyCar();
}

Learn with Yunus Sheikh


car.drive = function() {
console.log(`Driving ${this.type} car at
${this.speed}mph`);
}
return car;
}
}

function SportsCar() {
this.type = 'sports';
this.speed = 150;
}

function FamilyCar() {
this.type = 'family';
this.speed = 100;
}

Learn with Yunus Sheikh


// Usage
const factory = new CarFactory();
const mySportsCar = factory.createCar('sports');
const myFamilyCar = factory.createCar('family');

mySportsCar.drive(); // Driving sports car at 150mph


myFamilyCar.drive(); // Driving family car at 100mph

This pattern is great when you need to create different


objects based on certain conditions, without exposing
the instantiation logic to the client code.

Learn with Yunus Sheikh


Structural Patterns

Structural patterns are all about organizing your


code into larger structures. Let's look at one of the
most common:

Module Pattern

The Module pattern is like having a secret diary.


You can write whatever you want inside, but you
only show people the parts you want them to see.

Here's an example:

Learn with Yunus Sheikh


const BankAccount = (function() {
let balance = 0; // Private variable
function deposit(amount) {
balance += amount;
}
function withdraw(amount) {
if (amount <= balance) {
balance -= amount;
return true;
}
return false;
}

return {
deposit: deposit,
withdraw: withdraw,
getBalance: function() { return balance; }
};
})();

Learn with Yunus Sheikh


// Usage
BankAccount.deposit(100);

console.log(BankAccount.getBalance()); // 100
console.log(BankAccount.withdraw(50)); // true
console.log(BankAccount.getBalance()); // 50
console.log(BankAccount.balance); //undefined(private)

This pattern allows you to encapsulate private


variables and functions, exposing only what you want
to be public. It's great for creating clean, modular
code.

Learn with Yunus Sheikh


Behavioral Patterns

Behavioral patterns deal with communication


between objects. One of the most useful is the
Observer pattern.

Observer

The Observer pattern is like subscribing to a


YouTube channel. When the channel posts a new
video, all subscribers get notified.

Here's how it might look in code:

Learn with Yunus Sheikh


function YouTubeChannel() {
this.subscribers = [];
this.subscribe = function(subscriber) {
this.subscribers.push(subscriber);
}
this.unsubscribe = function(subscriber) {
this.subscribers = this.subscribers.filter(sub =>
sub !== subscriber);
}
this.notifySubscribers = function(video) {
this.subscribers.forEach(subscriber =>
subscriber.update(video));
}
this.uploadVideo = function(video) {
console.log(`Uploaded new video: ${video}`);
this.notifySubscribers(video);
}
}

Learn with Yunus Sheikh


function Subscriber(name) {
this.name = name;
this.update = function(video) {
console.log(`${this.name} received notification:
New video uploaded - ${video}`);
}
}

// Usage
const channel = new YouTubeChannel();
const sub1 = new Subscriber('Alice');
const sub2 = new Subscriber('Bob');

channel.subscribe(sub1);
channel.subscribe(sub2);

Learn with Yunus Sheikh


channel.uploadVideo('JavaScript Design Patterns');
// Uploaded new video: JavaScript Design Patterns
// Alice received notification: New video uploaded -
JavaScript Design Patterns
// Bob received notification: New video uploaded -
JavaScript Design Patterns

channel.unsubscribe(sub1);
channel.uploadVideo('Advanced JavaScript
Techniques');
// Uploaded new video: Advanced JavaScript
Techniques
// Bob received notification: New video uploaded -
Advanced JavaScript Techniques

Learn with Yunus Sheikh


This pattern is super useful for building event-driven
systems and maintaining loose coupling between
objects.

Learn with Yunus Sheikh


And there you have it!

We've covered some of the most important


JavaScript design patterns. Remember, these
patterns are tools in your developer toolkit. Like
any tool, they're most effective when you know
which one to use and when.

Now go forth and write some beautifully patterned


code!

Learn with Yunus Sheikh


Are you ready to shape the digital landscape?
Let’s connect and share insights on Fullstack
development!

Learn with Yunus Sheikh


Connect & Follow me to update your skills in coding

I am sharing learnings from my experiences in


technology field from coding to management to trends
everyday!

https://www.linkedin.com/in/yunussheikh/

Learn with Yunus Sheikh

You might also like