DEV Community: Shodunke

FIVE DIFFERENT RESPONSES METHOD

Shodunke — Sat, 15 Feb 2025 07:41:05 +0000

Here are 5 ways to respond to a request in Express.js, explained in simple terms:

res.send(): This is like sending a text message. You can send a simple message, like "Hello!" or a more complex message with data.
res.json(): This is like sending a structured message, like a list or a table. It's useful for sending data that needs to be organized.
res.render(): This is like sending a letter with a template. You can fill in the blanks with data, and it will look nice and formatted.
res.redirect(): This is like saying, "Hey, go look over there!" It sends the user to a different webpage.
res.end(): This is like saying, "That's all, folks!" It ends the conversation, and the user's browser will stop waiting for more data.

DIFFERENCE BETWEEN REQ.QUERY, REQ.PARAMS AND REQ.BODY

Shodunke — Sat, 15 Feb 2025 07:39:23 +0000

In Express.js, a popular Node.js web framework, req is an object that represents the HTTP request. It has several properties that allow you to access data sent with the request. Here's a breakdown of the differences between req.body, req.query, and req.params:

req.body

Contains the parsed body of the request, typically used for POST, PUT, and PATCH requests.
The body can be in various formats, such as JSON, URL-encoded, or multipart/form-data.
To access req.body, you need to use a middleware like body-parser or express.json().

req.query

Contains the query string parameters of the request, typically used for GET requests.
The query string is the part of the URL that comes after the ? symbol.
req.query is an object where the keys are the parameter names and the values are the parameter values.

req.params

Contains the route parameters of the request, typically used for routes with parameterized paths.
Route parameters are defined in the route path using a colon (:) followed by the parameter name.
req.params is an object where the keys are the parameter names and the values are the parameter values.

Here's an example to illustrate the differences:

const express = require('express');
const app = express();
app.use(express.json());

// Route with route parameter
app.get('/users/:id', (req, res) => {
  console.log(req.params); // { id: '123' }
  res.send(`User ID: ${req.params.id}`);
});

// Route with query string parameters
app.get('/products', (req, res) => {
  console.log(req.query); // { category: 'electronics', price: '100' }
  res.send(`Products: ${req.query.category} ${req.query.price}`);
});

// Route with request body
app.post('/orders', (req, res) => {
  console.log(req.body); // { productId: '123', quantity: 2 }
  res.send(`Order placed: ${req.body.productId} x ${req.body.quantity}`);
});

This code

HTTP METHOD AND STATUS CODE

Shodunke — Fri, 31 Jan 2025 21:58:39 +0000

HTTP stands for "HyperText Transfer Protocol," and it's the computer communication protocol used for most communication on the world wide web. The protocol is the set of rules that actually conducts the client/server interaction between your web browser and the destination web page.

The primary or most commonly-used HTTP methods are POST, GET, PUT, PATCH, and DELETE. These methods correspond to create, read, update, and delete (or CRUD) operations, respectively. There are a number of other methods, too, but they are utilized less frequently.

GET
The HTTP GET method is used to read (or retrieve) a representation of a resource. In case of success (or non-error), GET returns a representation in JSON and an HTTP response status code of 200 (OK). In an error case, it most often returns a 404 (NOT FOUND) or 400 (BAD REQUEST).

Note
According to the design of the HTTP specification, GET requests are used only to read data and not change it. So, they are considered safe. That is they can be called without risk of data modification or corruption—calling it once has the same effect as calling it 10 times.

POST
The POST method is most often utilized to create new resources. In particular, it is used to create subordinate resources. That is subordinate to some other (e.g. parent) resource. In other words, when creating a new resource, POST to the parent and the service takes care of associating the new resource with the parent, assigning an ID (new resource URI), etc.

On successful creation, HTTP response code 201 is returned.

Caution
POST is not a safe operation. Making two identical POST requests will most likely result in two resources containing the same information but with different identifiers.

Note
It is possible to create both primary and related API resources via a single API request
For some resources, you can create a resource (if it did not already exist) or update it (if it does) via a single API request.

PATCH
PATCH is used to modify resources. The PATCH request only needs to contain the changes to the resource, not the complete resource.

In other words, the body should contain a set of instructions describing how a resource currently residing on the server should be modified to produce a new version.

Caution
PATCH is not a safe operation. Collisions from multiple PATCH requests may be dangerous because some patch formats need to operate from a known base point; otherwise, they will corrupt the resource. Clients using this kind of patch application should use a conditional request (e.g., GET a resource, ensure it was not modified and apply PATCH) such that the request will fail if the resource has been updated since the client last accessed the resource.

DELETE
DELETE is quite easy to understand. It is used to delete a resource identified by filters or ID.

On successful deletion, the HTTP response status code 204 (No Content) returns with no response body.

Important
If you DELETE a resource, it is removed. Repeatedly calling DELETE on that resource will often return a 404 (NOT FOUND) status code since it was already removed and, therefore, is no longer findable.

HTTP STATUS CODE
1xx - Informational

100 Continue: The request is being processed, and the client should continue sending the request body.
101 Switching Protocols: The client has requested a change in protocol, and the server is acknowledging the request.

2xx - Success

200 OK: The request was successful, and the response body contains the requested data.
201 Created: The request was successful, and a new resource was created.
202 Accepted: The request was accepted, but the processing has not been completed.
203 Non-Authoritative Information: The server is returning information from a cache or another source, but the information may not be up-to-date.
204 No Content: The request was successful, but there is no response body.
205 Reset Content: The request was successful, and the client should reset the document view.
206 Partial Content: The server is delivering only part of the requested resource.

3xx - Redirection

300 Multiple Choices: The requested resource has multiple representations, and the client can choose one.
301 Moved Permanently: The requested resource has been permanently moved to a new location.
302 Found: The requested resource has been temporarily moved to a new location.
303 See Other: The requested resource can be found at a different location.
304 Not Modified: The requested resource has not been modified since the last request.
305 Use Proxy: The requested resource must be accessed through a proxy.
307 Temporary Redirect: The requested resource has been temporarily moved to a new location.
308 Permanent Redirect: The requested resource has been permanently moved to a new location.

4xx - Client Error

400 Bad Request: The request was invalid or cannot be processed.
401 Unauthorized: The client is not authorized to access the requested resource.
402 Payment Required: The requested resource requires payment.
403 Forbidden: The client is not allowed to access the requested resource.
404 Not Found: The requested resource was not found.
405 Method Not Allowed: The request method is not allowed for the requested resource.
406 Not Acceptable: The requested resource is not available in the requested format.
407 Proxy Authentication Required: The client must authenticate with a proxy.
408 Request Timeout: The request took too long to process.
409 Conflict: The request conflicts with another request or resource.
410 Gone: The requested resource is no longer available.
411 Length Required: The request must specify a content length.
412 Precondition Failed: A precondition specified in the request failed.
413 Payload Too Large: The request payload is too large.
414 URI Too Long: The request URI is too long.
415 Unsupported Media Type: The request media type is not supported.
416 Range Not Satisfiable: The requested range is not available.
417 Expectation Failed: An expectation specified in the request failed.
418 I'm a teapot: The server is a teapot and cannot brew coffee.
421 Misdirected Request: The request was sent to the wrong server.
422 Unprocessable Entity: The request was well-formed but cannot be processed.
423 Locked: The requested resource is locked.
424 Failed Dependency: A dependency specified in the request failed.
425 Too Early: The request was sent too early.
426 Upgrade Required: The client must upgrade to a different protocol.
428 Precondition Required: A precondition is required for the request.
429 Too Many Requests: The client has sent too many requests.
431 Request Header Fields Too Large: The request header fields are too large.
451 Unavailable For Legal Reasons: The requested resource is unavailable for legal reasons.

5xx - Server Error

500 Internal Server Error: The server encountered an unexpected error.
501 Not Implemented: The requested method is not implemented by the server.
502 Bad Gateway: The server received an invalid response from another server.
503 Service Unavailable: The server is currently unavailable.
504 Gateway Timeout: The server did not receive a response from another server in time.
505 HTTP Version Not Supported: The requested HTTP version is not supported by the server.
506 Variant Also Negotiates: The requested resource has multiple variants, and the client must negotiate.
507 Insufficient Storage: The server does not have enough storage to fulfill the request.
508 Loop Detected: A loop was detected in the request.
510 Not Extended: The requested extension is not supported by the server.
511 Network Authentication Required: The client must authenticate with the network.

JavaScript Spread and Rest Operators – Explained with Code Examples

Shodunke — Wed, 22 Jan 2025 09:23:08 +0000

In modern JavaScript, the spread and rest operators are indispensable tools for simplifying array manipulation and function parameters. These operators provide elegant solutions for tasks like array expansion and function arguments handling.
The Spread Operator
The spread operator, denoted by three consecutive dots (...), is primarily used for expanding iterables like arrays into individual elements. This operator allows us to efficiently merge, copy, or pass array elements to functions without explicitly iterating through them.
Consider the following array:

Before the Spread Operator
Traditionally, if we wanted to create a new array with existing elements appended to it, we'd resort to cumbersome approaches like this:

This method involves either hard-coding each element or manually looping through the array, resulting in verbose and error-prone code.
After the Spread Operator
Enter the spread operator, offering a concise and intuitive alternative:

In this example, we seamlessly integrate the contents of arr into newArr using the spread operator. No manual indexing or looping is required, making the code more readable and maintainable.
Spread Operator Use Cases
Combining Arrays
The spread operator provides an elegant solution for combining multiple arrays into a single array. By spreading each array's elements within a new array, we can concatenate them effortlessly.

This approach eliminates the need for manual iteration or concatenation methods, resulting in concise and readable code.
Passing Arguments to Functions
The spread operator simplifies the process of passing variable-length arguments to functions. Instead of specifying each argument individually, we can use the spread operator to unpack an array of values into function parameters.

This technique enhances function flexibility and reduces redundancy, especially when dealing with dynamic inputs.

Copying Arrays
The spread operator offers a concise method for copying arrays, ensuring that modifications to the copied array do not affect the original. By spreading the original array's elements into a new array, we create a distinct copy.

Unlike traditional methods like slice() or concat(), the spread operator provides a more intuitive and readable approach to array duplication.

The Rest Operator
While the spread operator expands elements, the rest operator condenses them into a single entity within function parameters or array destructuring. It collects remaining elements into a designated variable, facilitating flexible function definitions and array manipulation.

Before the Rest Operator
Prior to the rest operator, extracting specific elements from an array while preserving the rest required manual manipulation or looping.

Consider a scenario where we want to extract the first element from an array and collect the rest into a separate array. Before the introduction of the rest operator, achieving this task involved more verbose code:

In the above example, first captures the initial element (1) by directly accessing it at index 0, while rest is obtained by slicing the array from index 1 onwards. This manual approach is prone to errors and less intuitive compared to using the rest operator.

After the Rest Operator
With the introduction of the rest operator, extracting specific elements becomes more intuitive and concise.

In this example, first captures the initial element (1), while rest encapsulates the remaining elements ([2, 3, 4, 5]). The rest operator empowers us to handle variable-length inputs with ease.

Rest Operator Use Cases
Handling Variable-Length Function Arguments
The rest operator simplifies the handling of variable-length arguments in functions. It allows functions to accept an indefinite number of arguments without explicitly specifying each one.

The ...numbers syntax collects all passed arguments into an array named numbers, enabling flexible function definitions.

Array Destructuring
The rest operator is commonly used in array destructuring to capture remaining elements into a separate array variable.

This allows for more concise and readable code when working with arrays, especially in scenarios where only the first few elements are of interest.
Conclusion
That's it! These operators simplify array manipulation and function handling, making your code more efficient and readable.