Why understanding req matters in Express - Visual Breakdown

Concept Flow - Why understanding req matters

Client sends HTTP request

↓

Express receives request

↓

Access req object

↓

Extract info: URL, method, headers, body

↓

Use info to decide response

↓

Send response back to client

This flow shows how Express gets a request, uses the req object to understand what the client wants, and then sends the right response.

Execution Sample

Express

app.get('/hello', (req, res) => {
  const name = req.query.name || 'Guest';
  res.send(`Hello, ${name}!`);
});

This code reads the 'name' from the request query and sends a personalized greeting.

Execution Table

Step	Action	req Content	Resulting Behavior	Output Sent
1	Client sends GET /hello?name=Alice	url: '/hello?name=Alice', method: 'GET', query: {name: 'Alice'}	Route matches '/hello'	No output yet
2	Express calls handler with req, res	req.query.name = 'Alice'	Reads name from req.query	No output yet
3	Handler builds greeting	name = 'Alice'	Creates message 'Hello, Alice!'	No output yet
4	Handler sends response	res.send('Hello, Alice!')	Response sent to client	Hello, Alice!
5	Client receives response	N/A	Client sees greeting message	Hello, Alice!

💡 Request handled and response sent, cycle complete

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
req.query.name	undefined	'Alice'	'Alice'	'Alice'
name	undefined	undefined	'Alice'	'Alice'
response message	undefined	undefined	undefined	'Hello, Alice!'

Key Moments - 2 Insights

Why do we use req.query.name instead of just name?

Because req.query.name comes from the client's request URL, it holds the actual input. The variable 'name' is assigned from req.query.name inside the handler (see execution_table step 3).

What happens if the client does not send a name?

The code uses 'Guest' as a default (see code line with || 'Guest'). So if req.query.name is undefined, name becomes 'Guest', ensuring the response still works.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of req.query.name at Step 2?

A undefined

B 'Alice'

C 'Guest'

D null

💡 Hint

Check the 'req Content' column at Step 2 in the execution_table.

At which step is the response message 'Hello, Alice!' sent to the client?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Output Sent' column in the execution_table.

If the client sends no name, what will the variable 'name' be after Step 3?

A 'Guest'

B 'Alice'

C undefined

D null

💡 Hint

Refer to the code line with '|| "Guest"' and variable_tracker for 'name'.

Concept Snapshot

Express req object holds client request info.
Use req properties like req.query, req.params, req.body to get data.
Understanding req lets you respond correctly.
Always check if data exists; provide defaults.
Handlers read req, build response, then send it.

Full Transcript

In Express, the req object represents the client's HTTP request. When a client sends a request, Express receives it and passes the req object to the route handler. The handler reads data from req, such as query parameters, to understand what the client wants. For example, req.query.name reads the 'name' parameter from the URL. The handler then uses this data to create a response message and sends it back to the client. If the client does not provide certain data, the handler can use default values to keep the response friendly. This process ensures the server responds properly based on the client's request details.

Practice

1. In Express, what does the req object represent?

easy

A. Information sent by the user to the server

B. The server's response to the user

C. A database connection

D. A middleware function

Solution

1. Step 1: Understand the role of req in Express

   The req object contains all the information sent by the user to the server, such as URL parameters, query strings, and request body.

2. Step 2: Differentiate req from other objects

   The server's response is handled by res, not req. Database connections and middleware are separate concepts.

3. Final Answer:

   Information sent by the user to the server -> Option A

4. Quick Check:

   req = user info [OK]

Hint: Remember: req = request from user [OK]

Common Mistakes:

• Confusing req with res (response)
• Thinking req is a database connection
• Mixing req with middleware functions

2. Which of the following is the correct way to access URL parameters in Express?

easy

A. req.body.params

B. req.params

C. req.query.params

D. req.url.params

Solution

1. Step 1: Recall how Express stores URL parameters

   Express stores URL parameters in req.params, which holds key-value pairs from the route.

2. Step 2: Check other options for correctness

   req.body holds POST data, req.query holds query strings, and req.url is a string, not an object with params.

3. Final Answer:

   req.params -> Option B

4. Quick Check:

   URL params = req.params [OK]

Hint: URL params are always in req.params [OK]

Common Mistakes:

• Using req.body to get URL params
• Confusing query strings with URL params
• Trying to access params from req.url string

3. What will be logged by this Express route handler?

app.get('/user/:id', (req, res) => {
  console.log(req.query.name);
  res.send('Done');
});
// Request URL: /user/123?name=Alice

medium

A. undefined

B. 123

C. Alice

D. Error

Solution

1. Step 1: Identify what req.query.name accesses

   req.query holds query string parameters from the URL, so req.query.name gets the value of the 'name' query parameter.

2. Step 2: Match the request URL query

   The URL has ?name=Alice, so req.query.name is 'Alice'.

3. Final Answer:

   Alice -> Option C

4. Quick Check:

   Query param 'name' = Alice [OK]

Hint: Query strings are in req.query [OK]

Common Mistakes:

• Confusing req.params with req.query
• Expecting URL param instead of query param
• Assuming req.query is undefined if not in route

4. Identify the error in this Express route handler:

app.post('/submit', (req, res) => {
  const data = req.query.body;
  res.send(data);
});

medium

A. Using req.query instead of req.body to access POST data

B. Missing res.end() after res.send()

C. Route should be app.get, not app.post

D. req.body is not available without middleware

Solution

1. Step 1: Check how POST data is accessed

   POST data is sent in the request body and accessed via req.body, not req.query.

2. Step 2: Identify the mistake in the code

   The code incorrectly tries to get POST data from req.query.body, which is wrong; it should be req.body.

3. Final Answer:

   Using req.query instead of req.body to access POST data -> Option A

4. Quick Check:

   POST data = req.body, not req.query [OK]

Hint: POST data is in req.body, not req.query [OK]

Common Mistakes:

• Accessing POST data from req.query
• Forgetting to use body-parser middleware
• Confusing HTTP methods and data locations

5. You want to create an Express route that responds differently based on a URL parameter type and a query parameter sort. Which code correctly accesses both parameters?

hard

A. app.get('/items/:type', (req, res) => { const t = req.body.type; const s = req.body.sort; res.send(`${t} sorted by ${s}`); });

B. app.get('/items/:type', (req, res) => { const t = req.query.type; const s = req.params.sort; res.send(`${t} sorted by ${s}`); });

C. app.get('/items', (req, res) => { const t = req.params.type; const s = req.query.sort; res.send(`${t} sorted by ${s}`); });

D. app.get('/items/:type', (req, res) => { const t = req.params.type; const s = req.query.sort; res.send(`${t} sorted by ${s}`); });

Solution

1. Step 1: Identify where URL and query parameters are stored

   URL parameters like type are in req.params, and query parameters like sort are in req.query.

2. Step 2: Check each option for correct usage

   app.get('/items/:type', (req, res) => { const t = req.params.type; const s = req.query.sort; res.send(`${t} sorted by ${s}`); }); correctly uses req.params.type and req.query.sort. app.get('/items/:type', (req, res) => { const t = req.query.type; const s = req.params.sort; res.send(`${t} sorted by ${s}`); }); swaps them incorrectly. app.get('/items', (req, res) => { const t = req.params.type; const s = req.query.sort; res.send(`${t} sorted by ${s}`); }); misses the URL param in route. app.get('/items/:type', (req, res) => { const t = req.body.type; const s = req.body.sort; res.send(`${t} sorted by ${s}`); }); wrongly uses req.body which is for POST data.

3. Final Answer:

   req.params.type and req.query.sort -> Option D

4. Quick Check:

   URL param = req.params, query param = req.query [OK]

Hint: URL params in req.params, query params in req.query [OK]

Common Mistakes:

• Swapping req.params and req.query
• Missing URL param in route path
• Using req.body for GET parameters