Middleware vs decorator pattern in Node.js - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple middleware function in Express that logs request method and URL.

Node.js

function logger(req, res, next) {
  console.log(req.[1] + ' ' + req.url);
  next();
}

Drag options to blanks, or click blank then click option'

Apath

Burl

Cbody

Dmethod

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.url instead of req.method for the HTTP method

Trying to access req.path which is not the method

Logging req.body which is the request data, not the method

The req.method property contains the HTTP method of the request, such as GET or POST. This is what we want to log along with the URL.

2fill in blank

medium

Complete the code to apply a decorator function that adds a greeting to the original function's output.

Node.js

function greet() {
  return 'World';
}

function decorator(fn) {
  return function() {
    return 'Hello ' + fn[1]();
  };
}

Drag options to blanks, or click blank then click option'

Acall

Bapply

C()

D.call

Attempts:

3 left

💡 Hint

Common Mistakes

Using fn.call without parentheses, which is a function reference, not a call

Using fn.apply which requires arguments array

Using .call as a string which is invalid syntax

To call the function fn inside the decorator, we use fn(). The parentheses () invoke the function.

3fill in blank

hard

Fix the error in the middleware function to correctly handle asynchronous operations.

Node.js

async function auth(req, res, [1]) {
  const user = await getUser(req.token);
  if (!user) {
    res.status(401).send('Unauthorized');
  } else {
    next();
  }
}

Drag options to blanks, or click blank then click option'

Anext

Bcallback

Cdone

Dproceed

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name like done or callback which Express does not recognize

Not calling next() at all causing the request to hang

In Express middleware, the third argument is always named next. It is a function to call to pass control to the next middleware.

4fill in blank

hard

Fill both blanks to create a decorator that logs before and after calling the original function.

Node.js

function logDecorator(fn) {
  return function(...args) {
    console.[1]('Before call');
    const result = fn(...args);
    console.[2]('After call');
    return result;
  };
}

Drag options to blanks, or click blank then click option'

Alog

Bwarn

Cerror

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.warn or console.error which are for warnings or errors

Mixing different console methods in the two blanks

The console.log method is used to print normal messages to the console. We want to log both before and after the function call.

5fill in blank

hard

Fill all three blanks to create middleware that checks for a token and calls next or sends error.

Node.js

function checkToken(req, res, [1]) {
  const token = req.headers['[2]'];
  if (!token) {
    res.status([3]).send('Token missing');
  } else {
    next();
  }
}

Drag options to blanks, or click blank then click option'

Anext

Bauthorization

C401

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong header name like 'token' instead of 'authorization'

Using wrong status code like 403 instead of 401

Naming the third argument incorrectly

The third middleware argument is next. The token is usually in the authorization header. The status code for missing token is 401 Unauthorized.

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