Optimal Array Creator

In this tutorial, we will take a look at the simple yet efficient solution for creating N numbers within JavaScript from zero to N minus one, which is perhaps not as simple as you might think. So let's take a look. Here's the problem statement as the comment. So we have a reference and if the only area method that you know of is push, then here is an naive implementation where we move from zero to N and simply push this index into an output array. And I think it's pretty obvious to see that this is going to be a correct implementation, but what you might not realize is that it's also going to be pretty fast. This is because JavaScript array methods that do not have to update any existing

indices, for example push, does not have to update the indices of the items already there run in or of one. However, to get this performance, it would be pretty painful that people would have to write this function every single time or write this fall loop every single time. So let's look at a potentially better way that is actually incorrect. I've seen lots of people do this and you can see that if we run this code, it is actually incorrect. It gives back what is known as an empty array, and that is what the array function returns. When it is past a number, it actually does create an array of the correct length, but it is in a special state called empty,

and you cannot use the map function on an empty array. The callback to the map actually never gets called. And there is a very simple fix to this and that is to use the fill method to fill this empty array with some valid value, for example, an empty string. And once this array is filled, you can indeed use the map method and this will create the array that we want. But now you are using two method calls to create an array which should perform worse, and the empty stringing argument to fill just looks ugly. Now fortunately, there is another method on array that is a lot more explicit, and that method is from you pass in an object that contains a length,

and this will actually create a filled with undefined array of length N, and you can even pass in the map function as a second argument. So there should be only one iteration over N in this particular case, and it should potentially perform the best. And yes, this is a correct implementation for creating an array of length N, but this is also the longest enough search to find a better way. And this brings us to the modern syntax, which a lot of cool kids are using, which is creating a new array from our empty array using the spread operator. Now the spread is smart enough to still iterate over an empty array.

So instead of an empty array, we get an array of undefined, which means that we can map over this safely and this is a correct implementation, but it would be useless if it doesn't perform nicely. So here's a simple test to compare the different options that we have. We are going to create an array of a hundred thousand items. We are going to do this using simple iteration as well as using the fill with the dummy value and the more explicit from method as well as the fancy hack of using a spread. So pause and place your bets in the comments and let's start the benchmark. And from is supposed to be the golden child with its most explicit nature.

However, when Phil runs, it immediately blows from Out of the water. At the very least, it is twice as fast. But what might really surprise you that what the cool kids are doing with the spread operator is actually the fastest option. There is clearly some optimization that has happened in the browsers to make sure that this particular syntax is a great way to create a field array. But if you really, really, really, really, really, I mean really want the best option, you can go with iteration, but that's not such a big difference. So for me personally,

I'm going to be going with Spread. Thank you for watching Till the End. Smash that like and subscribe for more developer tips centric and I will see you in the next one.