Middleware vs decorator pattern in Node.js - Visual Side-by-Side Comparison

Concept Flow - Middleware vs decorator pattern

Request Received

↓

Middleware 1

→Middleware 2

↓

Next Middleware

↓

Original Function

↓

Decorator 1

→Decorator 2

↓

Enhance Behavior

Middleware chains process requests step-by-step, passing control along. Decorators wrap functions to add behavior before or after the original function.

Execution Sample

Node.js

const mw1 = (req, res, next) => { console.log('mw1'); next(); };
const mw2 = (req, res, next) => { console.log('mw2'); next(); };

function baseHandler() { console.log('handler'); }

const decoratedHandler = (fn) => () => { console.log('before'); fn(); console.log('after'); };

const finalHandler = decoratedHandler(baseHandler);

// Simulate middleware chain
mw1({}, {}, () => mw2({}, {}, () => baseHandler()));

// Call decorated function
finalHandler();

This code shows middleware functions calling next to pass control, and a decorator wrapping a function to add logs before and after.

Execution Table

Step	Function Called	Action	Output	Next Step
1	mw1	Logs 'mw1', calls next()	mw1	Call mw2
2	mw2	Logs 'mw2', calls next()	mw2	Call baseHandler
3	baseHandler	Logs 'handler'	handler	End middleware chain
4	finalHandler	Logs 'before', calls baseHandler, logs 'after'	before handler after	End decorated call

💡 Middleware chain ends after baseHandler; decorated function ends after logging 'after'

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
req	{}	{}	{}	{}	{}
res	{}	{}	{}	{}	{}
next	function	function	function	undefined	undefined
finalHandler	function	function	function	function	function

Key Moments - 2 Insights

Why does middleware use 'next()' but decorators do not?

Middleware functions call 'next()' to pass control to the next middleware (see execution_table steps 1 and 2). Decorators wrap a function and call it directly inside, so no 'next()' is needed (step 4).

How does the decorator add behavior without changing the original function?

The decorator wraps the original function, adding logs before and after calling it (step 4). The original function remains unchanged but is called inside the wrapper.

Visual Quiz - 3 Questions

Look at the execution_table, what is logged at Step 2?

A 'mw2'

B 'mw1'

C 'handler'

D 'before'

💡 Hint

Check the 'Output' column for Step 2 in the execution_table.

At which step does the middleware chain end?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Next Step' column to see when the middleware chain ends.

If the decorator did not call the original function, what would happen at Step 4?

A Only 'after' would be logged

B Only 'before' would be logged

C 'handler' would still be logged

D Nothing would be logged

💡 Hint

Refer to Step 4 where the decorator logs 'before', calls the function, then logs 'after'.

Concept Snapshot

Middleware pattern chains functions that receive a request and call next() to pass control.
Decorator pattern wraps a function to add behavior before and after it runs.
Middleware is used in request handling pipelines.
Decorators enhance or modify function behavior without changing the original.
Middleware calls next() to continue; decorators call the wrapped function directly.

Full Transcript

Middleware and decorator patterns are ways to add behavior to code. Middleware functions receive a request and a next function. They do something, then call next() to pass control to the next middleware. This creates a chain of processing steps. Decorators wrap a function to add extra behavior before and after calling the original function. Middleware is common in web servers to process requests step-by-step. Decorators are used to enhance functions without changing them. Middleware uses next() to continue the chain; decorators call the wrapped function inside their own code.