PUT and PATCH route handling in Express - Step-by-Step Execution

Concept Flow - PUT and PATCH route handling

Client sends request

↓

Server receives request

↓

Check HTTP method

↓

Replace entire

↓

resource data

↓

Save changes

↓

Send response

The server receives a request, checks if it's PUT or PATCH, then either replaces the whole resource (PUT) or updates part of it (PATCH), saves changes, and sends a response.

Execution Sample

Express

app.put('/item/:id', (req, res) => {
  items[req.params.id] = req.body;
  res.send(items[req.params.id]);
});

app.patch('/item/:id', (req, res) => {
  Object.assign(items[req.params.id], req.body);
  res.send(items[req.params.id]);
});

Defines two routes: PUT replaces the whole item, PATCH updates only specified fields.

Execution Table

Step	Request Method	Request Body	Action	Resource State After	Response Sent
1	PUT	{ "name": "Book", "price": 10 }	Replace entire item with new data	{ name: "Book", price: 10 }	{ name: "Book", price: 10 }
2	PATCH	{ "price": 12 }	Update only price field of item	{ name: "Book", price: 12 }	{ name: "Book", price: 12 }
3	PATCH	{ "name": "Notebook" }	Update only name field of item	{ name: "Notebook", price: 12 }	{ name: "Notebook", price: 12 }
4	PUT	{ "name": "Pen" }	Replace entire item, price removed	{ name: "Pen" }	{ name: "Pen" }
5	PATCH	{ "color": "blue" }	Add new field color to item	{ name: "Pen", color: "blue" }	{ name: "Pen", color: "blue" }
6	END	-	No more requests	-	-

💡 Execution stops after no more requests to process.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
items['id']	{}	{ name: "Book", price: 10 }	{ name: "Book", price: 12 }	{ name: "Notebook", price: 12 }	{ name: "Pen" }	{ name: "Pen", color: "blue" }	{ name: "Pen", color: "blue" }

Key Moments - 3 Insights

Why does the price disappear after the PUT request at step 4?

Because PUT replaces the entire resource with the new data, so fields not included in the request body are removed. See execution_table step 4.

How does PATCH keep existing fields when updating?

PATCH merges the new data into the existing resource, updating only specified fields and keeping others unchanged. See execution_table steps 2 and 3.

Can PATCH add new fields to the resource?

Yes, PATCH can add new fields by merging them into the existing resource, as shown in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of items['id'] after step 3?

A { name: "Book", price: 12 }

B { name: "Pen" }

C { name: "Notebook", price: 12 }

D {}

💡 Hint

Check the 'Resource State After' column in row 3 of execution_table.

At which step does the PUT request remove the price field from the item?

A Step 4

B Step 5

C Step 2

D Step 1

💡 Hint

Look for the PUT request that replaces the entire item without the price field in execution_table.

If the PATCH request at step 5 sent { "price": 15 } instead of { "color": "blue" }, what would be the final state of items['id']?

A { name: "Pen", color: "blue" }

B { name: "Pen", price: 15 }

C { name: "Pen", price: 12 }

D { name: "Pen" }

💡 Hint

Refer to variable_tracker and how PATCH merges fields into the existing object.

Concept Snapshot

PUT replaces the entire resource with the request body.
PATCH updates only specified fields, merging with existing data.
Use PUT when you want full replacement.
Use PATCH for partial updates.
Both save changes and send back updated resource.
Missing fields in PUT are removed; PATCH keeps them.

Full Transcript

This visual execution shows how Express handles PUT and PATCH routes. When a PUT request arrives, the server replaces the entire resource with the new data from the request body. This means any fields not included are removed. For PATCH requests, the server updates only the fields sent, merging them into the existing resource and keeping other fields unchanged. The execution table traces multiple requests step-by-step, showing how the resource changes after each. The variable tracker highlights the resource state after each request. Key moments clarify common confusions like why PUT removes fields and PATCH does not. The quiz tests understanding by asking about resource states at different steps and effects of changing request data. This helps beginners see clearly how PUT and PATCH differ in route handling.

Practice

1. What is the main difference between PUT and PATCH methods in Express route handling?

easy

A. PUT updates only specified fields, while PATCH replaces the entire resource.

B. PUT replaces the entire resource, while PATCH updates only specified fields.

C. PUT is used only for creating resources, PATCH for deleting.

D. PUT and PATCH behave exactly the same in Express.

Solution

1. Step 1: Understand HTTP method semantics

   PUT is designed to replace the entire resource with the new data sent in the request.

2. Step 2: Understand PATCH behavior

   PATCH updates only the fields specified in the request, leaving other fields unchanged.

3. Final Answer:

   PUT replaces the entire resource, while PATCH updates only specified fields. -> Option B

4. Quick Check:

   PUT replaces, PATCH updates partial [OK]

Hint: Remember: PUT replaces all, PATCH changes parts only [OK]

Common Mistakes:

• Confusing PUT and PATCH behavior
• Thinking PATCH deletes resources
• Assuming PUT only updates parts

2. Which of the following is the correct way to define a PATCH route in Express to update a user by ID?

easy

A. app.get('/user/:id', (req, res) => { /* update logic */ });

B. app.put('/user/:id', (req, res) => { /* update logic */ });

C. app.patch('/user/:id', (req, res) => { /* update logic */ });

D. app.post('/user/:id', (req, res) => { /* update logic */ });

Solution

1. Step 1: Identify the HTTP method for partial updates

   PATCH is used to update parts of a resource, so the route should use app.patch.

2. Step 2: Check route syntax

   The route path includes /:id to specify which user to update, and the handler function is correctly defined.

3. Final Answer:

   app.patch('/user/:id', (req, res) => { /* update logic */ }); -> Option C

4. Quick Check:

   PATCH route uses app.patch() [OK]

Hint: PATCH routes use app.patch(path, handler) syntax [OK]

Common Mistakes:

• Using app.put instead of app.patch for partial updates
• Using app.get or app.post incorrectly
• Missing route parameter syntax

3. Given this Express code snippet, what will be the response after a PATCH request to /product/5 with JSON body {"price": 20}?

const products = { 5: { name: "Pen", price: 10, stock: 100 } };
app.patch('/product/:id', (req, res) => {
  const id = req.params.id;
  Object.assign(products[id], req.body);
  res.json(products[id]);
});

medium

A. {"name":"Pen","price":20,"stock":100}

B. {"name":"Pen","price":10,"stock":100}

C. {"price":20}

D. Error: Cannot read property 'price' of undefined

Solution

1. Step 1: Understand the initial product data

   Product with ID 5 has name "Pen", price 10, and stock 100.

2. Step 2: Analyze the PATCH handler logic

   The handler uses Object.assign to update the product with fields from req.body. The JSON body contains {"price": 20}, so only the price changes.

3. Final Answer:

   {"name":"Pen","price":20,"stock":100} -> Option A

4. Quick Check:

   PATCH updates price only, other fields stay same [OK]

Hint: PATCH merges fields; unchanged fields remain [OK]

Common Mistakes:

• Expecting full replacement of product data
• Ignoring unchanged fields
• Assuming error due to missing fields

4. What is wrong with this Express PUT route handler?

app.put('/item/:id', (req, res) => {
  const id = req.params.id;
  items[id] = req.body;
  res.send('Item updated');
});

Assuming items is an object storing item data.

medium

A. The route path is missing a trailing slash.

B. The route should use PATCH instead of PUT.

C. The response should be JSON, not plain text.

D. It does not parse JSON body, so req.body will be undefined.

Solution

1. Step 1: Check if JSON body parsing middleware is used

   Without express.json() middleware, req.body will be undefined for JSON requests.

2. Step 2: Identify the impact on the handler

   Assigning items[id] = req.body will set the item to undefined, causing data loss or errors.

3. Final Answer:

   It does not parse JSON body, so req.body will be undefined. -> Option D

4. Quick Check:

   Missing express.json() causes undefined req.body [OK]

Hint: Always use express.json() to read JSON request bodies [OK]

Common Mistakes:

• Forgetting to add express.json() middleware
• Confusing PUT and PATCH usage
• Ignoring response content type

5. You want to implement a PUT route to replace a user profile but keep the id field unchanged. Which approach correctly handles this in Express?

hard

A. Overwrite the entire user object with req.body except manually set id back after assignment.

B. Use PATCH instead of PUT to update only the fields except id.

C. Reject the PUT request if id is present in req.body.

D. Delete the user first, then create a new user with req.body including id.

Solution

1. Step 1: Understand PUT semantics

   PUT replaces the entire resource, so the user object will be overwritten by req.body.

2. Step 2: Preserve the id field

   Since id should not change, after overwriting, manually set user.id back to the original value.

3. Final Answer:

   Overwrite the entire user object with req.body except manually set id back after assignment. -> Option A

4. Quick Check:

   PUT replaces all; preserve id manually [OK]

Hint: PUT replaces all; reset id manually after update [OK]

Common Mistakes:

• Using PATCH when full replacement is needed
• Allowing id to be overwritten unintentionally
• Deleting and recreating user unnecessarily