To start off with in this section I will be going over some very simple examples of the array reduce method just for the sake of getting the very basics out of the way. Understanding the basic idea of the method is maybe not as simple as what is going on with some other array prototype methods such as the array for each method. If you find yourself in a situation in which you are getting a little frustrated with array reduce, it might be called for to take a breath, step back for a moment, and just work out a few simple examples of the method to get a better sense of what the core functionally of the array reduce method is.
The source code examples in this post are on Github
1.1 - Simple sum example
One typical use case of the array reduce method is to create some kind of sum with an array of numbers. TO do this I can just call the array reduce method off of the array of numbers and pass a single function that will be the so called reduce function. In the body of this reducer function I just need to return the sum of the accumulator argument that is the first argument with the current value which would be the second argument.
1.2 - An array of strings
If I have an array of strings I could use the array reduce method as a way to create a single string from the array of strings, but in many typical use case examples I might want to go with using the array join method in place of doing so. That is that maybe there are some situations in which I would want to use reduce, but if I just want to have a fixed separator or not between each substring and that is it the array join method will work just fine.
1.3 - An array of objects
There is also working with an array of objects, and wanting to create some kind of reduced value from one or more properties. For this example I am creating a sum from a certain value in each of the objects in an array. Just like with any other kind of element I just need to add to the accumulator.
Thus far all of these examples have involved creating a primitive value such as a number or a string from an array of values. However that does not have to be the case of course. the starting value by default actually is a new array with the first array being the first element of the array to which reduce is being called off of actually. So maybe at least one or more basic examples are needed in this section before I move on to some more advanced topics involving array reduce.
1.4 - Using array reduce to filter an array
When I think of reduce I often think in terms of creating some kind of single value in the form of a number, or a string from an array of values. However the end result can also very much be a new array, with a reduced number of elements, or many even more elements if I really wanted to actually depending of course on the logic of the function that I give to reduce oddly enough.
2 - Setting the start value for the accumulator
In this section I will be focus on the toping of setting a start value for the accumulator value or not. Be default if not starting value is given for the accumulator the first element in the array will be used for such a value, as such the starting element index for the reducer will not be the first element, but the second one. As such this can case some problems if one does not know how to adjust for it. Typically type checking is used in the body of the reducer, or another way is to just set a starting value and then all the elements will be called with the reducer function.
2.1 - Setting an accumulator start value and not
2.2 - index values
One again I am doing more or less the same thing as the first example here the only different is that I am logging the index value in the reducer functions. If I do not give a starting value then the starting index for the reducer function will be 1, because the element of index 0 is used as the starting value. As such it is typically a good index to give some kind of starting value for the array reduce method.
3 - The reducer function
There is then taking a closer look at the reducer function that is given when it comes to the full scope of arguments to work with in each call of the render function. The set of arguments will differ a little from other functions that are given to other array prototype methods like array for each and array map. Often the first argument is the current value of the current element, but with array reduce the first argument is the current value of the accumulator value. After that it is then the current element value, followed by the element index, and then a reference to the source array that array reduce is called off of.
4 - Using The Array reduce method with any object like the lodash reduce collection method
4.1 - Using function call with Array like objects
When it comes to an array like object one option would be to use the call function prototype method. The call method of the function prototype is one of several methods in the function prototype that can be used to set what the value of the this keyword should be inside the body of a prototype function. So in the event that I am dealing with an object that is formated like and array, thin the call method can be used to just get the reduce method to work with it, even if it is an object that is not of the array prototype.
4.2 - Using the Array from method with Array like Objects
Another option when it comes to dealing with array like objects would be to use the Array from method. This array from method is just simply a way to convert an array like object into an actual array rather than doing some kind of trick with function prototype methods. So I could just call Array from and pass the array like object to array from, and then just call reduce after that to get a desired result with an array like object.
So then the array from method, as well as the function prototype methods are great tools when it comes to getting a array prototype method like reduce to work with a regular object. However one major draw back is that they only work well with objects that just happen to be structured just like arrays when it comes to the so called own properties of objects. Often I might be dealing with some kind of collection in the format of named rather than numbered keys, and I may not have a length property for the objects also. SO then lets looks at some more options when it comes to getting the array reduce method to work with objects in general.
4.3 - The Object values static method
The object values method is a static method of the Main Object global in core javaSscript that will return an array of values for each public key in a given object. So if I want to use reduce with the values of an object that has named keys rather than numbed ones, this would be one way to go about doing so. I can just call the Object values method and given the object to that method, the returned result is then an array of all the public values of that object, it is then this array that I would call reduce off of to get the final product.
4.4 - The Object keys static method
The Object keys method is just like Object values only it will give an array of key names rather than values. So then say that I am in a situation in where I want to do some kind of thing with array reduce, but with an object that has data that I want to involve in the reduction encoded into the key names, as well as with the corresponding values. I can use the Object keys state method to get an array of these keys of the object, and I can then use the array map method to create a new array based off of this array that will then be an array of objects with the keys as well as the values. The reduce method can then be called oof of the resulting array that is the result of using the object keys static method as well as array map to producing the desired final result from data in the keys and values of a plain old object that looks nothing like an array.
4.5 - A string of numbers and the String split method
When it comes to strings a useful method is the split string prototype method that is one method that comes to mind right away when I thing of ways to create an array from a string. This split method can just be called off of a string, and then a string values that is used to split the string into sub strings can be given as an argument. If an empty string is given to the string split that will result in each letter being its own element in the resulting array. This can then be used as a way to call reduce for each letter in the source sting then.
5 - Using array reduce for filtering
Array reduce can be used to set an starting value for an accumulator, and that accumulator value can be an array. It is then possible to push just the elements that I just want from a source array into this accumulator array. So then it is possible to use the array reduce method to filter a source array of elements that I do not want
5.1 - Array reduce and array filter
So then in this example I am using the array reduce method and the array filter method to do the same thing.
6 - Some use case examples of array reduce
So now that I got all of the basics out of the way, as well as some not so basic aspects of the array reduce method on top of that it is now time to start looking into at least a few simple use case examples of the array reduce method. That is not just some silly use case examples for the purpose of showing how to use the method, but some examples that are a kind of software product, or at least something that might be used in such a product failing that I would say.
6.1 - create a mean of average if you prefer from an array of numbers
One thing that comes to mind right away is to create a mean from an array of numbers. There is more than one kind of mean actually when it comes to rally getting into math. However most people would thing of a mean as just simply the sum of all the numbers dived by the number of numbers. This kind of mean is often refereed to as an arithmetic mean.
6.2 - Add up array of object props helper
Often I might want to create a sum from a single property of a standard object to which I have an array of. That is that I often am working with some kind of object pool, or collection of objects, and each object in this collection has one or more properties for something. Say I want to have a simple helper method that will just add up add the numbers for a given property such as money.
6.3 - Basic check sum example
The general idea of a check sum is to have a way to create a primitive value for the given state of something. For example there is having a binary file that is the original file from an author that has not been edited, or tampered with in any way and creating a sum value for that binary. There is then creating a sum for another binary file that may or may not have been tampered with and comparing that sum with the sum of the known original binary as a way to find out if it has been tampered with or not.
There are many other creative used for a method such as this though, so as making some software that will use content to generate a state for the map of a game based on that content. In any case the basic idea of a check sum method is not so hard, and the array reduce method is a great tool for whipping up a simple, crude, checksum method. There is just ruining over the state of something such as a string value of it, and adding up some kind of value such as a check sum value. There is then keeping this checksum value in a given range of one kind or another, the larger the range the better when it comes to always coming up with some kind of unique value for the state to which a check sum is being created for.
7 - Conclusion