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.