WEBVTT 00:01.140 --> 00:06.660 In this lecture, I want to talk about next, very helpful and flexible feature of ethics, I'm going 00:06.660 --> 00:13.170 to demonstrate what spread operator is actually it's really nice and great tool and it makes our life 00:13.170 --> 00:16.650 much more easier as JavaScript developers, as usual. 00:16.650 --> 00:19.440 Usually I'm going to compare iOS five code to ethics. 00:20.280 --> 00:23.120 Let's say we have two arrays, right. 00:23.130 --> 00:24.810 Constant number one, 00:27.690 --> 00:39.630 and insert here some numbers and then create second variable concept number two again with some numbers. 00:42.780 --> 00:47.490 Then assume that we need to concatenate those arrays and make a new one for that. 00:47.490 --> 00:53.430 In JavaScript, we have a built in method called Concat, which actually works with arrays and helps 00:53.430 --> 00:57.060 us to make new array with concatenating two or more arrays. 00:57.630 --> 01:02.490 So create another variable, let three. 01:05.520 --> 01:16.620 Which equals two numbers, one dot concat and as an argument place, you number two, let's see what 01:16.620 --> 01:19.530 we have, display number three array in Castle. 01:24.400 --> 01:30.020 So we have a new era which consists of items from number one and number two arrays. 01:31.030 --> 01:31.960 This is a good way. 01:31.960 --> 01:37.420 It works nice, but sometimes it's not really convenient, especially when we want, for example, to 01:37.420 --> 01:43.720 concatenate those arrays and between their items, insert a new one in order to achieve that. 01:43.720 --> 01:46.280 Let's use a little trick, actually. 01:46.300 --> 01:47.380 This is one of the ways. 01:47.380 --> 01:49.330 But you can do it using different ways. 01:49.900 --> 01:57.340 Let's delete those lines, create again new array and assigned to it empty. 01:57.460 --> 01:57.730 Right. 01:59.410 --> 02:04.150 Then at first concatenate these Aptera with numbers one array. 02:04.450 --> 02:14.200 So right now, three equals two numbers, three dot concat and insert your numbers one. 02:14.830 --> 02:17.260 Now let's see in Castle what we have right. 02:17.590 --> 02:19.420 Castle dot log number three. 02:22.870 --> 02:26.790 Reload and we have an array with items of numbers one. 02:26.900 --> 02:33.520 Right, so now is the moment when I want to add new item, which there should be placed between number 02:33.580 --> 02:34.690 one and number two. 02:34.810 --> 02:35.530 Right items. 02:36.250 --> 02:39.490 So use your push method and add new item. 02:39.490 --> 02:42.880 Write numbers three that push. 02:45.080 --> 02:47.960 And as an argument, let's place your time. 02:50.030 --> 02:53.810 Reload and see that new item is added to number three. 02:53.860 --> 03:00.080 Right, OK, now it's time to concatenate it with numbers to array for that. 03:00.080 --> 03:00.460 Right. 03:00.470 --> 03:02.630 Number three equals two. 03:02.660 --> 03:10.220 Number three, dot concat and then write numbers to 03:13.280 --> 03:13.850 reload. 03:14.800 --> 03:20.380 And we have results that we wanted to get, but in order to achieve that, as you see it, we need to 03:20.380 --> 03:23.740 write couple of lines of code in ethics. 03:23.740 --> 03:27.540 This stuff became much more simpler because of the spread operator. 03:28.690 --> 03:33.430 We can simply create a new variable, let's call it numbers for. 03:35.480 --> 03:42.860 Then open square brackets and now it's time to use spread operator for that, we just need to write 03:42.860 --> 03:52.550 three dots and then name of the error rate actually spread operator takes out items from array, but 03:52.550 --> 03:55.880 because of that, we have passed it into square brackets. 03:56.340 --> 03:58.310 Finally, we will get a new array. 03:59.510 --> 04:02.540 OK, in the same way, let's place your second array. 04:02.540 --> 04:06.440 Right, dot, dot, dot, number two. 04:09.370 --> 04:15.220 Let's run numbers for in council duplicated and change. 04:17.860 --> 04:23.830 So we have here new array, which consists of items from number one and number two arrays. 04:24.400 --> 04:31.180 So using Sprite operator in a very simple way, we have concatenated number one and number two arrays. 04:31.450 --> 04:38.410 And in order to add the new items anywhere we want, I mean, between array items at the beginning or 04:38.410 --> 04:41.080 at the end of the array, we just need simply to. 04:41.080 --> 04:46.210 Right, for example, turn that between arrays. 04:46.210 --> 04:46.630 Right. 04:46.720 --> 04:49.450 20 and then to the end. 04:49.450 --> 04:50.230 Right, 30. 04:52.050 --> 04:59.790 Reload and you see that items are added on the other places, so as you see, it's clear how helpful 04:59.790 --> 05:06.510 and useful spread operator is because to achieve the same result, we just needed to write only one 05:06.510 --> 05:07.170 line of code. 05:08.190 --> 05:08.630 All right. 05:09.180 --> 05:14.850 This was the case of concatenating the arrows, but using spread operator, we can even copy the arrays. 05:15.840 --> 05:20.730 Let's try to do it using S5 and create new array. 05:21.950 --> 05:24.980 Which will consist of names, right? 05:25.070 --> 05:27.170 Jane, then Bob. 05:29.320 --> 05:32.860 Alex, and right here at. 05:34.710 --> 05:42.120 So we want to copy Disarray, and for that, let's create another variable and assign to it names. 05:42.160 --> 05:46.650 All right, let's call it names copy, which equals the names. 05:48.450 --> 05:56.700 Let's log both variables in Castle, right, castle dot log names and then Castle dot log names. 05:57.060 --> 05:57.510 Copy. 06:01.250 --> 06:09.050 So you see that we have to arrays with exact same values, but if we use push method and add new item 06:09.050 --> 06:17.260 to name Sarah, for example, John, that it will be added to both a race. 06:18.020 --> 06:23.510 It doesn't matter if we add item to name Sarah or names copywrite. 06:24.800 --> 06:27.300 In both cases, we will have the same results. 06:28.160 --> 06:34.400 Actually, this stuff is already known for you from JavaScript behind the scenes section where we have 06:34.400 --> 06:36.530 talked about primitives versus objects. 06:37.220 --> 06:40.190 Because of that, arrays are objects, names. 06:40.190 --> 06:44.420 Copy Variable became just a reference of names right in memory space. 06:45.230 --> 06:46.630 But actually we don't need it. 06:46.640 --> 06:50.620 We need to copy the array and create new memory space for it. 06:51.650 --> 06:57.530 So in order to avoid update on both of them in S5, we can do it in the following way. 06:57.980 --> 06:59.930 Let's make here some changes. 07:00.800 --> 07:04.460 We need to concatenate an empty array with names array. 07:08.210 --> 07:14.850 So remote and you see that in this case, after using push method, the new item is added to names are 07:14.990 --> 07:16.460 only and not two names. 07:18.440 --> 07:18.950 All right. 07:19.760 --> 07:25.070 As I see it, like it was in previous case, in order to achieve needed results, we have to use some 07:25.070 --> 07:26.780 tweaks and hacks in S5. 07:27.260 --> 07:30.800 But in Essex, again, we can do it very simply. 07:31.160 --> 07:33.340 We just need to use spread operator. 07:34.550 --> 07:36.550 So right here. 07:36.620 --> 07:41.120 Dot, dot, dot names, as I see it's surrounded by square brackets. 07:41.510 --> 07:50.860 So Spread Operator will iterate over the names array and that will share its items to new array reload 07:51.530 --> 07:52.970 and we have the same output. 07:54.110 --> 07:57.700 Again, you can see how convenient is to use a spread operator. 07:58.100 --> 08:01.390 It makes code more concise and also more understandable. 08:02.570 --> 08:06.260 Before we finish, I want to show you one more use case of spread operator. 08:06.650 --> 08:11.000 And for that I'm going to create a function, let's call it some. 08:12.140 --> 08:18.020 This function will take three parameters X, Y and Z. 08:20.030 --> 08:25.160 And then in cancel that run the sum of these parameters. 08:25.190 --> 08:27.920 Right, X plus Y plus that. 08:30.560 --> 08:33.520 Now, let's assume we want to insert as an argument. 08:33.560 --> 08:37.970 All right, so let's create a new variable numbers. 08:40.200 --> 08:49.830 And insert here 10, 20 and 30, and in order to use this array as an argument in year five, we have 08:49.830 --> 08:57.010 to use apply method as remember this method calls function, but as an argument it takes away. 08:57.600 --> 09:00.980 This is the only difference between call and apply methods. 09:01.380 --> 09:01.800 So. 09:01.800 --> 09:02.190 Right. 09:02.190 --> 09:05.910 Some don't apply because of that. 09:05.910 --> 09:08.780 We are not interested in about this variable. 09:08.790 --> 09:16.830 Let's just place here now as the first argument and then as a second one, insert numbers. 09:19.330 --> 09:26.590 Reload and we have 60 the some of the numbers, again, using spread operator, we can achieve this 09:26.590 --> 09:28.660 result in very simple way. 09:28.990 --> 09:30.850 We don't need to use apply method. 09:31.540 --> 09:35.550 We have to write just dot, dot, dot numbers. 09:36.370 --> 09:41.650 In this case, we don't need to use square brackets here because we just need to take out numbers from 09:41.650 --> 09:44.260 array and not to create new array. 09:45.070 --> 09:46.110 So reload. 09:46.120 --> 09:47.780 And we have 60 again. 09:48.550 --> 09:49.050 All right. 09:49.390 --> 09:52.000 So this is the way House Press operator works. 09:52.420 --> 09:56.250 You agree that it's very helpful and powerful feature of ethics. 09:57.200 --> 09:58.780 OK, let's go ahead.