One place for hosting & domains

      Explained

      The JavaScript Reduce Method Explained


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      Reduce is a method that can be difficult to understand especially with all the vague explanations that can be found on the web. There are a lot of benefits to understanding reduce as it is often used in state management (think Redux).

      The signature for the reduce array method in JavaScript is:

      arr.reduce(callback, initialValue);
      

      Terminology

      Reduce comes with some terminology such as reducer & accumulator. The accumulator is the value that we end with and the reducer is what action we will perform in order to get to one value.

      You must remember that a reducer will only return one value and one value only hence the name reduce.

      Take the following classic example:

      const value = 0; 
      
      const numbers = [5, 10, 15];
      
      for(let i = 0; i < numbers.length; i++) {
        value += numbers[i];
      }
      

      The above will give us 30 (5 + 10 + 15). This works just fine, but we can do this with reduce instead which will save us from mutating our value variable.

      The below code will also output 30, but will not mutate our value variable (which we have now called initialValue)

      /* this is our initial value i.e. the starting point*/
      const initialValue = 0;
      
      /* numbers array */
      const numbers = [5, 10, 15];
      
      /* reducer method that takes in the accumulator and next item */
      const reducer = (accumulator, item) => {
        return accumulator + item;
      };
      
      /* we give the reduce method our reducer function
        and our initial value */
      const total = numbers.reduce(reducer, initialValue)
      

      The above code may look a little confusing, but under the hood there is no magic going on. Let’s add a console.log in our reducer method that will output the accumulator and the item arguments.

      The following screenshot shows what’s logged to the console:

      Reduce Output

      So the first thing we notice is our method is called 3 times because there are 3 values in our array. Our accumulator begins at 0 which is our initialValue we passed to reduce. On each call to the function the item is added to the accumulator. The final call to the method has the accumulator value of 15 and item is 15, 15 + 15 gives us 30 which is our final value. Remember the reducer method returns the accumulator plus the item.

      So that is a simple example of how you would use reduce, now let’s dive into more a complicated example.

      Flattening an Array Using Reduce

      Let’s say we have the following array:

      const numArray = [1, 2, [3, 10, [11, 12]], [1, 2, [3, 4]], 5, 6];
      

      And let’s say for some crazy reason, JavaScript has removed the .flat method so we have to flatten this array ourselves.

      So we’ll write a function to flatten any array no matter how deeply nested the arrays are:

      function flattenArray(data) {
        // our initial value this time is a blank array
        const initialValue = [];
      
        // call reduce on our data
        return data.reduce((total, value) => {
          // if the value is an array then recursively call reduce
          // if the value is not an array then just concat our value
          return total.concat(Array.isArray(value) ? flattenArray(value) : value);
        }, initialValue);
      }
      

      If we pass our numArray to this method and log the result we get the following:

      Flatten Array Output

      This is a great example on how we can make a very common operation quite simple.

      Let’s go over one more example.

      Final Example – Changing an Object Structure

      So with the new Pokemon game coming out, let’s pretend we have a server that sends us an array of Pokemon objects like so:

      const pokemon = [
        { name: "charmander", type: "fire" },
        { name: "squirtle", type: "water" },
        { name: "bulbasaur", type: "grass" }
      ]
      

      We want to change this object to look like:

      const pokemonModified = {
        charmander: { type: "fire" },
        squirtle: { type: "water" },
        bulbasaur: { type: "grass" }
      };
      

      To get to that desired output we do the following:

      const getMapFromArray = data =>
        data.reduce((acc, item) => {
          // add object key to our object i.e. charmander: { type: 'water' }
          acc[item.name] = { type: item.type };
          return acc;
        }, {});
      

      If we call our method like so:

      getMapFromArray(pokemon)
      

      We get our desired output:

      Pokemon Output

      You can check out the Codesandbox here.

      Conclusion

      At first sight, the reduce looks more complex than other JavaScript Array Iteration Methods like map and filter, but once the syntax, core concepts and use-cases are understood it can be another powerful tool for JavaScript developers.



      Source link

      IaaS Explained: Take a Tour Through “Cloud Town” (INFOGRAPHIC)


      Infrastructure as a Service (IaaS) is a fast-growing category of cloud computing that provides IT staff the flexibility to deploy virtual compute and storage resources in a service provider’s data center with application specific configurations. Users can manage the environments themselves or leverage the services of the provider or a third party for additional support and efficiencies.

      Although major public cloud players like AWS and Microsoft Azure tend to dominate the IaaS discussion, such hyperscale platforms are not the only model for success. To help readers navigate the many nuances of the IaaS marketplace, we lovingly built the following interactive infographic: Iaas for Business, Explained.

      Click the image below to begin your tour of “Cloud Town” or read on for some highlights.

      So why the city and building metaphor? Because much like people choosing where to live based on diverse socio-economic, lifestyle and family considerations, workload and application placement in the cloud is predicated on a series of comparable factors – e.g. economics, security, performance requirements, range of managed services, data center location, etc.   

      Cloud Town showcases residents of four distinct neighborhoods: Public Cloud District, Dedicated Private Cloud Gated Community, Virtual Private Cloud Townhomes, and On-Premisville. Here are a few select snapshots.

      Public Cloud  

      Public clouds are virtualized, multi-tenant environments. Hyperscale providers offer global redundancy, pay-as-you consume pricing models, and instant scalability. While easy to spin up and scale, determining how to  manage, secure and optimize resources across cloud and on-premises platforms can be challenging.

      Dedicated Private Cloud

      Dedicated Private Clouds are fully isolated environments custom designed from single-tenant compute nodes. These hosted environments are ideal for applications with predictable performance requirements or  require complex architectures and highly customized configurations.

      Virtual Private Cloud

      Virtual Private Clouds are logically isolated multi-tenant environments that offer consistent performance and easy-to-scale compute resources that are ideal for applications with significant variable resource requirements.

      The drive through Cloud Town builds to an important conclusion:

      So where’s the best place to live in Cloud Town? There’s no right answer. That’s because it’s not the physical home that matters — it all comes down to the diverse needs of residents and families.

      In fact, most denizens of the cloud won’t stay put in one environment . . .

      The concept ‘multicloud’ is quickly becoming an apt descriptor for many modern IT strategies. It’s sort of like accommodating the needs of several generations of a family at once. Unless you’re in a 90s sitcom, not everyone’s going to fit under one roof.

      If you’re exploring Infrastructure as a Service solutions for your applications, you’re in the right place. Whether you need help designing and managing an AWS or Azure deployment or need a hyper-secure, high-powered environment for your critical applications, SingleHop has managed solutions and certified engineers to help you navigate every cloud lifestyle. We hope you enjoy the tour! 



      Source link