Optimal Array Creator


00:00 In this tutorial,

00:01 we will take a look at the simple yet efficient solution for creating N numbers

00:04 within JavaScript from zero to N minus one,

00:07 which is perhaps not as simple as you might think. So let's take a look.

00:11 Here's the problem statement as the comment.

00:13 So we have a reference and if the only area method that you know of is push,

00:17 then here is an naive implementation where we move from zero to N and simply

00:21 push this index into an output array.

00:24 And I think it's pretty obvious to see that this is going to be a correct

00:27 implementation,

00:28 but what you might not realize is that it's also going to be pretty fast.

00:32 This is because JavaScript array methods that do not have to update any existing

00:36 indices, for example push,

00:38 does not have to update the indices of the items already there run in or of one.

00:42 However, to get this performance,

00:44 it would be pretty painful that people would have to write this function every

00:47 single time or write this fall loop every single time.

00:50 So let's look at a potentially better way that is actually incorrect.

00:54 I've seen lots of people do this and you can see that if we run this code,

00:57 it is actually incorrect. It gives back what is known as an empty array,

01:01 and that is what the array function returns. When it is past a number,

01:05 it actually does create an array of the correct length,

01:08 but it is in a special state called empty,

01:10 and you cannot use the map function on an empty array.

01:13 The callback to the map actually never gets called.

01:16 And there is a very simple fix to this and that is to use the fill method to

01:20 fill this empty array with some valid value, for example, an empty string.

01:24 And once this array is filled,

01:25 you can indeed use the map method and this will create the array that we want.

01:30 But now you are using two method calls to create an array which should perform

01:33 worse, and the empty stringing argument to fill just looks ugly.

01:37 Now fortunately, there is another method on array that is a lot more explicit,

01:41 and that method is from you pass in an object that contains a length,

01:46 and this will actually create a filled with undefined array of length N,

01:50 and you can even pass in the map function as a second argument.

01:53 So there should be only one iteration over N in this particular case,

01:57 and it should potentially perform the best. And yes,

02:00 this is a correct implementation for creating an array of length N,

02:04 but this is also the longest enough search to find a better way.

02:07 And this brings us to the modern syntax, which a lot of cool kids are using,

02:11 which is creating a new array from our empty array using the spread operator.

02:16 Now the spread is smart enough to still iterate over an empty array.

02:19 So instead of an empty array, we get an array of undefined,

02:22 which means that we can map over this safely and this is a correct

02:25 implementation, but it would be useless if it doesn't perform nicely.

02:30 So here's a simple test to compare the different options that we have.

02:33 We are going to create an array of a hundred thousand items.

02:37 We are going to do this using simple iteration as well as using the fill with

02:41 the dummy value and the more explicit from method as well as the fancy hack of

02:45 using a spread.

02:46 So pause and place your bets in the comments and let's start the benchmark.

02:51 And from is supposed to be the golden child with its most explicit nature.

02:55 However, when Phil runs, it immediately blows from

02:58 Out of the water. At the very least, it is twice as fast.

03:02 But what might really surprise you that what the cool kids are doing with the

03:06 spread operator is actually the fastest option.

03:09 There is clearly some optimization that has happened in the browsers to make

03:13 sure that this particular syntax is a great way to create a field array.

03:18 But if you really, really, really, really, really,

03:21 I mean really want the best option, you can go with iteration,

03:25 but that's not such a big difference. So for me personally,

03:28 I'm going to be going with Spread. Thank you for watching Till the End.

03:32 Smash that like and subscribe for more developer tips centric and I will see you

03:36 in the next one.