1 00:00:01,880 --> 00:00:09,050 Sprint operator is one of the new features that has been shaped into the language. 2 00:00:09,260 --> 00:00:13,190 So what actually the spread operator is. 3 00:00:13,430 --> 00:00:24,320 The spread operator is a convenient way to copy all or part of an existing array or object into another 4 00:00:24,320 --> 00:00:26,120 array or object. 5 00:00:26,420 --> 00:00:29,840 Well, this definition don't seem to be clear. 6 00:00:29,870 --> 00:00:32,180 Don't worry, we are going to break it down. 7 00:00:32,659 --> 00:00:41,150 The name spread even sees it all and the picture even over here sees it all spreading out something 8 00:00:41,150 --> 00:00:44,090 and is a convenient way to copy. 9 00:00:44,090 --> 00:00:45,560 And we get back into the hive. 10 00:00:45,560 --> 00:00:51,770 We can copy a real object and put it into a different array in a convenient way. 11 00:00:51,800 --> 00:00:57,540 But here is the confusion between spread and rest. 12 00:00:57,560 --> 00:00:58,230 Why? 13 00:00:58,250 --> 00:01:01,580 Because they all use the same syntax. 14 00:01:01,580 --> 00:01:03,860 That is three dot. 15 00:01:04,220 --> 00:01:08,390 So what is the differences between spread and rest? 16 00:01:09,150 --> 00:01:18,480 Spread syntax expands and array into its element, while rest syntax collects multiple elements and 17 00:01:18,480 --> 00:01:22,410 condenses them into a single element. 18 00:01:22,440 --> 00:01:25,260 Remember when we treated rest? 19 00:01:25,560 --> 00:01:30,060 Don't worry, let's get back to visual, see the code and explain all these terms. 20 00:01:30,390 --> 00:01:34,650 So here I have already comment here at spread operator. 21 00:01:35,100 --> 00:01:42,540 But before we get into that, let's have a look at risk parameter, a kind of revision to see the differences 22 00:01:42,540 --> 00:01:44,850 between spread and rest. 23 00:01:45,150 --> 00:01:51,900 So let's say we have a function called multiply, just multiply two numbers. 24 00:01:53,010 --> 00:01:54,240 E and. 25 00:01:55,120 --> 00:01:55,780 Be. 26 00:01:58,000 --> 00:01:59,530 Inside the function. 27 00:01:59,680 --> 00:02:05,860 Let's just console.log, let's say agreements for the meantime and let's see something. 28 00:02:05,860 --> 00:02:06,760 Agreement. 29 00:02:06,970 --> 00:02:10,750 Now let's call the function as multiplied. 30 00:02:11,170 --> 00:02:16,780 And you can see that we have the agreement as that in a form of an array. 31 00:02:17,080 --> 00:02:21,100 But instead of using this agreement, that is why risk comes into play. 32 00:02:21,100 --> 00:02:27,730 For the meantime, if you pass in this one and three, let's see that it has been added into the array 33 00:02:27,730 --> 00:02:29,050 of my argument. 34 00:02:29,170 --> 00:02:33,280 But behind the scene, this is not rare array. 35 00:02:33,310 --> 00:02:35,800 That is why risk comes into play. 36 00:02:36,010 --> 00:02:46,360 So for rest I need to use three dots and any name I can make it as the argument, the arcs or rest. 37 00:02:46,810 --> 00:02:48,400 Let me go by rest. 38 00:02:48,550 --> 00:02:51,490 So if I console.log rest here. 39 00:02:51,880 --> 00:02:56,110 Let's see and see that it has put them inside an array. 40 00:02:56,500 --> 00:03:05,830 That is why this points is that the rec syntax collects multiple elements and condenses them into a 41 00:03:05,830 --> 00:03:08,290 single element as we see here. 42 00:03:08,320 --> 00:03:11,930 Now you know what the rest is all about. 43 00:03:11,950 --> 00:03:13,960 Now back to business. 44 00:03:13,960 --> 00:03:16,120 That is the spirit operator. 45 00:03:16,900 --> 00:03:20,950 For the meantime, let's stick to how can we spread strings? 46 00:03:20,950 --> 00:03:22,210 We can spread strings. 47 00:03:22,210 --> 00:03:26,260 Also, this one, just like some revision here. 48 00:03:26,260 --> 00:03:31,120 So let me remove from here, because now we are dealing with what spread? 49 00:03:31,390 --> 00:03:39,550 So for spread, let's say I want to console that log, let's say this and it goes like this one I can 50 00:03:39,550 --> 00:03:42,280 spread using dot, dot and anything. 51 00:03:42,280 --> 00:03:43,870 I want to spread a string. 52 00:03:43,870 --> 00:03:45,460 Let's say welcome. 53 00:03:46,990 --> 00:03:52,030 Now you can see that it has spread the text individually. 54 00:03:52,120 --> 00:03:54,160 That is what this points is. 55 00:03:54,160 --> 00:04:02,090 It expands an array into its element and rest just condenses the argument into a single area. 56 00:04:02,110 --> 00:04:04,980 So one expand and one condensed. 57 00:04:04,990 --> 00:04:09,880 So I can say that spread is equal to expand. 58 00:04:11,030 --> 00:04:15,200 And race is equal to condense or condense. 59 00:04:15,230 --> 00:04:16,850 That's one scenario here. 60 00:04:17,120 --> 00:04:20,540 The next one is, can we also spread a race? 61 00:04:20,570 --> 00:04:22,280 Yes, of course we can. 62 00:04:22,400 --> 00:04:23,810 So you're going to be spread? 63 00:04:24,600 --> 00:04:25,350 String. 64 00:04:29,010 --> 00:04:29,880 Strings. 65 00:04:30,120 --> 00:04:30,650 Good. 66 00:04:30,660 --> 00:04:33,030 So let's come down here and spread. 67 00:04:34,970 --> 00:04:37,340 Spirit agrees. 68 00:04:37,340 --> 00:04:39,290 So now comment is one. 69 00:04:39,290 --> 00:04:43,900 The same way I can consult that log and array. 70 00:04:43,910 --> 00:04:50,270 And this one, let's say I want to spread the dots and where every story is going to be. 71 00:04:50,270 --> 00:04:52,660 I read like this one I read inside. 72 00:04:52,670 --> 00:04:56,450 I'm going to have dot, dot, dot, and then let's say Node.js. 73 00:04:57,110 --> 00:05:05,390 If I save it, it will see that I have spread the element in the array individually, and now I can 74 00:05:05,390 --> 00:05:08,510 access the first index, second index and third index. 75 00:05:08,510 --> 00:05:14,180 And that that is about how you can also spread a away on its own. 76 00:05:14,750 --> 00:05:19,970 Next is we can also combine to arrays together. 77 00:05:20,000 --> 00:05:23,180 That's the cool thing about this method. 78 00:05:23,180 --> 00:05:31,400 One we can combine to raise together well, and we can achieve this one in two ways or in so many ways. 79 00:05:31,400 --> 00:05:35,960 So for the mean time, let's say combine arrays. 80 00:05:37,510 --> 00:05:38,830 Combined arrays. 81 00:05:38,920 --> 00:05:47,560 So let's say that I have first array counts going to be one, two, three, four, a comma separated 82 00:05:47,560 --> 00:05:50,440 three, two and as that. 83 00:05:50,560 --> 00:06:02,140 And this one going to be my second array const as array two is equal to five, six, seven, eight. 84 00:06:02,230 --> 00:06:04,630 Now, how can I combine? 85 00:06:04,630 --> 00:06:06,700 Let me comment this one out. 86 00:06:07,150 --> 00:06:13,600 So how can I combine these two arrays and we can achieve this one in two ways? 87 00:06:13,780 --> 00:06:18,100 Let's go by school of ways that's using concatenated. 88 00:06:18,340 --> 00:06:19,990 So concatenated. 89 00:06:21,010 --> 00:06:23,950 Combine two or more arrays together. 90 00:06:23,950 --> 00:06:25,860 How are you going to do it? 91 00:06:25,870 --> 00:06:32,170 So let's say this traditional way, traditional, traditional way. 92 00:06:33,130 --> 00:06:34,930 So it goes like this one. 93 00:06:34,930 --> 00:06:42,040 So our side, the new array I'm going to have as new every now is equal to this one. 94 00:06:42,220 --> 00:06:46,750 So I would take the first array dart coin cat. 95 00:06:47,020 --> 00:06:52,030 I'm concatenate to arrays together, then I'll pass in the array too. 96 00:06:52,840 --> 00:06:58,720 So if I check my console for new array, you see that I have them combined together. 97 00:06:58,720 --> 00:07:01,630 One, two, three, four, five, six, seven, eight. 98 00:07:02,140 --> 00:07:03,220 They are together now. 99 00:07:03,400 --> 00:07:05,950 So now let's use the spread operator. 100 00:07:05,950 --> 00:07:08,500 The modern way, the easy way. 101 00:07:08,500 --> 00:07:10,060 So using. 102 00:07:12,180 --> 00:07:17,370 Let me say Martin way and it goes like this one. 103 00:07:17,640 --> 00:07:27,210 So this one is going to be so cost let's say new array to now equal to then my square bracket like that. 104 00:07:27,210 --> 00:07:29,300 Then I would take the first array. 105 00:07:29,310 --> 00:07:30,660 So I'm going to use dot dot. 106 00:07:30,660 --> 00:07:38,160 I'm spreading it dot, dot, dot, I'm spreading that in array one and then comma separated, dot, 107 00:07:38,160 --> 00:07:40,320 dot, dot my array two. 108 00:07:41,190 --> 00:07:47,370 Now this syntax and this one, which looks cleaner, I believe this one is nicer. 109 00:07:47,520 --> 00:07:52,590 Okay, so if I send this one, let me save this. 110 00:07:52,620 --> 00:07:55,020 Let me check my new array to. 111 00:07:56,070 --> 00:07:58,860 And now I have raked eyes before. 112 00:07:58,890 --> 00:08:03,080 So this how we can spread two or more arrays together. 113 00:08:03,090 --> 00:08:12,060 And cool thing about spread is that we can spread any number or any arrays or string as many as we want 114 00:08:12,060 --> 00:08:18,630 on like wrist rest for for rest we can only use once raised inside a function. 115 00:08:18,660 --> 00:08:24,960 We cannot use multiple rates inside a function, but for spread we can use as many as you want. 116 00:08:25,020 --> 00:08:27,480 And this is the second scenario. 117 00:08:27,780 --> 00:08:32,039 The next scenario is how can we copy an array? 118 00:08:32,850 --> 00:08:36,210 Remember, we call something mutation. 119 00:08:36,330 --> 00:08:42,330 Let me prove to you here before maybe I will explain to you why it's necessary to copy an array. 120 00:08:42,750 --> 00:08:44,400 Let's talk about mutation. 121 00:08:44,400 --> 00:08:45,810 This is a real method. 122 00:08:45,810 --> 00:08:46,620 Mutate. 123 00:08:47,190 --> 00:08:51,300 Mutate means that causing change to the original array. 124 00:08:51,480 --> 00:08:55,140 So let's say that I have an array call or original. 125 00:08:56,200 --> 00:09:03,850 Or would you not agree, which is equal to, let's say, some names of students, let's say Ban and 126 00:09:03,850 --> 00:09:09,580 let's say I have here as Jew and let's say Kimmy. 127 00:09:10,420 --> 00:09:11,110 Perfect. 128 00:09:11,110 --> 00:09:13,790 I have this away enough room. 129 00:09:13,840 --> 00:09:14,290 Good. 130 00:09:14,680 --> 00:09:19,240 So for this, you remember, push is a method on an array. 131 00:09:19,300 --> 00:09:25,210 If I use push on this method, it means that I'm causing change to the original array. 132 00:09:25,600 --> 00:09:29,710 So let's come down here and let's say that now let's add. 133 00:09:30,790 --> 00:09:33,610 At new students. 134 00:09:34,540 --> 00:09:35,620 Or new user. 135 00:09:35,950 --> 00:09:36,460 Okay. 136 00:09:36,610 --> 00:09:39,610 So here is going to be my original array. 137 00:09:39,640 --> 00:09:40,690 Dot push. 138 00:09:40,990 --> 00:09:42,370 Then I can push. 139 00:09:42,370 --> 00:09:44,710 Let's say Joe inside that. 140 00:09:45,100 --> 00:09:55,660 Now if I check my original array, it will see that something has changed because now I have cause the 141 00:09:55,660 --> 00:09:58,780 origin array as that you have other one. 142 00:09:58,780 --> 00:10:04,630 So if any way I make access to my original array where it has been mutated mean changed. 143 00:10:04,990 --> 00:10:07,240 That's why you need to avoid this. 144 00:10:07,240 --> 00:10:10,720 Avoid making changes to the original data. 145 00:10:10,990 --> 00:10:12,100 That is why. 146 00:10:12,130 --> 00:10:13,540 I mean array. 147 00:10:13,780 --> 00:10:15,790 Copy away and manipulate it. 148 00:10:15,790 --> 00:10:17,740 The way you want comes into play. 149 00:10:18,160 --> 00:10:21,430 So we can copy this one using slice method. 150 00:10:21,460 --> 00:10:21,750 Okay. 151 00:10:21,760 --> 00:10:25,030 We can copy an array and new slice method using slice method. 152 00:10:25,030 --> 00:10:27,160 For now, let's use the modern way. 153 00:10:27,190 --> 00:10:29,890 Call the main spread operator. 154 00:10:30,040 --> 00:10:34,900 So this is going to be so now is before our the how push. 155 00:10:35,110 --> 00:10:37,150 I'm going to say copy. 156 00:10:38,630 --> 00:10:39,440 The. 157 00:10:41,020 --> 00:10:42,130 Our original. 158 00:10:43,900 --> 00:10:44,650 Ari. 159 00:10:44,890 --> 00:10:45,370 Good. 160 00:10:45,370 --> 00:10:51,040 So here comes I would say this is going to be my new. 161 00:10:51,770 --> 00:10:54,760 Every new era for Bitcoin exists here. 162 00:10:54,770 --> 00:10:56,150 So let me comment this once. 163 00:10:57,530 --> 00:10:58,730 This one's here. 164 00:10:59,980 --> 00:11:00,720 Come down here. 165 00:11:00,730 --> 00:11:01,020 Okay. 166 00:11:01,030 --> 00:11:01,630 New area. 167 00:11:01,660 --> 00:11:03,580 Now is equal to. 168 00:11:03,910 --> 00:11:06,640 Now I'm going to spray the original one. 169 00:11:06,820 --> 00:11:10,570 It's going to be dot, dot, dot, original area. 170 00:11:10,600 --> 00:11:15,160 This concept is really important when you get to, let's say, react. 171 00:11:15,190 --> 00:11:21,880 When I'm dealing with redox meaning for windows, it is that don't mutate the original area or data. 172 00:11:21,880 --> 00:11:28,840 So we need to spread up or make a copy of the original one before we can make use of any method on that. 173 00:11:28,990 --> 00:11:30,580 So now I have this one. 174 00:11:30,640 --> 00:11:36,970 Now if I make this of the new one, now, if I console.log the new array, I'm going to have the one 175 00:11:36,970 --> 00:11:37,900 as before. 176 00:11:37,930 --> 00:11:38,710 Check it out. 177 00:11:38,740 --> 00:11:39,430 You see that? 178 00:11:39,430 --> 00:11:40,480 This is it. 179 00:11:41,930 --> 00:11:42,360 Yeah. 180 00:11:43,060 --> 00:11:44,240 Yeah, you see that? 181 00:11:44,390 --> 00:11:47,810 This one is the original array I have here. 182 00:11:48,140 --> 00:11:49,580 I have copied that. 183 00:11:49,730 --> 00:11:54,140 Now for the new array, I can now make a push to it. 184 00:11:54,140 --> 00:11:56,810 So now let me push something to the new array. 185 00:11:56,810 --> 00:11:59,420 So here I'm going to use a new array instead. 186 00:11:59,450 --> 00:12:01,130 Now have a look. 187 00:12:01,580 --> 00:12:07,130 If I console that, log the original array before and after I push. 188 00:12:07,160 --> 00:12:13,700 So let's see that come down here in log, let's say before. 189 00:12:15,000 --> 00:12:15,690 Pushing. 190 00:12:16,420 --> 00:12:17,370 Pushing new users. 191 00:12:17,370 --> 00:12:29,260 So let me console.log the original array and here is going to be after after I push new user so if I 192 00:12:29,290 --> 00:12:38,200 save it now have a look at differences here where I think where is my yeah let me do something here 193 00:12:38,530 --> 00:12:42,970 where you all have the same where so sorry into console.log the new one. 194 00:12:42,970 --> 00:12:43,540 Sorry. 195 00:12:43,540 --> 00:12:45,550 After that I have the new array. 196 00:12:45,940 --> 00:12:46,480 Good. 197 00:12:47,320 --> 00:12:48,130 Check it out. 198 00:12:48,250 --> 00:12:49,150 You see that? 199 00:12:49,360 --> 00:12:50,650 This original array. 200 00:12:50,690 --> 00:12:52,870 Kimmy, that is before pushing. 201 00:12:52,870 --> 00:13:00,370 I have this three record, and after I copied and push my new data into the new array, I still have 202 00:13:00,370 --> 00:13:04,180 to erase differently without mutating this particular array. 203 00:13:04,210 --> 00:13:09,820 That's why copying array is really important to avoid mutation. 204 00:13:09,970 --> 00:13:12,370 There is one scenario we need spread. 205 00:13:12,370 --> 00:13:13,210 Operator. 206 00:13:13,480 --> 00:13:18,730 So the next scenario is can we also spread objects? 207 00:13:18,910 --> 00:13:22,420 Yes, of course we can spread object together. 208 00:13:22,690 --> 00:13:23,500 Have a look. 209 00:13:23,620 --> 00:13:24,610 Let's say that. 210 00:13:24,610 --> 00:13:25,900 Let me say spread. 211 00:13:26,690 --> 00:13:27,680 Spirit. 212 00:13:29,170 --> 00:13:31,390 Spirit object. 213 00:13:33,250 --> 00:13:36,250 So let's say I have three objects concerned. 214 00:13:36,250 --> 00:13:46,630 Let's say OBJ one is equal to simple object here name going to be as John and let's say the H here is 215 00:13:46,720 --> 00:13:47,560 going to be 30. 216 00:13:47,890 --> 00:13:51,340 So let me copy this one and paste it down here. 217 00:13:51,370 --> 00:13:54,070 Object to the city here. 218 00:13:54,100 --> 00:13:56,860 You're going to be a city called New York. 219 00:13:57,490 --> 00:14:00,100 And then the let's say the city. 220 00:14:00,100 --> 00:14:01,330 Let me say the country. 221 00:14:05,060 --> 00:14:07,310 Of this, let's say USA. 222 00:14:08,830 --> 00:14:14,950 Uh, you ask like that, and we can have, let's say, even additional object. 223 00:14:14,950 --> 00:14:16,600 For the meantime, let's stick to this one. 224 00:14:16,870 --> 00:14:23,800 So now how can we combine this object together and we can achieve this one in two ways by using these 225 00:14:23,800 --> 00:14:27,190 two old ways that is using object to assign. 226 00:14:27,280 --> 00:14:35,020 So let's use the traditional way to, I mean, uh, spread this or combine this object together, traditional 227 00:14:35,020 --> 00:14:37,600 way or school old way. 228 00:14:37,840 --> 00:14:38,890 So here we go. 229 00:14:38,920 --> 00:14:39,550 I'll make this. 230 00:14:39,550 --> 00:14:42,040 Of course, my new object. 231 00:14:42,580 --> 00:14:50,380 Now, it's equal to the object method is a special keyword called object dot assigned like that. 232 00:14:50,380 --> 00:14:58,780 And that assign, first of all, passing an empty object, then common separated with the original or 233 00:14:58,780 --> 00:14:59,320 the arrays. 234 00:14:59,320 --> 00:15:02,290 I want to, I mean combined together. 235 00:15:02,470 --> 00:15:07,030 So here we have created a new and empty object to whatever are passing. 236 00:15:07,030 --> 00:15:09,970 Here we place inside this empty object. 237 00:15:10,240 --> 00:15:14,830 So here I want to combine object one and my object two. 238 00:15:15,250 --> 00:15:20,170 So if I save it, let me check the new object. 239 00:15:21,160 --> 00:15:22,960 Now how we look. 240 00:15:23,080 --> 00:15:25,200 Now we have been combined together. 241 00:15:25,210 --> 00:15:26,230 Name? 242 00:15:27,240 --> 00:15:29,340 Each city and country. 243 00:15:29,340 --> 00:15:31,170 I have combined them together. 244 00:15:31,260 --> 00:15:32,850 This is true all the way. 245 00:15:33,330 --> 00:15:38,790 Now let's come back to the modern way esx with six way using spread. 246 00:15:39,060 --> 00:15:41,910 And it's as simple as maybe thinking. 247 00:15:42,210 --> 00:15:43,980 And it goes like this one. 248 00:15:43,980 --> 00:15:47,340 So const let me say new objects. 249 00:15:48,210 --> 00:15:50,940 New O'Bagy too is equal to this. 250 00:15:51,150 --> 00:15:53,160 My parenthesis. 251 00:15:53,190 --> 00:15:54,870 Then I'll start using the spirit. 252 00:15:54,900 --> 00:16:01,590 Dot, dot, dot or bg one comma separated dot or bg two. 253 00:16:01,770 --> 00:16:02,910 And I'm done. 254 00:16:03,270 --> 00:16:06,930 So this syntax and this, this one and this. 255 00:16:06,930 --> 00:16:09,630 Which one is cleaner and easier to write this one. 256 00:16:09,630 --> 00:16:10,300 Right? 257 00:16:10,320 --> 00:16:17,070 So now if I check for new object two, I have it as before. 258 00:16:17,670 --> 00:16:18,480 Great. 259 00:16:18,660 --> 00:16:23,700 So that is what spread operator is all about. 260 00:16:23,790 --> 00:16:26,100 But guys, take note here. 261 00:16:26,760 --> 00:16:34,200 If two objects have the same property, the value of the second object will override the value of the 262 00:16:34,200 --> 00:16:35,100 first object. 263 00:16:35,100 --> 00:16:38,910 So the last object will be the one that will be used. 264 00:16:39,060 --> 00:16:40,020 What does it mean? 265 00:16:40,260 --> 00:16:41,220 So let's have a look. 266 00:16:41,250 --> 00:16:48,330 It says that if you are trying to combine two or more object together and one object, have the same 267 00:16:48,330 --> 00:16:52,260 property, name and value the last one will overwrite. 268 00:16:52,440 --> 00:16:53,520 Let me show you here. 269 00:16:53,580 --> 00:16:55,440 So now we have first objects. 270 00:16:55,530 --> 00:16:56,190 Let me add. 271 00:16:56,190 --> 00:16:59,670 Let's say a second object in the mix. 272 00:16:59,700 --> 00:17:01,080 Let's see a third objects. 273 00:17:01,710 --> 00:17:03,360 Make a second object. 274 00:17:04,290 --> 00:17:07,079 And here as that, nothing new here. 275 00:17:07,740 --> 00:17:08,000 Okay. 276 00:17:08,010 --> 00:17:09,569 Let me mention this one as three. 277 00:17:09,609 --> 00:17:10,020 Okay. 278 00:17:10,020 --> 00:17:12,140 Now we have object one and three. 279 00:17:12,150 --> 00:17:13,980 So for this one, we have name. 280 00:17:14,010 --> 00:17:16,170 They made this one as Emily. 281 00:17:17,950 --> 00:17:21,160 And then the age is 20. 282 00:17:21,579 --> 00:17:25,000 Now I want to also combine them together. 283 00:17:25,000 --> 00:17:28,850 So here I want to replace this one also with dot, dot, dot. 284 00:17:28,870 --> 00:17:30,250 The object three. 285 00:17:31,000 --> 00:17:34,690 Now let's see some where we're going to happen here. 286 00:17:35,140 --> 00:17:40,290 So we are expert in these three objects being combined together. 287 00:17:40,300 --> 00:17:45,190 But if I save it and let me check the new object to. 288 00:17:46,740 --> 00:17:47,400 Have a look. 289 00:17:48,870 --> 00:17:55,200 If we see that we have the name Emily, we have two arrays now. 290 00:17:55,200 --> 00:17:56,430 So two objects. 291 00:17:56,790 --> 00:18:01,100 One is the person age, which is 20. 292 00:18:01,110 --> 00:18:02,290 What is this one? 293 00:18:02,310 --> 00:18:04,290 The city which is New York. 294 00:18:04,290 --> 00:18:07,230 And then the country U.S.A. and name. 295 00:18:07,680 --> 00:18:10,290 Meaning that this object has been ignored. 296 00:18:11,390 --> 00:18:18,320 The reason being that if you have two objects with the same property names, the last one wins.