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.

Practice

1. What is the main difference between middleware and decorator patterns in Node.js?

easy

A. Middleware wraps functions; decorators process requests in a chain.

B. Middleware is only for error handling; decorators only for logging.

C. Middleware and decorators are the same and used interchangeably.

D. Middleware processes requests in a chain; decorators wrap functions to add behavior.

Solution

1. Step 1: Understand middleware role

   Middleware functions run one after another to handle requests or responses in a chain.

2. Step 2: Understand decorator role

   Decorators wrap a function to add or modify its behavior without changing the original function.

3. Final Answer:

   Middleware processes requests in a chain; decorators wrap functions to add behavior. -> Option D

4. Quick Check:

   Middleware = chain, Decorator = wrap [OK]

Hint: Middleware chains; decorators wrap functions [OK]

Common Mistakes:

• Confusing middleware with decorators
• Thinking middleware wraps functions
• Assuming both are identical

2. Which of the following is the correct way to define a middleware function in Express.js?

easy

A. function middleware(req, res, next) { next(); }

B. function middleware(req, res) { return next(); }

C. function middleware(next, req, res) { next(); }

D. function middleware(res, req, next) { next(); }

Solution

1. Step 1: Recall Express middleware signature

   Middleware functions take three parameters in order: request, response, and next function.

2. Step 2: Check parameter order and usage

   function middleware(req, res, next) { next(); } correctly uses (req, res, next) and calls next() to pass control.

3. Final Answer:

   function middleware(req, res, next) { next(); } -> Option A

4. Quick Check:

   Middleware signature = (req, res, next) [OK]

Hint: Middleware params order: req, res, next [OK]

Common Mistakes:

• Mixing parameter order
• Forgetting to call next()
• Returning next() instead of calling

3. Consider this decorator function in Node.js:

function logDecorator(fn) {
  return function(...args) {
    console.log('Calling function');
    return fn(...args);
  };
}

function greet(name) {
  return `Hello, ${name}!`;
}

const decoratedGreet = logDecorator(greet);
console.log(decoratedGreet('Alice'));

What will be printed to the console?

medium

A. Calling function\nHello, Alice!

B. Hello, Alice!\nCalling function

C. Calling function

D. Hello, Alice!

Solution

1. Step 1: Understand decorator behavior

   The decorator wraps greet, logging 'Calling function' before calling greet.

2. Step 2: Trace function calls and output

   Calling decoratedGreet('Alice') logs 'Calling function' then returns 'Hello, Alice!'. Both are printed by console.log.

3. Final Answer:

   Calling function\nHello, Alice! -> Option A

4. Quick Check:

   Decorator logs then calls function [OK]

Hint: Decorator logs before calling wrapped function [OK]

Common Mistakes:

• Assuming only greeting prints
• Confusing order of console logs
• Missing decorator wrapping effect

4. This Express middleware is intended to log request URLs but has a bug:

function logger(req, res, next) {
  console.log('Request URL:', req.url);
  next;
}

What is the bug and how to fix it?

medium

A. Middleware must return a value; fix by adding return next()

B. req.url is undefined; fix by using req.path

C. next is not called as a function; fix by changing to next()

D. console.log syntax is wrong; fix by adding parentheses

Solution

1. Step 1: Identify middleware flow control

   Middleware must call next() as a function to continue the chain.

2. Step 2: Spot the bug in next usage

   Code uses next without parentheses, so next middleware is never called.

3. Final Answer:

   next is not called as a function; fix by changing to next() -> Option C

4. Quick Check:

   Call next() to continue middleware chain [OK]

Hint: Always call next() as a function in middleware [OK]

Common Mistakes:

• Writing next instead of next()
• Assuming req.url is invalid
• Thinking middleware must return a value

5. You want to add authentication to an existing function without changing it. Which pattern fits best and why?

function fetchData(userId) {
  return `Data for user ${userId}`;
}

hard

A. Modify fetchData directly to add authentication logic inside.

B. Use a decorator to wrap fetchData and check authentication before calling it.

C. Use middleware to process fetchData since it handles requests in a chain.

D. Use middleware to wrap fetchData because middleware wraps functions.

Solution

1. Step 1: Understand the goal

   You want to add authentication without changing fetchData itself.

2. Step 2: Choose the right pattern

   Decorators wrap functions to add behavior like authentication without modifying original code.

3. Final Answer:

   Use a decorator to wrap fetchData and check authentication before calling it. -> Option B

4. Quick Check:

   Decorator = add behavior without changing function [OK]

Hint: Decorator wraps function to add features without changes [OK]

Common Mistakes:

• Confusing middleware with decorators
• Modifying original function directly
• Thinking middleware wraps functions