WEBVTT 00:00:07.200 --> 00:00:09.680 In this video we're going to learn array's. 00:00:09.810 --> 00:00:11.370 So what's an array. 00:00:11.730 --> 00:00:17.730 Imagine we've got a list of variables each of them referring to an item in the shopping list for example 00:00:17.730 --> 00:00:18.690 . 00:00:18.690 --> 00:00:24.980 And rather than creating each variable declaring the variable and then assigning a value to it. 00:00:25.170 --> 00:00:28.170 There is a better way of doing that by using arrays. 00:00:28.440 --> 00:00:35.950 So we can create one array and group all the values of those items inside this array. 00:00:35.970 --> 00:00:38.380 So this creates our first array. 00:00:38.400 --> 00:00:40.320 The syntax is pretty easy. 00:00:40.320 --> 00:00:42.480 We need to use the VAR keyword. 00:00:42.900 --> 00:00:43.500 OK. 00:00:43.860 --> 00:00:45.330 Followed by the name of the array. 00:00:45.330 --> 00:00:47.850 Let's name a Tchoupitoulas. 00:00:49.420 --> 00:00:50.000 OK. 00:00:50.290 --> 00:01:00.720 And then we can assign a value to the array using brackets inside the brackets. 00:01:00.720 --> 00:01:03.720 We will put all the values of our items. 00:01:03.720 --> 00:01:10.800 So let's have our first item with the value Brett and we need to separate all the items using comments 00:01:10.800 --> 00:01:11.280 . 00:01:11.310 --> 00:01:16.620 So the second one is for example eggs and then milk. 00:01:17.400 --> 00:01:24.060 So now we just created an array of three items all of them are strings arrays. 00:01:24.060 --> 00:01:31.410 They can include any type of elements we could have an array of numbers or an array of mixed numbers 00:01:31.470 --> 00:01:34.650 and strings or functions or whatever. 00:01:34.650 --> 00:01:44.340 All right so now let's see what happens when we assign the value of our array to a shameful element 00:01:44.340 --> 00:01:45.050 contents. 00:01:45.060 --> 00:01:48.960 So let's put the value inside our paragraph. 00:01:48.960 --> 00:01:53.310 So we need to use the get elements by id method. 00:01:54.010 --> 00:01:54.700 OK. 00:01:55.080 --> 00:02:02.910 And we need to assign the value insight into a shemale. 00:02:03.030 --> 00:02:07.500 All we need is a name of the array. 00:02:07.680 --> 00:02:13.770 So let's refresh the page and we can see that all the items of the array displayed and separated by 00:02:13.950 --> 00:02:15.750 commas. 00:02:15.750 --> 00:02:16.560 All right. 00:02:16.560 --> 00:02:22.670 Another way of defining an array is by using a constructor as we have seen earlier. 00:02:22.740 --> 00:02:26.030 Arrays are a type of objects. 00:02:26.270 --> 00:02:27.250 OK. 00:02:28.020 --> 00:02:31.270 And there is a constructor to create arrays. 00:02:31.350 --> 00:02:40.440 So basically rather than using the syntax the other syntax is by using the VIKKY word the name of the 00:02:40.440 --> 00:02:49.280 array and then we need to use the word new forward by the constructors name which is array. 00:02:50.100 --> 00:02:58.400 And basically we need parentheses and we need to put the parameters of the function inside the parentheses 00:02:58.410 --> 00:02:58.920 . 00:02:59.010 --> 00:03:04.570 So it's going to be similar to the other definition. 00:03:04.770 --> 00:03:10.460 We just need to put all the all the values there separated by commas. 00:03:12.090 --> 00:03:21.000 OK so let's see what we get when we approach the page. 00:03:21.000 --> 00:03:23.930 We get exactly the same result. 00:03:24.120 --> 00:03:31.980 But anyway it is better to use the first way rather than the first one because we just want to avoid 00:03:32.700 --> 00:03:35.070 using constructor as an object so. 00:03:35.440 --> 00:03:43.240 OK so now let's say we want to access one of the elements one of the items of the array and show it 00:03:43.290 --> 00:03:45.110 in our paragraph. 00:03:45.690 --> 00:03:46.270 OK. 00:03:46.290 --> 00:03:51.780 Before we do that let's say rather than changing the content of the paragraph legist odd our results 00:03:51.840 --> 00:03:52.750 to the paragraph. 00:03:52.770 --> 00:03:58.140 So we're just going to add a line break. 00:04:00.360 --> 00:04:02.600 OK. 00:04:02.830 --> 00:04:07.730 And then the results will display OK. 00:04:07.800 --> 00:04:15.080 So you've got the original paragraph followed by whatever results you want to display on the page. 00:04:15.330 --> 00:04:20.940 OK so now we want to display only one item in the array. 00:04:20.940 --> 00:04:22.970 So let's say one display this item. 00:04:23.020 --> 00:04:29.670 So we need to use something we call an index so an index is a number that shows the order of each item 00:04:29.730 --> 00:04:30.710 inside the array. 00:04:30.900 --> 00:04:33.620 So every single item is called a single index. 00:04:33.660 --> 00:04:39.190 So the first item items index is 0 then the second one is 1 and so on. 00:04:39.240 --> 00:04:41.060 So all the time we start with zero. 00:04:41.100 --> 00:04:43.310 So let's see if we want to display bread. 00:04:43.320 --> 00:04:44.470 So. 00:04:44.910 --> 00:04:56.220 So we're going to need to use the same syntax and we need to access the item using the name of the array 00:04:56.940 --> 00:05:01.860 followed by brackets and then inside the brackets we put the index of the item. 00:05:01.880 --> 00:05:03.440 So in our case it's zero. 00:05:03.770 --> 00:05:04.160 OK. 00:05:04.380 --> 00:05:06.390 So let's see what happens. 00:05:06.380 --> 00:05:11.490 Basically we have read that OK if we access another item. 00:05:11.490 --> 00:05:14.700 So let's say we want to access the last item. 00:05:14.690 --> 00:05:19.140 So 0 1 to the last item items index is 2. 00:05:19.310 --> 00:05:26.440 So we just need to use index 2 so we save and then we are free to page. 00:05:26.450 --> 00:05:27.900 And now we can see that. 00:05:28.250 --> 00:05:28.990 OK. 00:05:29.120 --> 00:05:36.930 So just to avoid using this long code all the time we're just going to define a function so to call 00:05:36.950 --> 00:05:47.090 it show results and basically we're just going to need to give it a barometer and all the function is 00:05:47.100 --> 00:05:52.120 going to do is to are a barometer to our paragraph. 00:05:52.190 --> 00:05:57.460 So she's going to use exactly the same code. 00:05:58.500 --> 00:05:59.790 Okay. 00:06:00.190 --> 00:06:06.710 And just X on that line break and then x. 00:06:06.870 --> 00:06:09.340 OK. 00:06:09.360 --> 00:06:11.450 All right so it is change all of these. 00:06:11.450 --> 00:06:15.920 So the first one is going to be show results of shopping lists 00:06:19.800 --> 00:06:21.540 and then the second one is going to be 00:06:25.180 --> 00:06:28.350 show results of shopping lists 00:06:30.930 --> 00:06:32.250 index 0 00:06:36.840 --> 00:06:42.870 and then followed by showing index show results of shopping lists index too. 00:06:43.310 --> 00:06:49.880 Ok then can we get rid of all this makes our code more readable and easier to understand. 00:06:50.220 --> 00:07:01.820 All right so now if we want to change one item value in the array. 00:07:01.860 --> 00:07:07.350 So first of all we need to access the item using the index of the item and then assign a new value to 00:07:07.350 --> 00:07:07.750 it. 00:07:07.880 --> 00:07:11.040 So it trying to change the second item. 00:07:11.030 --> 00:07:16.270 So we need to access the item first using the index. 00:07:16.280 --> 00:07:19.550 Let's change it to yogurt for instance. 00:07:20.090 --> 00:07:29.240 Now let's show the array in our paragraph. 00:07:30.190 --> 00:07:32.170 So shopping lists 00:07:36.380 --> 00:07:40.380 and then we can see that x has been replaced by yogurt. 00:07:40.400 --> 00:07:43.280 All right. 00:07:43.530 --> 00:07:47.690 So we can try that again we can try and change the 00:07:51.240 --> 00:07:54.860 item index 2 to orange for example 00:08:02.750 --> 00:08:05.550 and show the array again 00:08:11.610 --> 00:08:16.080 and we can see that milk has been replaced by orange. 00:08:16.380 --> 00:08:16.980 OK. 00:08:17.250 --> 00:08:20.870 Now let's say we want to delete one of the items. 00:08:21.090 --> 00:08:23.290 So there is a function that we can use. 00:08:23.370 --> 00:08:28.060 It's by using the the key word deletes. 00:08:28.250 --> 00:08:32.770 OK then we just need to specify what item we would like to delete. 00:08:32.770 --> 00:08:34.190 So let's say one of the leads. 00:08:34.190 --> 00:08:37.130 Item 1 for example. 00:08:37.560 --> 00:08:38.300 OK. 00:08:38.340 --> 00:08:39.370 Index 1. 00:08:39.920 --> 00:08:49.400 So let's just play the array and just show what's going to happen. 00:08:49.470 --> 00:08:56.240 So now we can see that we don't see yogurts anymore because this has been deleted but we can see that 00:08:57.000 --> 00:09:02.060 it looks like it's still there with or without any value. 00:09:02.530 --> 00:09:08.090 OK so let's create an alert message 00:09:10.880 --> 00:09:23.710 where we want to see these elements so shopping lists index one and see what we get. 00:09:23.700 --> 00:09:25.260 So it says in defined. 00:09:25.250 --> 00:09:34.220 So basically it doesn't find any item there because it's undefined basically we just deleted the value 00:09:34.230 --> 00:09:35.760 of this item. 00:09:36.330 --> 00:09:41.310 So there is another function that will delete the item completely. 00:09:41.360 --> 00:09:42.410 OK. 00:09:42.720 --> 00:09:45.360 Using the splice method. 00:09:46.110 --> 00:09:46.510 So 00:09:52.600 --> 00:10:03.580 so that's a sign of a new value for this item we're just deleted. 00:10:03.580 --> 00:10:08.450 OK let's let's go back to your words. 00:10:11.250 --> 00:10:13.810 OK. 00:10:15.760 --> 00:10:21.410 Just going to copy this as we keep using the same code all the time. 00:10:21.940 --> 00:10:26.920 So we can see that the array is called all three items and we can see the value of each item. 00:10:26.920 --> 00:10:37.330 Now we were going to use the method splice to delete the second item of the array. 00:10:37.600 --> 00:10:38.070 OK. 00:10:38.500 --> 00:10:46.210 So the way to do that is by using the name of the array followed by the method names which is X place 00:10:47.040 --> 00:10:50.610 and then we need to use two parameters here. 00:10:50.710 --> 00:11:01.150 So the first parameter is referring to the position of the item but we would like to delete in the array 00:11:01.170 --> 00:11:01.480 . 00:11:01.770 --> 00:11:02.290 OK. 00:11:02.470 --> 00:11:11.650 So in our case it's one and the second parameter is telling how many items we would like to delete from 00:11:11.920 --> 00:11:13.080 that item. 00:11:13.090 --> 00:11:18.110 So from Item Number 1 index one how many items do we want to delete. 00:11:18.460 --> 00:11:22.740 So let's say we only want to delete one item. 00:11:22.870 --> 00:11:28.960 So what the code is going to do it's going to start from this item there and deletes only one which 00:11:28.960 --> 00:11:32.720 is itself and then let's see what the results is. 00:11:33.260 --> 00:11:37.980 OK let's save. 00:11:37.980 --> 00:11:38.260 OK. 00:11:38.290 --> 00:11:40.150 Something went wrong. 00:11:40.840 --> 00:11:44.960 Let's have a look at the console. 00:11:45.060 --> 00:11:51.620 What we haven't written any code to add the result there that's why. 00:11:51.850 --> 00:11:52.520 So no. 00:11:52.780 --> 00:12:00.450 OK so now we can see that we don't have the second item anymore. 00:12:00.800 --> 00:12:07.900 And unlike the delete function we can see those we have only two values separated by one comma. 00:12:07.910 --> 00:12:08.830 All right. 00:12:09.330 --> 00:12:09.930 OK. 00:12:10.270 --> 00:12:20.690 Now let's say that we would like to add a couple of items between bread and orange. 00:12:20.740 --> 00:12:21.230 OK. 00:12:21.520 --> 00:12:27.900 So we're going to use the same method splice but this time is going to be a little bit different. 00:12:28.270 --> 00:12:29.140 OK. 00:12:29.130 --> 00:12:40.020 So as we say the first two performances they are used to define the position we're going to start from 00:12:40.380 --> 00:12:42.870 and the number of items we would like to delete. 00:12:43.180 --> 00:12:47.500 OK so in our case we not the least in anything but we still need to start from a certain position so 00:12:47.500 --> 00:12:50.330 we're going to start with the position one. 00:12:50.370 --> 00:12:52.410 OK. 00:12:54.380 --> 00:13:02.150 And then we don't want to delete anything so it's going to be zero elements to delete and then we enter 00:13:02.260 --> 00:13:06.160 odd all the all the elements all the item values we'd like. 00:13:06.160 --> 00:13:13.380 So let's see what an odd two values banana and Apple. 00:13:15.400 --> 00:13:18.000 So what's going to happen now. 00:13:18.430 --> 00:13:19.730 We're going to start from here. 00:13:20.020 --> 00:13:21.170 OK. 00:13:21.190 --> 00:13:29.010 And we're going to add all these elements just before this position. 00:13:29.230 --> 00:13:29.710 OK. 00:13:29.710 --> 00:13:32.090 Just before orange we will add these ones. 00:13:32.440 --> 00:13:36.770 OK so let's see what happens. 00:13:37.600 --> 00:13:40.020 So you can see that we started from Orange. 00:13:40.210 --> 00:13:40.770 OK. 00:13:40.780 --> 00:13:48.280 We didn't delete anything but we added the these item values just before orange. 00:13:48.340 --> 00:13:50.050 OK. 00:13:50.310 --> 00:14:00.200 All right so that's how the splice function is used to delete item items and to add other items. 00:14:00.220 --> 00:14:00.660 OK. 00:14:00.910 --> 00:14:03.670 Now we're going to have a look at another function. 00:14:03.820 --> 00:14:11.990 So let's say we would like to sort the array by alphabetical order. 00:14:12.150 --> 00:14:12.890 So. 00:14:13.150 --> 00:14:15.420 So are you going to use another method. 00:14:15.430 --> 00:14:17.340 Here is the sort method. 00:14:17.920 --> 00:14:19.010 OK. 00:14:19.510 --> 00:14:22.340 So let's see. 00:14:22.380 --> 00:14:28.370 So now we can see that the item values are arranged in in your order using the alphabetical order. 00:14:28.570 --> 00:14:32.600 And we can actually reverse this using the reverse function. 00:14:32.620 --> 00:14:35.580 So it's going to be a shopping list. 00:14:35.700 --> 00:14:40.600 And the method is reverse. 00:14:40.840 --> 00:14:51.220 Now we can see that's the way the order is reversed. 00:14:51.390 --> 00:14:51.860 OK. 00:14:51.900 --> 00:14:56.430 Finally we are going to see how to create an array from a string. 00:14:56.640 --> 00:14:57.820 So this creates a string 00:15:04.090 --> 00:15:08.890 ABC and now we can create an array. 00:15:08.880 --> 00:15:14.930 My array is going to be created using this string. 00:15:14.950 --> 00:15:16.180 So all we're going to do. 00:15:16.180 --> 00:15:24.110 We're going to start from the string so my strength and you're going to use a method called splits. 00:15:25.040 --> 00:15:28.240 OK so so results 00:15:31.540 --> 00:15:32.980 of my array 00:15:32.980 --> 00:15:43.750 . 00:15:43.750 --> 00:15:48.460 So it just returns an array of one item ABC. 00:15:48.490 --> 00:15:57.130 Now if we use double double quotes with nothing between them it's c. 00:15:57.490 --> 00:16:04.680 Now we get an array of four elements each of them is one single character of the string. 00:16:04.990 --> 00:16:10.530 Ok so let's see if we had space in a string. 00:16:10.670 --> 00:16:12.310 Or are you going to get here. 00:16:12.430 --> 00:16:19.390 Is each character including spaces is going to be actually in the items of the string. 00:16:19.870 --> 00:16:22.450 OK. 00:16:22.450 --> 00:16:30.570 Now if we had only one space OK let's say one space there or let's say we had something like. 00:16:30.900 --> 00:16:35.420 What is the weather like. 00:16:35.590 --> 00:16:40.460 And then between the quotes we put a space there. 00:16:40.870 --> 00:16:54.000 So what we're going to get is all the words inside the string that are separated using spaces. 00:16:54.010 --> 00:16:59.090 OK so we end up with each of these words. 00:16:59.240 --> 00:16:59.850 OK. 00:16:59.880 --> 00:17:07.030 So whenever we have a space we are creating a new item inside the new array. 00:17:07.030 --> 00:17:13.380 OK so that's how we can get create an array using a spring. 00:17:13.380 --> 00:17:20.320 Also there is another parameter that we can add to the splitter method is the limits of the number of 00:17:20.320 --> 00:17:21.520 items that we would like to have. 00:17:21.520 --> 00:17:27.910 So let's say we want to have maximum two items inside our array. 00:17:27.900 --> 00:17:32.350 Then we can that barometer and then we end up with only two items. 00:17:33.300 --> 00:17:33.560 OK