In some cases I might want to just simply fill all element index values in an array with a set static value, or created a new array with a given count of element that are all set to a given starting value. For example I might want to start off an array of numbers to a starting value of zero number value for each element. However the idea of filling an array with values might have more than one meaning other than just that. For example I might want to start off an array with a range of numbers starting with 1 going up from there to the length of the array, and then use this kind of array with another method such as the a map method to create a final array with desired values. So then there is filling an array with static values, and then there is filling an array with values that are the result of some kind of pattern, or process, such as a random process, or filled from some kind of data source.
Source code examples are n Github
1.1 - The Basic array fill native array prototype method
When it comes to using the modern native array fill method, one can just call it off of an array instance and pass what you want the array to be filled with as the first argument.
2 - Using Function.Apply, and Array.map
2.1 - Fill with chars
3 - Using just a while loop and the Array literal syntax
If you want to push backward compatibility as far back as you can possible go, then you might want to work out some kind of solution that just involves a while loop and just the plain old array bracket syntax. What is also great about this kind of approach is that I avoid the problems associated with using the Array constructor with a method such as map that will skip over undefined key index values of an array. I can just have a starting index value as well as an index value start at the starting index value and loop forward setting each index to a fixed static value, or any value that I want that follows a desired pattern to which I want to fill the array.
3.1 - Simple new filled array method example using a while loop
One way to start out with this is to maybe start with a simple function that will create and return a new array with a given length filled with a given value for each element. So then I just create a function in which I pass a length and value argument and use that length value as a way to find out if a current index value is below the length or not in order to know if looping should stop or not. Another option would be to start the index value off at the given length around and loop backwards which is what I decided to go with for this example. I can then just use the array bracket syntax and the assignment operator to set each value for the array to the desired static value to fill the array with.
3.2 - Fill just an index range of an array made before hand
I can also use while loops as a way to create a function that will just fill a given index range with a given value. That is to have a function that will not create and return a new array filled with a value but to fill a value for a given starting index value to and ending index value for an array that all ready exists with elements.
3.3 - New range array example using a while loop
Here I have a range example that will return a new array that is filed with elements that follow a given starting value and then values that step away from that value by a given delta for each element index.
3.4 - Fill with random numbers while loop example
There is then also having one or more methods that have to do with creating a new array filed with random values. When it comes to making this kind of method I would want to have a length argument, but then some additional arguments that have to do with setting a range for the random numbers as well as a way to customize what will be going on in terms of rounding for the numbers. I could make it so that the default rounding function would be the math round method, but in many situations I might want to do something else with this sort of thing such as using the toFixed number method combined with parseFloat for example.
There are a whole lot of other ideas that come to mind when it comes to this kind of method. For example I might not always want just an array that is filled with random numbers, but an array that is filed with random values from a given array of values. However maybe such things are called for in an additional section in this post later on that has to do with making some kind of user space library that revolves around filling an array. For now I might just want to have one last example in this section that might prove to be a good starting point for such a project though at least.
3.5 - Higher order function example using a while loop and a whole lot more
To wrap this section up I have one last example using a while loop to create a solution for creating a filled array. This time it is a solution that is a decent starting point for some kind of full blown library solution centered around this specific topic. WIth all of these examples thus far it would seem that there are a few common things that come up, and then a whole bunch of things that are a little different. What I mean is that there is always having a length argument for a function that will create and returned a filled array, but then there are a whole lot of other arguments that will change up a little from one method to the next. So then there is the idea of making a function that will take two arguments that are a kind of core set of arguments one of which is a desired length of an array and the other is a filler function of a string value to get such a function in terms of one or more built in options for such a function.
So in other words what I am talking about here would be an example of a higher order function that takes a function as an argument. And the additional arguments used beyond the length and filler function will change depending on the filler function that is used. This way I can have a single function that will always do the same thing, but in very different ways deepening one the filler function given when using it. I have have a number of built in filler functions, and also define my own filler function on the fly when I am in a situation in which I need to do so.
So then I could expand on this example a whole lot more when it comes to adding additional built in functions for creating a filled array. However this all might be a good thing to expand on more in the from of a whole section on its own that centers around the idea of taking this to the nth degree when it comes to making a kind of library for creating filled arrays.
4 - String Split
Do not forget about all the prototype methods in a String that there are to play with such as the String split method. That kind of method can come in handy when it comes to creating a new Array filled with something from a string. Or at least this is the first method that comes to mind when it comes to this sort of thing at least. For example I can cerated a filled array by taking any string value and then calling the split method off of that string value and pass an empty string to the spit method, the result of which would then be an array where each element is a single character from that string.
4.1 - String split method with empty string
So then when using the string split method and empty string can be given. For example I can have a string that is composed of a count of zeros, and then call the string split method off of that string passing an empty string to the split method while doing so. The returned array will then be an array of zeros in the from of strings for each zero. I then might just want to do a bit more when it comes to converting those strings to numbers, but you get the basic idea.
4.2 - String split method with comma
Often I might have a string where there is some kind of separator between values that I want to have as elements in an array. Such as a space of comma, whatever the case may be I just need to make whatever that is the string value that I give to the split method.
4.3 - Split, array map, parseInt, and the array join method
I might just need to do a bit more when it comes to this such as converting strings to numbers. For this there is just running over the array returned by the split method with array map, and do whatever I need to do for each element such as us parse int to convert to a number. There is the the question of how to go about converting the array back to a string also, for this there is the array join method.
5 - Fill with an object
When it comes to filling an array with an object you might run into problems that have to do with references to the same object rather than creating an array of objects. You see if you just pass an object to a method like array fill then you will end up with an array filled up with references to that same single object. In most cases when doing something like that chances are you would want an array of objects with the same starting values, not a bunch of references to the same object.
So to help with this one way or another it would be a good idea to find a way to go about cloning an object. In this example I am using the clone object trick that involves using the JSON parse method to parse a JSON string that was just created with the JSON strigify method. This might not be the best way to go about cloning an object in a situations, and getting into the details as to why and with cloning with objects in general is a matter for a whole other post. However for the sake of tha matter at hand here and now all I need is a way to create an independent new object from an object.
Now that I have a clone method I can then use the clone method in the body of a method that I am using with array map to map new objects with the same starting values for each element in an array. The result is an array of independent objects with the same starting values as the object that I filled with.
6 - The array from method
Yet another tool in the native tool box of sorts that has to do with creating a filed array would be to use the array from method with a method such as array map. The main thing about this array from method is that I can pass it an object that just contains a length property and the result will be an array with all the index values defined with the value undefined, rather than undefined with the value of undefined. In other words the keys will not be empty and as such I can then use a method such as the array map method to loop over and fill the keys which would not work if they where all empty elements.
7 - Polly fill or Pony fill
So then there is the question that if the array fill method is what is being used to fill an array, should a poly fill be used? As of this writing I would say that it might still be a good idea to do so, however as aways it will deepened on how far back you want to go with browser, and or nodejs version support. If you are going to monkey patch then it is a good idea to make sure that yo do so with something that is spec compliant and therefor will work the same way as what would otherwise be the actually native method.
7.1 - If you are going to monkey patch, be sure to do so with something that is Spec Compliant
Here I am monkey patching in the array fill method using a polyfill that I found on the Mozilla page. Like any good poly fill it will only monkey path itself in if a native array fill method is not all ready there to begin with by doing a quick feature test first. In the event that it is not there then it will define the array fill method using the source code worked out for this sort if thing.
Of course there are some that think that a developer should never monkey patch, even for native methods that should be there. I would say that if it is a late spec method that should be there then monkey patching is fine, but I also think I understand the reasons why other developers are coming from this way of thinking that described that we should be pony filling rather than poly filling. For one thing if I am going to monkey patch an array fill method, then I should stick to a solution such as this one for the array fill method. However if I am going to start making my own custom utilities method for a project, then I could go with something like this for a fill method, or I can do whatever else I would want to do when it comes to making such a fill method.
8 - Conclusion
The native array fill prototype method can be used to quickly fill an array with a single value for each element. However there are other options that might be a better for this sort of task depending on the situation. Or maybe the array fill method is just want needs to be used for starters so that it ca then be used with another method like Array.map. However when it just simple comes to just filling an array with a certain static value then the array fill method does the trick just fine.