Design patterns are advanced object-oriented solutions to commonly occurring software problems. Patterns are about reusable designs and interactions of objects. Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions.

“The most important property of a program is whether it accomplishes the intention of its user.”
C.A.R. Hoare

In this tutorial we provide JavaScript examples for each of the GoF patterns. Mostly, they follow the structure and intent of the original pattern designs. These examples demonstrate the principles behind each pattern, but are not optimized for JavaScript.

Code Highlighting

$.extend( $.ui.slider.prototype.options, { 
    animate: 300

        max: 50,
        min: 0,
        range: true,
        values: [15, 35]
    .slider("pips", {
        first: "pip",
        last: "pip"

        max: 25,
        min: 0,
        range: "min",
        value: 25,
        orientation: "vertical"

One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.


JavaScript, also known as ECMAScript is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.

JavaScript (at least the strict subset asm.js) is also considered an "assembly language of the web" – a compile target of source-to-source compilers – for making client side web applications, using other programming languages, supported by all the major browsers without plug-ins.

It is also used in server-side network programming with runtime environments such as Node.js, game development and the creation of desktop and mobile applications.