One place for hosting & domains

      Method

      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

      Using JavaScript’s sort Method for Sorting Arrays of Numbers


      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.

      The sort method available on the Array prototype allows you to sort the elements of an array and control how the sorting should be done. The aim of this post is to explain to you why, why not and how the sort method works when sorting an array of numbers.

      TL;DR — Sort an array of numbers in ascending order using:
      myArray.sort((a, b) => a - b);

      Arrays in JavaScript are data structures consisting of a collection of data items. Because Javascript is not a typed language, Javascript arrays can contain different types of elements – strings, numbers, undefined, etc. It’s most often a good idea to have all items in an array be of the same type however.

      One of the many operations that can be performed on an array is sorting. Whether you need to know the best students from a collection of grades, the big winners of Wall Street, how much data you’ve been consuming lately, it all involves organizing a collection through sorting.

      In the code examples below. We’ll get a collection of eggs in our nest, then sort them both in ascending and descending order. Ready? Let’s do it!

      Filling an Array

      We declare and initialize a nest array and prefill it with null values – for the moment:

      let eggsInNest = new Array(10).fill(null);
      

      We use the static fill method available on the Array constructor method. Next, let’s fill the 10 elements each with random values ranging from 1 – 200:

      eggsInNest = eggsInNest.map(() => (Math.floor(Math.random() * 200) + 1));
      

      Sorting

      We can then sort simply by calling the sort method on our array without arguments:

      eggsInNest.sort();
      
      // e.g.: [109, 136, 156, 188, 19, 190, 2, 34, 55, 90]
      

      As you can see, there’s a slight problem and sorting didn’t quite work out as you might have expected. Read on to learn why and how to fix it.

      By default the sort() method sorts the array:

      1. In ascending order
      2. With the items casted to strings

      To do this, the sort method calls the String() casting method on every array element and then compares the equivalent strings to determine the correct order.

      It would have been that easy, except for the fact that items are compared as strings, which has items sorted as if they were strings of characters instead of numbers. In short, most times, using the sort method without a callback method doesn’t quite work, because sort doesn’t sort the way we expect. Instead, it needs to be explicitly told how to do so – with a callback function.

      The callback function or, technically, comparison function receives two arguments (called a and b by convention) and should return 1 if the first argument should preceed the second, -1 if the second argument should preceed the first and 0 if they are equal. Whew! 😓


      Let’s create a sortEggsInNest comparison function:

      function sortEggsInNest(a, b) {
        if (a > b) {
          return 1;
        } else if (b > a) {
          return -1;
        } else {
          return 0;
        }
      }
      
      

      If you want to be a hotshot 😎, you could reduce the sortEggsInNest comparison function with a ternary operator like so:

      function sortEggsInNest(a, b) {
        return a > b ? 1 : b > a ? -1 : 0;
      }
      

      Then we can call the sort method again but this time passing in the sortEggsInNest comparison function:

      eggsInNest.sort(sortEggsInNest);
      

      And yes, it works… in ascending order.

      Descending order

      Need to sort in descending order? Just swap the return 1 in the comparison function with return -1 like so:

      function sortEggsInNest(a, b) {
        if (a > b) {
          return -1;;
        } else if (b > a) {
          return 1;;
        } else {
          return 0;
        }
      }
      

      Or, the short version using ternary operators:

      function sortEggsInNest(a, b) {
        return a > b ? -1 : b > a ? 1 : 0;
      }
      

      A Shorter Way with Numbers

      Finally, there’s even a shorter way to write the comparison function. Here:

      eggsInNest.sort((a, b) => a - b);
      

      This is only Ok because the comparison function only returns 1, -1 or 0. and subtracting the two intermediate values yields exactly that. However keep in mind – this can only be used with numeric types or objects whose valueOf() method returns numeric values (such as the Date object).

      Further Reading

      sort is one of many Array Mutator Methods along with shift, splice, reverse and others. For more info on all methods see How To Use Array Methods in JavaScript: Mutator Methods



      Source link