PUT vs PATCH & PUT vs POST
Tags: javascript, webdev, beginners
Published: 2021-07-26 06:06:58

## Introduction
In one of my interviews recently, I was asked to explain the difference between `PUT` vs `PATCH`. You might be thinking, "Oh yeah, that's a common interview question!" But you know what, as common as you think it is, I actually didn't know how to answer this question (and yep, got rejected too haha🥲). Now I learned my lesson, I decided to write an article not only to help myself to understand but for those who are preparing for your (next) interviews! 

For those who found this article via your feed or from Google, welcome! I will not necessarily provide you the direct answer for your interview in this article, but I hope it is thorough enough to help prepare for your interview(s). Also, I am not providing any new materials/founds/insights, but please consider this more of a thorough cheatsheet!

In this article, I assume you have already understood the basics of the HTTP methods in REST, but let's do a brief review before diving into the differences. 

---

## `POST`, `PUT` & `PATCH`

### What is `POST`?

- `Create` in `CRUD`
- A method to create a new (subordinate) resource into the collection of resources
- When creating a new resource, the server will automatically assign an ID to this new resource.
- If successfully created, will return the HTTP status code `201 (CREATED)` and return a location-header with a link, like `https://www.example.com/recipes/1`.
- This method is neither **safe** nor **idempotent**. In other words, invoking two identical `POST` requests will result in two different resources containing the same information

**Syntax with Axios** (Example from Educative.io)
```javascript
const axios = require('axios')

axios.post('https:sample-endpoint.com/user', {
    Name: 'Fred',
    Age: '23'
  })
  .then(function (response) {
    console.log(response);
  })
```

---

### What is `PUT`?

- `Update` in `CRUD`
- A method to primarily update existing resource. If the resource does not exist, the API may decide to create a resource.
- If successfully updated, will return the HTTP status code `200 (OK)`, or `204 (No Content)` if nothing is updated. If successfully created, will return the HTTP status code `201 (CREATED)`.
- This method is **not safe**, since it modifies (or creates) states within the resource.
- It is however **idempotent**, since the resource will be the same and has the same state as it did in the same call if it is created or updated a resource with the same call again.

**Syntax with Axios** (Example from [Jason Watmore](https://jasonwatmore.com/post/2021/04/22/react-axios-http-put-request-examples))
```javascript
const article = { title: 'React PUT Request Example' };
axios.put('https://reqres.in/api/articles/1', article)
  .then(response => this.setState({ updatedAt: response.data.updatedAt }));
```

---

### What is `PATCH`?

- (Also) `Update` in `CRUD`
- A method to make partial update on the resource.
- If successfully updated, will return the HTTP status code `200 (OK)`, or `204 (No Content)` if nothing is updated.
- This method is **neither safe nor idempotent**. 

**Syntax with Axios** (Example from [Mastering JS](https://masteringjs.io/tutorials/axios/axios-patch))
```javascript
const res = await axios.patch('https://httpbin.org/patch', 'hello=world');

res.data.headers['Content-Type']; // application/x-www-form-urlencoded
res.data.json; // { hello: 'world' }
```

---

Okay, now let's talk about the differences. 

---

## `PUT` vs `POST`

### 1. Create and/or Update?
The most obvious difference is that `PUT` can both create and modify a resource while `POST` can only create a resource.

For `PUT`, if the Request-URI refers to an already existing resource, an update operation will happen, otherwise, it will create a new resource IF the Request-URI is a valid resource URI.

Request-URI stands for:
> The request URI is the uniform resource identifier of the resource to which the request applies. While URIs can theoretically refer to either uniform resource locators (URLs) or uniform resource names (URNs), at the present time a URI is almost always an HTTP URL that follows the standard syntax rules of Web URLs.

More details [here](http://www.tcpipguide.com/free/t_HTTPRequestMessageFormat-2.htm#:~:text=The%20request%20URI%20is%20the,syntax%20rules%20of%20Web%20URLs.)

Its request syntax will look something like this: `PUT /users/{user-id}`

Whereas for `POST`, the origin server **accept a request as a new subordinate of the resource** identified by the Request-URI.

Its request syntax will look something like this: `POST /users`

### 2. Idempotence

The `PUT` method is idempotent. Meaning if you (re)try to send a request multiple times, this is equivalent to a single request modification. 

Whereas, the `POST` method is NOT idempotent. If you retry to send a request multiple times, you will end up having multiple resources with multiple different URIs on the server.

### 3. In Practice
Generally speaking, the `PUT` method is used for `UPDATE` operations while the `POST` method is used for the `CREATE` operations.

---

## `PUT` vs `PATCH`

### 1. Update Partially or Fully a.k.a Replace?

`PUT` and `PATCH` can both be used for updating resources. However, the biggest difference between these two is that one can update and replace the resource while the other one can update partially.

In other words, when making a `PUT` request, the enclosed entity (a specific place you are making request on) is viewed as the modified version of the resource, and the client is requesting to replace with the new info; when making a `PATCH` request, it modifies only some part of the resource.

I found this great resource which use building houses as an example, here's the [link](https://blog.segunolalive.com/posts/restful-api-design-%E2%80%94-put-vs-patch/) and here's how the author demonstrated: 

Let's say we have this house:
```javascript
// House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 20
}
```

**`PUT`**
```javascript
// PUT request payload to update windows of House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 21
}
```

**`PATCH`**
```javascript
// Patch request payload to update windows on the House
{
  windows: 21
}
```

### 2. Idempotence

`PUT` is idempotent with reasons mentioned above, while `PATCH` is not idempotent. If a request is reattempted to be made, it will result a failed request `(Method Not Allowed)`. If a `PATCH` request is made to a non-existent URI, it would simply fail without creating a new resource like `PUT`.  

---

## Before You Go...

Hope you have some takeaway from this article! To recap this article, the main differences with these methods are the idempotence and how they operate with the requests from clients! 

- `PUT` vs `POST`: YAS to creating new resources, but only `PUT` can update/modify resources and it is idempotent but not for `POST`

- `PUT` vs `PATCH`: YAS to modify/update resources. `PATCH` allows us to modify the enclosed entity partially, while `PUT` basically replaces the entire thing. 

I will attach some further readings if you are interested in learning more! 

Last but not least, happy coding!

![The Coder Dance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emyioplz03jq6g2g3unu.gif)
 
---

## Resources

### HTTP Methods
- [HTTP Methods](https://restfulapi.net/http-methods/) (REST API Tutorial)
- [Using HTTP Methods for RESTful Services](https://www.restapitutorial.com/lessons/httpmethods.html)
- [How to make an Axios POST request] (REST API Tutorial)(https://www.educative.io/edpresso/how-to-make-an-axios-post-request) (Educative.io)
- I wrote this following article a week before this current article, this is where I referenced to as well: [HTTP Methods for RESTful Services (Part 1)](https://dev.to/mehmehmehlol/http-methods-for-restful-services-with-reactjs-axios-example-12kd)

### `PUT` vs `POST`
- [When to Use HTTP PUT and HTTP POST](https://sookocheff.com/post/api/when-to-use-http-put-and-http-post/) (By Kevin Sookocheff)
- [REST – PUT vs POST](https://restfulapi.net/rest-put-vs-post/) (REST API Tutorial)

### `PUT` vs `PATCH`
- [Use of PUT vs PATCH methods in REST API real life scenarios](https://stackoverflow.com/questions/28459418/use-of-put-vs-patch-methods-in-rest-api-real-life-scenarios) (Stack Overflow)
- [RESTful API Design — PUT vs PATCH](https://blog.segunolalive.com/posts/restful-api-design-%E2%80%94-put-vs-patch/) (By Segun Ola)
- [What’s the Difference between PUT vs PATCH?](https://rapidapi.com/blog/put-vs-patch/) (Rapid API)