1 00:00:02,240 --> 00:00:04,360 What if you want to create an array? 2 00:00:04,370 --> 00:00:05,180 Simple right, 3 00:00:05,180 --> 00:00:06,660 you use the square brackets. 4 00:00:06,680 --> 00:00:10,200 Well, did you know that there are a couple of different ways of creating an array? 5 00:00:10,220 --> 00:00:17,630 Now these are not all totally different methods as you see but actually, how these methods create arrays 6 00:00:18,020 --> 00:00:22,860 also sometimes depends on the kind of data you pass to that method. 7 00:00:22,910 --> 00:00:27,910 So let's have a look at the different ways of creating arrays before we then work with them 8 00:00:27,920 --> 00:00:29,950 and for that of course, we'll not just have a look at that, 9 00:00:30,050 --> 00:00:35,870 we'll also see how that behaves and when you might want to use which. For that again attached, you find 10 00:00:35,870 --> 00:00:41,370 a simple starting project, an empty HTML file which only imports a script which then also is empty 11 00:00:41,370 --> 00:00:47,690 and in there of course, we can create an array of numbers, for example with the square bracket notation 12 00:00:47,840 --> 00:00:51,870 and I will say right away this is the most common way of creating an array, 13 00:00:51,890 --> 00:00:53,120 it's the recommended way, 14 00:00:53,120 --> 00:00:55,040 nothing wrong with that at all, 15 00:00:55,040 --> 00:01:00,680 so definitely use that to create an array only in very rare cases you want to create an array in 16 00:01:00,680 --> 00:01:02,080 a different way. 17 00:01:02,090 --> 00:01:06,920 Now here also of course as you saw throughout the course, you separate values by a comma, 18 00:01:06,920 --> 00:01:09,080 you can also have a trailing comma at the end, 19 00:01:09,080 --> 00:01:10,010 this won't hurt, 20 00:01:10,040 --> 00:01:12,210 you can have that for readability if you want it, 21 00:01:12,290 --> 00:01:14,350 here my auto formatting removed it 22 00:01:14,540 --> 00:01:20,980 and with that of course unsurprisingly if I log my numbers here and then load this page and reload it, 23 00:01:20,990 --> 00:01:22,490 here is what I get in the log. 24 00:01:22,490 --> 00:01:23,660 Now that's not too new, 25 00:01:23,660 --> 00:01:27,740 that's what we knew. By the way, regarding how to read that, 26 00:01:27,770 --> 00:01:28,670 this is the array 27 00:01:28,700 --> 00:01:30,580 and this here is the length of the array. 28 00:01:30,590 --> 00:01:32,420 That's what's displayed there, 29 00:01:32,450 --> 00:01:36,230 you also see it if you expand it, here you also have the length. 30 00:01:36,230 --> 00:01:39,710 Now as I said, this is one way of creating arrays, as you saw on the slide, 31 00:01:39,710 --> 00:01:40,780 there are other methods, 32 00:01:40,790 --> 00:01:49,210 for example let's create more numbers here and another way of creating an array is by using a special 33 00:01:49,210 --> 00:01:49,900 keyword, 34 00:01:49,960 --> 00:01:53,070 the new keyword and then array. 35 00:01:53,080 --> 00:01:55,610 Now this uses a so-called constructor function, 36 00:01:55,630 --> 00:01:58,220 something we'll also build on our own soon, 37 00:01:58,240 --> 00:02:04,020 for now let's just take this for granted and new array builds a new array. 38 00:02:04,030 --> 00:02:10,210 Now if we console log more numbers here like that and please note that I didn't pass anything to this 39 00:02:10,390 --> 00:02:12,070 array constructor thing, 40 00:02:12,070 --> 00:02:17,290 so if we log it like this and we reload this page, we see an empty array was created here 41 00:02:17,440 --> 00:02:24,810 therefore with a length of zero. So new array like this is equal to this. 42 00:02:24,860 --> 00:02:30,950 Now if we change that and we pass in let's say hi and welcome, 43 00:02:30,950 --> 00:02:36,380 so two elements separated by a comma and you can pass in as many parameters in the end because you're 44 00:02:36,380 --> 00:02:38,090 basically calling a function here, 45 00:02:38,180 --> 00:02:44,690 so you can pass in as many parameters as you want, then you will see if you now save this and you reload, 46 00:02:44,690 --> 00:02:49,760 well of course we've got an array with these items here and a length of two therefore. 47 00:02:50,210 --> 00:02:57,740 Now it gets strange if we change that here and we pass in numbers. If we pass in two numbers, everything 48 00:02:57,840 --> 00:02:58,230 is good. 49 00:02:58,250 --> 00:03:05,100 If I pass in one and five and then we reload, we see an array with one and five and a length of two. 50 00:03:05,100 --> 00:03:11,760 Now the strange behavior starts if I pass in just five let's say, doesn't matter which number it is. 51 00:03:12,110 --> 00:03:20,740 If you do that, then we get this. We got an array with length five which actually is empty, 52 00:03:20,750 --> 00:03:22,880 we haven't seen that before. 53 00:03:22,910 --> 00:03:28,660 This is essentially an empty array with a fixed size, with a fixed length. 54 00:03:28,670 --> 00:03:36,050 Now you will rarely need that to be honest but this is a strange way of creating an array, which as I 55 00:03:36,050 --> 00:03:41,990 said you won't need that often but you should be aware of the fact that if you use, for whatever reason, 56 00:03:42,410 --> 00:03:49,370 this new array, way of creating an array, if you pass a single number, this will be interpreted as the 57 00:03:49,370 --> 00:03:56,210 length of that to-be-created array and an empty array of that length will be created instead of an 58 00:03:56,210 --> 00:03:59,540 array with that single number as a single value. 59 00:03:59,570 --> 00:04:02,510 Now that's just some specialty which you should be aware of. 60 00:04:02,540 --> 00:04:08,720 Now as I mentioned, in the vast majority of cases, you will create arrays with the square bracket notation, 61 00:04:08,720 --> 00:04:12,210 that's also better from a performance perspective by the way 62 00:04:12,440 --> 00:04:18,500 but if you ever encounter code where you see something like this, in some code you haven't written or 63 00:04:18,500 --> 00:04:24,680 in code written by you where for some reason, you create an array with the new keyword, then be aware 64 00:04:24,680 --> 00:04:26,940 of this special behavior. 65 00:04:27,120 --> 00:04:30,960 Now another way of creating an array by the way is by omitting the new keyword 66 00:04:30,960 --> 00:04:33,950 and that will behave in exactly the same way as if you add it. 67 00:04:33,960 --> 00:04:39,240 So here we get an empty array, as soon as we add more than one number or any other kind of value, even 68 00:04:39,240 --> 00:04:43,200 if it's then just one element, we get an array with these elements. 69 00:04:43,380 --> 00:04:50,160 So new or not, you can add it or you can omit it, this in the end calling array as a function will give 70 00:04:50,160 --> 00:04:56,990 you an array like that but again typically, you should use the square brackets instead of that. Now another 71 00:04:57,120 --> 00:05:03,470 way of creating an array, yet more numbers is with array.of. 72 00:05:03,480 --> 00:05:07,110 This is a special method on this globally available array object 73 00:05:07,110 --> 00:05:13,430 and there again you can pass in values, pass in two arguments here for example, two numbers 74 00:05:13,560 --> 00:05:20,340 and if we now console log yet more numbers here, you will see that this generates an array with these 75 00:05:20,340 --> 00:05:20,820 numbers. 76 00:05:20,820 --> 00:05:23,700 Now again, you should use square brackets, 77 00:05:23,700 --> 00:05:26,850 this will be slower from a performance perspective than that. 78 00:05:26,850 --> 00:05:29,730 You might wonder why it exists then, same for that, 79 00:05:29,730 --> 00:05:36,780 there are rare niche cases where you might need such functions because you need to dynamically create 80 00:05:36,780 --> 00:05:38,760 an array of a specific length 81 00:05:39,090 --> 00:05:44,970 but in the end, for now I just want you to be aware of these methods because you might encounter them 82 00:05:44,970 --> 00:05:46,190 in other code snippets, 83 00:05:46,290 --> 00:05:50,850 you will not really have any use cases where you would need to create an array with these methods. 84 00:05:50,880 --> 00:05:53,710 So let's just comment this out but be aware of them. 85 00:05:53,880 --> 00:05:56,660 Now more helpful is a different way of creating an array 86 00:05:56,880 --> 00:06:04,140 and that is, now I can use more numbers again because I comment this out, and that is array.from, 87 00:06:04,150 --> 00:06:06,360 array.from is special. 88 00:06:06,420 --> 00:06:09,330 It does not take multiple numbers like this, 89 00:06:09,330 --> 00:06:14,400 if I would try to do that, if I would try to console log this here with multiple arguments passed 90 00:06:14,400 --> 00:06:15,150 in, 91 00:06:15,150 --> 00:06:20,520 you see I get an error because I must not pass in multiple arguments here, 92 00:06:20,520 --> 00:06:26,730 instead this takes an iterable or an array-like object and that's the interesting thing. Array.from 93 00:06:26,730 --> 00:06:33,030 in the end allows you to convert an iterable or an array-like object which isn't an array yet to an 94 00:06:33,030 --> 00:06:38,610 array. Now of course you can pass in an array here but that doesn't make too much sense because that is 95 00:06:38,610 --> 00:06:39,420 an array already, 96 00:06:39,420 --> 00:06:43,580 so if you do that and you reload, it works but you don't gain much. 97 00:06:43,740 --> 00:06:48,870 It's more interesting if you have an array-like object or an iterable which you want to convert to 98 00:06:48,870 --> 00:06:51,800 an array, let's say here a string, hi. 99 00:06:52,140 --> 00:06:59,910 If we pass this into array.from and we reload, you see now we get an array where this is split into separate 100 00:06:59,910 --> 00:07:05,130 characters that make up that array, that can be useful if you have some string which you want to split 101 00:07:05,160 --> 00:07:11,220 into its individual characters, array.from makes it really easy and gives you a real array with which 102 00:07:11,220 --> 00:07:15,380 you can work and you will see later in this module what you can do with a real array, 103 00:07:15,420 --> 00:07:23,680 it's a lot. This method is also useful if you have let's say a couple of elements in the DOM which you 104 00:07:23,680 --> 00:07:28,750 want to select as a node list or as a HTML collection as you learned in the last lecture and then 105 00:07:28,750 --> 00:07:32,780 you want to do something with these nodes which you can only do with a real array. 106 00:07:32,830 --> 00:07:39,850 So here for example, I can have my list items and I can get them with document query selector all li, 107 00:07:39,850 --> 00:07:45,490 this will select me all list items but as you learned, this gives you a so-called node list. If I console 108 00:07:45,490 --> 00:07:53,520 log list items here and I reload, you see I get a node list. This is an array-like object because it has 109 00:07:53,580 --> 00:08:00,530 indexes and a length, it's also an iterable because we can use for/of on that but it's not a real array, 110 00:08:00,630 --> 00:08:06,100 all of these array specific methods you learned throughout it this module will not exist on that node list. 111 00:08:06,240 --> 00:08:10,160 Now if you would want to use one of these methods I'm about to show you later, 112 00:08:10,200 --> 00:08:17,560 well then you just have to take the list items here and pass them to array.from and now we have array 113 00:08:17,560 --> 00:08:18,330 list items 114 00:08:18,340 --> 00:08:23,680 if you want to call it like this and if you do that and you save that, now you'll see if I reload here, 115 00:08:24,080 --> 00:08:26,950 we've got the node list and then here we get the same elements 116 00:08:26,950 --> 00:08:33,550 but now here in our real array and the difference will be that you can now do anything with that real 117 00:08:33,550 --> 00:08:36,570 array that you can do with real arrays, 118 00:08:36,640 --> 00:08:39,670 use all these useful methods you learned about throughout this module. 119 00:08:40,420 --> 00:08:42,480 So that's how you can create arrays, 120 00:08:42,520 --> 00:08:47,770 the short summary is that you typically want to use the square bracket notation and that array.from 121 00:08:47,770 --> 00:08:53,680 can be useful for converting array-like or iterable objects to real arrays.