JavaScript - Design Patterns

Design patterns are reusable solutions to commonly occurring problems in software design.
Addy Osmani

Constructor Pattern

All methods and properties of the object are added in the constructor.

function Track(artist, title, year) {
    this.artist = artist;
    this.title = title;
    this.year = year;

    this.trackInfo = function() {
        return this.title + ", by " + this.artist + ", Year released: " + this.year;
    };
}

var theFixer = new Track("Pearl Jam", "The Fixer", 2009);
var lazaretto =  new Track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Constructor Pattern with Prototype

function Track(artist, title, year) {
    this.artist = artist;
    this.title = title;
    this.year = year;
}

Track.prototype.trackInfo = function() {
    return this.title + ", by " + this.artist + ", Year released: " + this.year;
};

var theFixer = new Track("Pearl Jam", "The Fixer", 2009);
var lazaretto =  new Track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Prototype Pattern

var trackPrototype = {
    init: function(artist, title, year) {
        this.artist = artist;
        this.title = title;
        this.year = year;
    },
    trackInfo: function() {
        return this.title + ", by " + this.artist + ", Year released: " + this.year;
    }
};

function track(artist, title, year) {
    
    function F() {}
    F.prototype = trackPrototype;
    
    var f = new F();
    
    f.init(artist, title, year);
    return f;
}
 
var theFixer = track("Pearl Jam", "The Fixer", 2009);
var lazaretto = track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Object Literal Module Pattern

var playlist = {
    
    tracksCollection: [],
    
    lastTrack: function() {
        return tracksCollection[tracksCollection.length -1];
    },
    
    addTrack: function(track) {
        tracksCollection.push(track);
    },
    
    init: function(tracks) {
        tracks.forEach( function(track) {
           this.addTrack(track); 
        });
    }
}

playlist.init([new Track("Pearl Jam", "The Fixer", 2009)]);
playlist.lastTrack().trackInfo(); // The Fixer, by Pearl Jam, Year released: 2009
playlist.addTrack(new Track("Jack White", "Lazaretto", 2014));
playlist.lastTrack().trackInfo(); // Lazaretto, by Jack White, Year released: 2014

IIFE Module Pattern

var playlist = (function() {

    var tracksCollection = [];

    return {

        lastTrack: function() {
            return tracksCollection[tracksCollection.length -1];
        },

        addTrack: function(track) {
            tracksCollection.push(track);
        },

        init: function(tracks) {
            tracks.forEach( function(track) {
            this.addTrack(track);
            });
        }
    }

})();

playlist.init([new Track("Pearl Jam", "The Fixer", 2009)]);
playlist.lastTrack().trackInfo(); // The Fixer, by Pearl Jam, Year released: 2009
playlist.addTrack(new Track("Jack White", "Lazaretto", 2014));
playlist.lastTrack().trackInfo(); // Lazaretto, by Jack White, Year released: 2014

Resource

Learning JavaScript Design Patterns
A book by Addy Osmani