Three Design patterns you're probably already using

Becca Nelson

March 16, 2017


Strategy pattern

decorator pattern

factory pattern


Calculate Revenue

Fetch exchange rates from API

User inputs exchange rate

What if we used dependency injection to inject the algorithm into the model?

Strategy pattern

function makeMusic(instrument: string): void {
    if (instrument === "piano") {
        console.log("Now playing: Mozart's Theme and Variations on Twinkle Twinkle Little Star");
    } else if (instrument === "clarinet") {

// => Now playing: Mozart's Theme and Variations on Twinkle Twinkle Little Star

// => Squeeeeak!!

What if I wanted to add another instrument?

Here's a better way...

interface InstrumentStrategy {

class Drum implements InstrumentStrategy {
    play() {

function makeMusic(instrument: InstrumentStrategy) {;

makeMusic(new Drum());
//=> Thump.

Notice how the makeMusic function never has to change.

Dependency inversion principle

one should "depend on abstractions, '[not] concretions".

const song = new Slow_Minor_Classical_Variation("Twinkle Twinkle Little Star");

Decorator pattern

BufferedReader fileReader = 
    new BufferedReader(
        new FileReader(
            new File("some.file")));

Decorator pattern (cont)

interface Song {
    play(title: string): void;

class Theme implements Song {
    play(title: string): void {
        console.log(`Now playing "${title}"`);

const song = new Theme();"Twinkle Twinkle Little Star");
//=> Now playing "Twinkle Twinkle Little Star"


Base Class

Decorator pattern (cont)

class Variation implements Song {
    constructor(protected song: Song) { }
    play(title: string): void {;

class Minor extends Variation {
    play(title: string): void {
        title = `a minor variation on ${title}`;;

const song = new Minor(new Theme());

Decorator base


“software entities … should be open for extension, but closed for modification.”

Open/closed principle

Factory Pattern




Factory Pattern (cont)

class MusicFactory {
    theme: Theme = new Theme();

    composeVariation(params: SongParams) {
        if (params.key === "minor") {
            this.theme = new Minor(this.theme);
        if ( === "classical") {
            this.theme = new Classical(this.theme);
        // etc.
        return this.theme;


Contact Me

Three Design Patterns You're Probably Already Using

By Becca Nelson

Three Design Patterns You're Probably Already Using

  • 885