DEV Community: Excel Nwachukwu

You don't know JavaScript reduce() method

Excel Nwachukwu — Fri, 19 Aug 2022 09:55:00 +0000

Do you know you could actually use the same reduce method you have always used to return the sum for chaining together your promises or to even compose functions?

The reduce method is one of the most powerful array methods used in JavaScript alongside fellow avengers - the filter and map method.

Being this powerful also means it's rarely understood by budding developers like me while being scarcely adopted by mainstream JavaScript developers.

Today, we're taking a look at its traditional usage for summing up values as well as two more interesting use cases later in the article.

What is the Reduce Method?

According to MDN

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element.

Similar to map, filter, and forEach, the reduce method allows us to iterate through our array, taking a callback function on each item and then returning a single value.

Interestingly, this single value can be anything from - number, array, or even an object.

1. The Accumulator Function

Obviously, the most common example known to man!

Now, saying this is common might be relative but, this has to be the most basic use case of the reduce method out there on the web.

Let's say we have an array of objects and we are looking to get the sum of the salary so we can make a decision on why the intern is getting $30 while the boss takes home $400.

// Array of objects
const staff = [
  {name: 'bob', age: 20, position: 'developer', salary: 100},
  {name: 'peter', age: 25, position: 'designer', salary: 300},
  {name: 'susy', age: 30, position: 'CEO', salary: 400},
  {name: 'anna', age: 35, position: 'intern', salary: 30}
]

Here's one way to use the reduce method:

const totalSalary = staff.reduce((total, currSalary) => {
  total = total + currSalary.salary
  return total
}, 0)

NB: Always return the first parameter!

Here, we are creating a new variable with the name totalSalary and using the reduce method which takes two parameters - total, currSalary.

Now, these two parameters can be named anything but essentially, the accumulator - total and currSalary refers to the sum of iteration and the current item being iterated at a given time respectively.

The total exists to hold the sum of each round of iteration while currSalary identifies the next item in the loop to be iterated on.

We also have to define the starting position of our loop and that's why we have 0 at the end of our callback function so our count starts from.

In essence, here's what we're getting as a result from the function above:

// console.log(total); 0, 100, 400, 800, 830
// console.log(currSalary.salary); 100, 300, 400, 30
console.log(totalSalary), // 830

And just like that, you have the sum of salary paid out to employees in little to no code.

However things get interesting from here :)

More reduce method plsss...

If you've only known and used the reduce to return the sum of values in an array, then check this space onwards for some magic!

2. Chaining Together Promises

The async keyword when managing long-running tasks might be the best thing that ever happened to JavaScript.

In the way that it helps us group individual task in a function which can be passed into the next function.

But, what of a situation you intend to use something asides the async keyword, and intend to achieve a clean code devoid of the popular callback hell.

Using the reduce method in your function can be an option in achieving same purpose and ultimately helps you manage the different phase of each task iteration?

Let's say we have local api containing some IDs:

let itemIDs = [1, 2, 3, 4, 5]

One way we could chain together our promises without using the regular .then function is this:

const itemSum = itemIDs.reduce(async (promise, itemID) => {
  const item = await promise
  return item.deleteItem(itemID)
}, Promise.resolve())

Now, essentially what we are doing is nothing more than your regular chain of .then commands like this:

Promise.resolve()
  .then((item) => item.deleteItem(1))
  .then((item) => item.deleteItem(2))
  .then((item) => item.deleteItem(3))
  .then((item) => item.deleteItem(4))
  .then((item) => item.deleteItem(5))

3. Composing Functions

The reduce method can also be used to compose our functions i.e define how and what direction we want the iteration to work.

The reduce method is popularly known for acting as an accumulator but the gimmick is, that it always sorts the array from left to right.

How about we define this in our own way by composing a function using reduce() and passing along the result to the next running function?

This example is one I've jacked from Bojan Gvozderac and his post on reduce, filter and map methods.

We could have something interesting as this;

let double = [1, 2, 3, 4, 5]

const compose =
  (...double) =>
  (n) =>
    double.reduceRight((v, f) => f(v), n)

Now, this is really mind-blowing, which I've had quite a tough time grasping.

But, this is the trick:

We have a variable compose - which is partially applied using the rest parameter so that we can compose as many functions as we want and all of them will be put in the double array.

Next, we pass an initial value n after which we now use the reduceRight together with the initial value n to define the starting position of or composed function.

It might get confusing but, this is the same as the reduce method in the first example only that the accumulator starts counting from the end of the array and then moves to the start using the (f, v) parameter.

Awesome confusion right!

Conclusion

The reduce method is one hell of a method to use in different ways and with JavaScript without a definite structure, your guess...

However, the amazing thing is that it passes the result of the callback function to the next allowing us to manipulate array data in different ways.

Now, we have looked at really awesome use cases of the reduce method as well as a viable practice to employ when working with Api data.

However, I would love to know which of these you have applied in a project of yours before.

Also, If you know more fun and creative ways to use the reduce method, I’d really be glad to know about them in the comments😊

If you liked this article, consider giving me a follow and also check out my Twitter as I take you through my journey learning JavaScript’ for frontend development.
https://github.com/trillionclues

Thank you for reading!❤️

HTTP Response Status Codes: A Beginner Guide

Excel Nwachukwu — Tue, 05 Jul 2022 08:54:16 +0000

Last week, I had a torrid time making my first request from an API and passing the data to the DOM. Though it turned out a success at last, It wasn't until after numerous errors and fail responses and having to figure out with error meant what.

So, I've decided to make a list of all the HTTP responses you are likely to encounter when consuming an API.

But then, if you are like me and you are thinking...

What are APIs?

API is an acronym that stands for Application Programming Interface.

They are essentially just set of protocols used to create software and applications. It can be a type of system like a web-based system, operating system, or database system.

Just a little analogy here...

Remember when you visit a website, maybe an online store to buy new Nike Airforce shoes, you are always required to type the URL of said website into the browser?

Have you ever imagined what goes on behind the scenes to make sure that only content from the Nike website is served to you and not that of Puma?

Your request is processed by an API, usually chunk of codes acting as a bridge between you(client) & the computer (machine) for shoe content details to be fetched from the Nike website. It does this by searching through the server which responds with three-digit HTTP codes and ultimately serving the content that you were trying to access.

Usually a fail or success response!

So, that brings us to our main course.

HTTP status codes, what are they?

As a continuation with our analogy above, let's say you love Nike so much you have come to know their website off-hand. SO, one of these days, you decide to enter in the URL but, instead of Nike you had Nikke.

You browser will receive a set of three-digit status codes from the server that either the above request successfully fetched Nike.com or another website that isn't Nike.

This HTTP code is not seen by the client(nike fanboy) if the server can restore the content requested by the browser and there is no error. In the event that something goes wrong, the server will return an HTTP status code indicating that something isn't operating properly or it couldn't make that request successfully.

Basically, 404-Not Found and 502-Bad Gateway errors are two common response codes that users encounter when browsing through websites or apps using the wrong or broken URL. However, there are numerous server status codes apart from this.

HTTP Response Status Codes

Basically, there are five different categories of HTTP response code. The first digit of the HTTP code is usually an identifier of the type of response to be expected with the interpretations usually; informative, successful, redirection, error browsers, or server errors.

Just a little spoiler here, anything asides a status 200 response is an error. So without further Ado...

1. 1xx Status Codes: Informational

This are the first range of status code responses to expect when making requests. It is not an error response but usually an indicator that the request has been received, understood and currently processed. They are purely informational and, some status codes that fall under this column are 100, 102, and 103.

2. 2xx Status Code: Success

The 2xx status code responses are the joy of any developer, apparently!!! They usually depict that the client's request was successfully received, processed and served without any hiccups. Success requests here can be anything from; OK, Created, Accepted, Reset Content, etc. Some of the codes to expect here are; 200, 201, 202, 203, 204, 205, 206, 207, 208, and 226

3. 3xx Status Code: Redirection

This class of status code responses is always an indicator for the client to take additional action to complete the request, usually in the case of a URL redirection. The redirect actions may be carried out automatically by the browser or may require extra user interaction especially whenever you try leaving a website eg Twitter to access another link on another server. Some of the response codes here are; 300, 301, 302, 303, 304, 305, 306, 307, 308.

4. 4xx Status Code: Client Error

The response classification with the most HTTP status codes, and every user and developer nightmare. They represent everything wrong with the website or App; from a page been deleted, redirected, or if a URL or link has been supplied incorrectly. The many response codes until this category are; 400, 401, 402, 403, 404, 405 down to 451. Not SEO friendly in any way.

5. 5xx Status Code: Server Error

The final category of HTTP status code response is the 5xx status codes. These type of status codes usually indicate error in which the server is aware that it has encountered an error and incapable of fulfilling the request. The errors can be caused by anything from a faulty connection or even the browser itself. The status codes under this class are; 500, 501, 502, 503, 504, 505, 506, 507, 508, 510, and 511.

Conclusion

HTTP is the protocol used by search engine crawlers and websites and HTTPS status code responses are an integral part of web development and SEO as it not only guarantees seamless access to website or app content but, also brings and retains organic traffic to your site.

You want a dozen of the 2xx returned whenever user request content from the server

You don't want HTTP status codes 5xx and 4xx to be returned

And also, the 3xx are not bad but a lot of them does no good.

To avoid all the bad eggs, there are some internet tools to always verify what status code response is been passed by your content on request.

Some HTTP Status Code Checkers

Google Search Console

Google's search tool to not only make SEO analysis but also, identify broken URLs, look at the Crawl and Crawl Error reports.

Screaming Frog

Screaming frog is a UK-based SEO and their seo spider tool can come in handy to analyze website and app logs and domain URLs.

Deep Crawl

Deep crawl works almost identical to the Screaming Frog tool, with the added benefit of cloud-based software and the flexibility to handle larger domains.