Software Design Patterns in JavaScript

Tom Nagle
4 min readMay 13, 2020

Imagine coming across the same problem multiple times and having to re-develop a solution for it every time. That would be exhausting, it may even be confusing for those around you and your solution would never get the chance to be optimised. Instead, we use patterns to solve problems. In everyday life we call these heuristics, in software development we call them design patterns.

The design patterns in this post have examples in this repository: https://github.com/tomanagle/JavaScript-design-patterns

Please submit pull requests if you would like to add a pattern or make a change to an existing pattern.

In software development, a design pattern is a solution to a commonly occurring problem that is generally agreed on as the best solution. Understanding design patterns will:

  • Make solving recurring problems easier and faster
  • Allow you to solve problems with a pre-optimised solutions
  • Write code that is familiar to those that understand the design pattern

Creational

Constructor pattern

Problem: I need a way to create a new instance of an object so I can extend its functionality

The constructor pattern in JavaScript uses the new keyword to construct a new object from a function. The newly constructed object will link to the object’s prototype, bind the this keyword to the new object’s scope and implicitly return this.

To further extend the functionality of the object, JavaScript uses prototype-based inheritance.

In ECMAScript 2015 classes were added as syntactic sugar over the existing prototype-based inheritance.

--

--

Tom Nagle

I am a full stack JavaScript developer, living in Melbourne, Australia. My preferred stack is Mongoose, TypeScript, Node.js, React & GraphQL.