JavaScript Refactoring Patterns

A collection of refactoring patterns for improving the design of existing JavaScript code.

This work is greatly motivated by, and many patterns are adapted from, Martin Fowler's excellent book Refactoring - Improving the design of existing code.

Overview of Refactoring Patterns

General Patterns

These refactorings are ported to JavaScript from Martin Fowler's book Refactoring - Improving the design of existing code. Although they are not JavaScript specific they are still great refactorings which can help to improve the design of JavaScript code.

Composing Methods

• Extract function/method
• Replace temp with query
• Introduce explaining variable
• Split temporary variable
• Remove assignments to parameters

JavaScript Patterns

These refactorings are JavaScript specific and should help to improve the design of your code. The refactorings are grouped by the ECMAScript version that implements the functionality that they depend on.

ECMAScript 3

• Replace switch with object literal
• Extract module

ECMAScript 5

• Replace for with forEach
• Replace aggregate property operations with reduce
• Replace direct array access element updates with map
• Replace context variable with bind/call/apply

ECMAScript 6

• Declare block scope variables with let
• Replace default param logic with ES6 default params
• Replace nested async callbacks with promises

jQuery

• Replace jQuery selector with querySelector/querySelectorAll