WEBVTT 1 00:00:00.040 --> 00:00:02.640 Hey everyone, and welcome to another deep dive with us. 2 00:00:02.799 --> 00:00:03.720 It's great to be here. 3 00:00:03.839 --> 00:00:06.040 Today. We're taking a look at a book by Kyle 4 00:00:06.120 --> 00:00:10.960 Simpson called You Don't Know JSES six and Beyond. Yeah, specifically, 5 00:00:10.960 --> 00:00:14.359 we'll be focusing on the syntax and organization chapters to 6 00:00:14.359 --> 00:00:16.839 see how they can help us write cleaner and more 7 00:00:16.879 --> 00:00:18.120 modern JavaScript code. 8 00:00:18.239 --> 00:00:22.559 Absolutely, two chapters packed with insights that can really level 9 00:00:22.600 --> 00:00:23.679 up your JavaScript game. 10 00:00:23.800 --> 00:00:25.879 Okay, So to kick things off, I think it's worth 11 00:00:25.960 --> 00:00:29.760 highlighting the fact that JavaScript evolves so rapidly these days. 12 00:00:29.839 --> 00:00:32.799 Right, oh yeah, definitely gone are the days of waiting 13 00:00:32.880 --> 00:00:34.159 years for a new version. 14 00:00:34.359 --> 00:00:34.560 Right. 15 00:00:35.079 --> 00:00:37.600 ES six was a big shift, and the language is 16 00:00:37.679 --> 00:00:40.799 constantly changing now, so it's really important for us the 17 00:00:40.840 --> 00:00:43.320 developers to stay on top of things, always be learning, 18 00:00:43.399 --> 00:00:45.320 right exactly, embrace the evolution. 19 00:00:45.640 --> 00:00:48.840 Yeah, okay, So let's dive into some of these evolutionary changes, 20 00:00:48.880 --> 00:00:53.479 starting with block scope declarations using let and constant sounds good. Now, 21 00:00:53.520 --> 00:00:56.159 Before EES six we only had var, and I think 22 00:00:56.159 --> 00:00:58.479 we've all run into some of those head scratching moments, right. 23 00:00:58.679 --> 00:01:02.159 Well, for sure, var was function scoped, yeah, which you 24 00:01:02.200 --> 00:01:04.519 know sometimes led to some confusing bugs. 25 00:01:04.799 --> 00:01:06.400 Yeah, definitely especially in. 26 00:01:06.359 --> 00:01:08.920 Larger projects where you might have variables with the same 27 00:01:09.000 --> 00:01:10.480 name in different parts of the code. 28 00:01:10.560 --> 00:01:13.760 Exactly. So how do let and constant address this? 29 00:01:14.799 --> 00:01:19.040 Well, Let in constant introduced block level scoping mm hmmm, 30 00:01:19.159 --> 00:01:22.319 which means they're only accessible within the block of code 31 00:01:22.319 --> 00:01:23.079 where they're defined. 32 00:01:23.159 --> 00:01:26.120 Okay, So it's all about creating these clear boundaries precisely. 33 00:01:26.640 --> 00:01:29.079 Think of it as creating a more contained environment for 34 00:01:29.120 --> 00:01:33.560 your variables, preventing those accidental collisions and unexpected behaviors. 35 00:01:33.799 --> 00:01:37.040 Got it now? I noticed that Kyle Simpson is a 36 00:01:37.040 --> 00:01:40.079 big advocate for declaring let at the top of the scope. 37 00:01:40.239 --> 00:01:40.840 Why is that? 38 00:01:41.159 --> 00:01:43.840 Yeah, he's got a strong point there. Declaring let at 39 00:01:43.840 --> 00:01:46.359 the top makes it very clear what variables are in 40 00:01:46.400 --> 00:01:49.280 play within that scope, and it helps avoid what's called 41 00:01:49.319 --> 00:01:50.680 the temporal dead zone. 42 00:01:50.840 --> 00:01:51.280 What's that? 43 00:01:51.680 --> 00:01:53.680 It's an error you can run into if you try 44 00:01:53.680 --> 00:01:55.480 to use a variable before it's been declared. 45 00:01:56.000 --> 00:01:58.560 Ah. Okay, So it's like setting the ground rules up 46 00:01:58.560 --> 00:01:59.439 front exactly. 47 00:01:59.560 --> 00:02:02.200 It makes you code more predictable and less prone to errors. 48 00:02:02.359 --> 00:02:05.040 Awesome. And what about const When should we use that? 49 00:02:05.319 --> 00:02:09.560 Const is for values that you know won't change throughout 50 00:02:09.560 --> 00:02:13.080 your code, like say the mathematical constant pi, right, or 51 00:02:13.120 --> 00:02:16.199 maybe some configuration settings. Yeah, it makes it super clear 52 00:02:16.240 --> 00:02:18.000 that those values are meant to be constant. 53 00:02:18.360 --> 00:02:20.520 Makes sense. It's like a promise to yourself and your 54 00:02:20.520 --> 00:02:24.280 fellow developers that this value is set in stone exactly. 55 00:02:24.520 --> 00:02:26.199 Yeah. And there's a chance it might even help the 56 00:02:26.280 --> 00:02:29.280 JavaScript engine optimize things behind the scenes. 57 00:02:29.400 --> 00:02:32.919 Dot it so let for variables that might change cost 58 00:02:33.000 --> 00:02:36.280 for rock solid values. Perfect, all right, Moving on to 59 00:02:36.360 --> 00:02:40.360 something a bit more flexible now, the spread rest operator. 60 00:02:40.800 --> 00:02:43.000 Ah, yes, the versatile operation. 61 00:02:43.080 --> 00:02:44.960 It's like a Swiss army knife, right exactly. 62 00:02:45.000 --> 00:02:47.919 It can do double duty, either spreading out the elements 63 00:02:47.919 --> 00:02:51.520 of an iterable like an array, or gathering values into 64 00:02:51.560 --> 00:02:52.039 an array. 65 00:02:52.199 --> 00:02:54.919 It's like a transformer that can adapt to different situations. 66 00:02:54.960 --> 00:02:57.240 I like that analogy. So, for example, imagine you have 67 00:02:57.280 --> 00:02:59.639 an array of numbers and you want to pass them 68 00:02:59.680 --> 00:03:01.919 as individual arguments to a function. 69 00:03:01.840 --> 00:03:04.520 Right, which was a bit of a pain before sixty. 70 00:03:04.479 --> 00:03:06.560 Exactly, you'd have to resort to tricks like using apply. 71 00:03:07.280 --> 00:03:09.639 But with a spread operator, you can just use those 72 00:03:09.680 --> 00:03:12.800 three dots boom, and it unpacks those array elements into 73 00:03:12.879 --> 00:03:14.960 individual arguments, so much cleaner. 74 00:03:15.080 --> 00:03:17.159 What about the rest operator, how does that work. 75 00:03:17.400 --> 00:03:19.400 It's like the flip side of the coin. Instead of 76 00:03:19.439 --> 00:03:22.800 spreading out, it gathers things together. Okay, let's say you 77 00:03:22.840 --> 00:03:25.159 have a function that needs to handle an unknown number 78 00:03:25.199 --> 00:03:28.080 of arguments. The rest operator lets you scoop them all 79 00:03:28.159 --> 00:03:30.120 up into a nice need array. 80 00:03:30.439 --> 00:03:33.439 So no more messing around with that clinky argument's objects. 81 00:03:33.520 --> 00:03:35.319 Nope, the rest operator is much more elegant. 82 00:03:35.479 --> 00:03:39.360 I'm sold now onto something that feels like a breath 83 00:03:39.400 --> 00:03:43.840 of fresh air. Default parameter values, Oh yeah, those are great. 84 00:03:44.319 --> 00:03:47.680 They might seem simple, but they really improve code clarity. 85 00:03:47.800 --> 00:03:50.159 I know, right, I've written so much code over the 86 00:03:50.240 --> 00:03:52.159 years checking for undefined values. 87 00:03:52.400 --> 00:03:55.120 I feel you well. With default parameters, you can set 88 00:03:55.159 --> 00:03:57.759 a default value right in the function definition. 89 00:03:57.960 --> 00:04:00.319 It's like having a backup plan built in exactly. 90 00:04:00.360 --> 00:04:03.000 If the caller doesn't provide a value, the default just 91 00:04:03.039 --> 00:04:03.919 slides right in. 92 00:04:04.319 --> 00:04:06.840 Love it. Now, what happens if someone passes in a 93 00:04:07.000 --> 00:04:09.840 falsey value like zero or an empty string? 94 00:04:10.120 --> 00:04:13.319 That's the beauty of it. Yeah, default parameters handle those 95 00:04:13.360 --> 00:04:16.079 cases gracefully. They only kick in if the argument is 96 00:04:16.120 --> 00:04:16.800 actually missing. 97 00:04:17.000 --> 00:04:18.959 Ah, so it's not just a blind. 98 00:04:18.800 --> 00:04:20.839 Replacement, right, It's smarter than that. 99 00:04:20.920 --> 00:04:23.000 I like it, and we can even use more complex 100 00:04:23.040 --> 00:04:24.519 expressions for default values. 101 00:04:24.639 --> 00:04:27.680 Right, absolutely, any valid expression will do awesome. 102 00:04:28.120 --> 00:04:32.040 Okay, I'm really starting to see how these seemingly small 103 00:04:32.160 --> 00:04:37.720 changes really add up to make JavaScript more robust and expressive. 104 00:04:37.959 --> 00:04:41.000 It's all about giving you more control and flexibility totally. 105 00:04:41.759 --> 00:04:46.319 Now, let's talk about a feature that I find particularly elegant, destructuring. 106 00:04:46.600 --> 00:04:49.959 Destructuring is all about taking complex data structures like arrays 107 00:04:50.000 --> 00:04:52.439 and objects and extracting the values you need in a 108 00:04:52.560 --> 00:04:53.519 very concise way. 109 00:04:53.639 --> 00:04:55.720 It always looks so clean when I see it encode 110 00:04:55.800 --> 00:04:56.120 it is. 111 00:04:56.680 --> 00:04:59.360 Imagine you have an array representing a person's details like 112 00:04:59.399 --> 00:05:03.439 their name, age, and occupation. With destructuring, you can pull 113 00:05:03.439 --> 00:05:07.040 those values out into separate variables in a single line. 114 00:05:06.720 --> 00:05:09.560 So instead of writing multiple lines to access each element, 115 00:05:09.639 --> 00:05:10.839 it's all done in one go. 116 00:05:11.279 --> 00:05:14.959 Exactly. Yeah, and it's even more interesting with object destructuring. Oh. Also, 117 00:05:15.199 --> 00:05:18.240 you can extract properties from an object and assign them 118 00:05:18.279 --> 00:05:22.639 to variables using a similar syntax. Okay, but what's cool 119 00:05:22.680 --> 00:05:25.879 is that the target source pattern is reversed compared to 120 00:05:25.920 --> 00:05:26.839 object literals. 121 00:05:27.240 --> 00:05:29.120 Can you explain that a bit more sure? 122 00:05:29.600 --> 00:05:34.399 In an object literal, you'd write property value, but with 123 00:05:34.519 --> 00:05:39.240 destructuring its value variable. You're essentially specifying which property you 124 00:05:39.240 --> 00:05:40.399 want and where you want to put it. 125 00:05:40.480 --> 00:05:43.560 I see, it's like mirroring the structure of the object exactly. 126 00:05:44.199 --> 00:05:46.839 And just like with default parameters, you can provide default 127 00:05:46.920 --> 00:05:48.959 values in case a property is missing. 128 00:05:49.360 --> 00:05:51.800 So it's a robust way to handle data. 129 00:05:51.600 --> 00:05:55.720 Extraction absolutely, and we can even use destructuring and function parameters. Right. 130 00:05:55.839 --> 00:05:57.879 It's a fantastic way to unpack arguments. 131 00:05:57.920 --> 00:06:00.000 It makes your function definitions much more readable. 132 00:06:00.279 --> 00:06:03.519 Love it all, right, onto some enhancements for our good friend, 133 00:06:04.240 --> 00:06:05.360 the object literal. 134 00:06:05.439 --> 00:06:08.160 Object Literal's got some cool upgrades in ES six, like 135 00:06:08.199 --> 00:06:11.680 what Well. For one, we have concise methods, which provide 136 00:06:11.680 --> 00:06:14.560 a shorter way to define functions within objects. 137 00:06:14.279 --> 00:06:17.439 So less typing, more concise code exactly. 138 00:06:18.079 --> 00:06:20.519 And then there are computed property names. 139 00:06:20.639 --> 00:06:22.360 Ah, yes, I've seen those us. 140 00:06:22.519 --> 00:06:25.279 They allow you to use expressions to determine the names 141 00:06:25.279 --> 00:06:26.439 of properties dynamically. 142 00:06:26.560 --> 00:06:28.800 Okay, that's pretty handy when you don't know the property 143 00:06:28.839 --> 00:06:29.560 name in advance. 144 00:06:29.839 --> 00:06:33.040 It is. It avoids that awkward bracket notation we used to. 145 00:06:33.079 --> 00:06:36.639 Have to use much cleaner. And speaking of cleaner, let's 146 00:06:36.639 --> 00:06:40.199 talk about string interpolation. I love how ES six made 147 00:06:40.279 --> 00:06:42.160 working with strings so much easier. 148 00:06:42.519 --> 00:06:45.040 Template literals are a game changer totally. 149 00:06:45.399 --> 00:06:48.959 Using backticks, we can embed expressions directly into strings. 150 00:06:49.079 --> 00:06:51.519 It's so much easier to read than concatenating strings. 151 00:06:51.600 --> 00:06:55.040 Right, no more plus signs everywhere. But there's a catch, right, 152 00:06:55.279 --> 00:06:57.399 something about them being plain strings. 153 00:06:57.800 --> 00:07:00.720 Yeah, it's important to remember that template literals are immediately 154 00:07:00.759 --> 00:07:04.839 evaluated into plan strings. There's no intermediate template object or 155 00:07:04.879 --> 00:07:05.519 anything like that. 156 00:07:05.600 --> 00:07:08.279 Got it, So it's more like an inline evaluation, kind 157 00:07:08.279 --> 00:07:09.040 of like an ia. 158 00:07:09.240 --> 00:07:10.360 That's a good way to think about it. 159 00:07:10.399 --> 00:07:13.720 And multiline strings are a breeze with template literals too. 160 00:07:13.720 --> 00:07:17.160 Right, absolutely, they preserve white space and line breaks as 161 00:07:17.199 --> 00:07:17.920 you type them. 162 00:07:18.079 --> 00:07:21.120 So much better than the old days of backslashes and 163 00:07:21.199 --> 00:07:22.319 awkward line breaks. 164 00:07:22.480 --> 00:07:24.680 No more string concatenation headaches. 165 00:07:24.800 --> 00:07:28.519 Now onto a feature that sounds even more powerful, tagged 166 00:07:28.720 --> 00:07:29.759 template literals. 167 00:07:30.040 --> 00:07:33.439 Tag template literals takes string interpolation to the next level. 168 00:07:33.480 --> 00:07:34.040 How sound. 169 00:07:34.160 --> 00:07:38.160 You can attach a function a tag to a template literal, 170 00:07:38.360 --> 00:07:41.439 and that tag function gets the string parts and values 171 00:07:41.800 --> 00:07:44.759 as separate arguments. Okay, give you total control over how 172 00:07:44.800 --> 00:07:45.759 the string is put together. 173 00:07:45.879 --> 00:07:48.160 Wow, So you could write a tag function that say, 174 00:07:48.480 --> 00:07:51.360 uppercases all the values or even does something more complex 175 00:07:51.439 --> 00:07:52.480 like internationalization. 176 00:07:52.879 --> 00:07:55.240 Exactly, the possibilities are pretty much endless. 177 00:07:55.560 --> 00:07:58.839 That's awesome. Okay, Now onto a topic that's always a 178 00:07:58.839 --> 00:08:01.600 bit of a hot potato. Erow functions. 179 00:08:01.759 --> 00:08:04.839 Erofunctions are a concise way to write functions, but their 180 00:08:04.959 --> 00:08:08.000 main claim to fame is how they handle. 181 00:08:07.720 --> 00:08:09.920 This right, the dreaded this keyword. 182 00:08:10.079 --> 00:08:11.680 They solve a lot of the headaches we used to 183 00:08:11.759 --> 00:08:12.680 have with this binding. 184 00:08:13.120 --> 00:08:17.240 Yeah, I've spent countless hours trying to wrangle this into submission. 185 00:08:17.399 --> 00:08:21.360 I know the feeling. So with erofunctions, this is lexically bound. 186 00:08:21.720 --> 00:08:24.360 It means that this always refers to the context where 187 00:08:24.399 --> 00:08:27.000 the erowfunction was defined, not where it's called. 188 00:08:27.079 --> 00:08:29.199 Oh I see, so no more var self. 189 00:08:29.399 --> 00:08:32.679 This hacks exactly. Erofunctions make it much more predictable. 190 00:08:32.799 --> 00:08:35.879 Awesome. But I've also heard that they're not always the 191 00:08:35.919 --> 00:08:38.840 silver bullet. What are some of the caveats? 192 00:08:39.360 --> 00:08:41.360 Well, they don't have their own arguments object okay, and 193 00:08:41.399 --> 00:08:43.279 the way super works inside them is a bit. 194 00:08:43.159 --> 00:08:46.320 Different too, So it's important to use them intentionally, mainly 195 00:08:46.440 --> 00:08:48.519 for this binding behavior. 196 00:08:48.759 --> 00:08:51.919 Yeah, they're a powerful tool, but like any tool, it's 197 00:08:51.960 --> 00:08:54.480 good to know when and how to use it totally. 198 00:08:55.159 --> 00:08:57.720 All right, let's move on to a feature that simplifies looping. 199 00:08:58.919 --> 00:09:03.279 The four Ah yes, the four dot of loop is 200 00:09:03.320 --> 00:09:06.879 a much cleaner way to iterate over iterable. 201 00:09:06.399 --> 00:09:09.200 Objects compared to the old four loop with an index. 202 00:09:09.320 --> 00:09:12.200 Yeah, or even the four dot N loop, which iterates 203 00:09:12.240 --> 00:09:14.159 over object keys not values. 204 00:09:14.480 --> 00:09:16.919 Right right, So it's like taking a scenic route through 205 00:09:16.960 --> 00:09:19.519 an array, stopping at each value along the way. 206 00:09:19.919 --> 00:09:22.440 I like that. It's a much more intuitive way to 207 00:09:22.480 --> 00:09:23.519 work with iterables. 208 00:09:23.559 --> 00:09:26.279 And speaking of iterables, can you remind me what those are? Exactly? 209 00:09:26.519 --> 00:09:31.200 An interable is basically anything you can loop over arrays, strings, generators, 210 00:09:31.559 --> 00:09:32.840 even some custom objects. 211 00:09:32.960 --> 00:09:33.279 Okay. 212 00:09:33.360 --> 00:09:35.000 The key is that they have a special method called 213 00:09:35.000 --> 00:09:38.159 symbol dot iterator that defines how they should be iterated. 214 00:09:38.679 --> 00:09:41.320 So for prew dot love works its magic by tapping 215 00:09:41.399 --> 00:09:42.240 into that method. 216 00:09:42.399 --> 00:09:44.200 Exactly. It's a very elegant solution. 217 00:09:44.480 --> 00:09:45.159 I'm liking it. 218 00:09:45.240 --> 00:09:45.480 Now. 219 00:09:45.559 --> 00:09:48.480 What about those regular expression improvements? 220 00:09:48.519 --> 00:09:53.320 Ah yes. ES six introduced two new flags for regular expressions, 221 00:09:54.000 --> 00:09:56.919 the Unicode flag and the sticky flag. 222 00:09:57.240 --> 00:10:00.200 Okay, Unicode, I get that. Yeah, we need to handle 223 00:10:00.200 --> 00:10:03.519 emojis and other non asty characters these days, precisely. 224 00:10:03.759 --> 00:10:07.000 The Unicode flag ensures that your regular expressions work correctly 225 00:10:07.039 --> 00:10:07.840 with Unicode. 226 00:10:08.080 --> 00:10:10.120 And what about the sticky flag. What does that do? 227 00:10:10.720 --> 00:10:14.840 Sticky flag changes how the regular expression engine searches for matches. Okay, 228 00:10:14.919 --> 00:10:17.279 it makes the engine stick to the current position in 229 00:10:17.320 --> 00:10:20.559 the string, which is really helpful for certain parsing tasks. 230 00:10:20.720 --> 00:10:22.919 Ah, I see, So it's like giving the rejects engine 231 00:10:22.919 --> 00:10:23.840 a bit more context. 232 00:10:23.960 --> 00:10:26.679 Exactly. It's a powerful tool for certain situations. 233 00:10:26.759 --> 00:10:29.720 Awesome. Now onto some new editions that make working with 234 00:10:29.840 --> 00:10:31.759 numbers and strings even more convenient. 235 00:10:32.039 --> 00:10:35.000 EES six brought a bunch of new methods and features 236 00:10:35.039 --> 00:10:38.519 for both number and string Okay, Like what for numbers, 237 00:10:38.519 --> 00:10:43.000 we got new literal formats for binary, aucal and hexadecimal. 238 00:10:42.440 --> 00:10:45.279 Numbers, so we can finally write binary numbers directly in 239 00:10:45.360 --> 00:10:46.679 our code exactly. 240 00:10:47.279 --> 00:10:50.159 And for strings, there's a whole suite of new methods 241 00:10:50.159 --> 00:10:53.960 for handling Unicode characters, normalizing strings, and more. 242 00:10:54.639 --> 00:10:57.679 It's like EES six is making JavaScript a first class 243 00:10:57.720 --> 00:10:59.279 citizen in the world of Unicode. 244 00:10:59.360 --> 00:11:00.240 It definitely is. 245 00:11:00.519 --> 00:11:02.919 I'm all for it. Now, let's talk about something a 246 00:11:02.960 --> 00:11:05.080 bit more mind bending. Symbols. 247 00:11:05.600 --> 00:11:09.639 Symbols are a new primitive type in JavaScript. They're unique 248 00:11:09.919 --> 00:11:12.799 and immutable. Okay, I'm falling so far, which makes them 249 00:11:12.799 --> 00:11:15.879 perfect for creating hidden properties on objects. 250 00:11:16.000 --> 00:11:17.919 Hidden properties. That sounds intriguing. 251 00:11:18.120 --> 00:11:20.519 Imagine you're building a library and you need to store 252 00:11:20.559 --> 00:11:23.399 some internal data on an object, but you don't want 253 00:11:23.399 --> 00:11:25.600 to clash with any properties the user might be using. 254 00:11:25.799 --> 00:11:28.279 I see, symbols allow you to create these properties that 255 00:11:28.320 --> 00:11:30.720 are essentially invisible to the outside world. 256 00:11:30.879 --> 00:11:34.480 So it's like having a secret compartment in your objects exactly. 257 00:11:34.519 --> 00:11:37.840 It's a great way to improve encapsulation and prevent naming collisions. 258 00:11:38.080 --> 00:11:41.200 And because symbols are unique, there's no chance of accidentally 259 00:11:41.279 --> 00:11:42.759 using the same symbol twice. 260 00:11:42.840 --> 00:11:45.559 Precisely, they offer a level of safety and control that 261 00:11:45.559 --> 00:11:46.519 we didn't have before. 262 00:11:46.679 --> 00:11:49.639 That's really neat. Okay, Now let's dive into the world 263 00:11:49.679 --> 00:11:51.320 of iterators and generators. 264 00:11:51.559 --> 00:11:55.360 Iterators and generators are all about controlling the flow of data. Okay. 265 00:11:55.519 --> 00:11:59.240 An iterator is an object that defines a sequence of values, right, 266 00:11:59.559 --> 00:12:02.120 and generator is a special kind of function that can 267 00:12:02.200 --> 00:12:05.360 be paused and resumed producing a sequence of values. 268 00:12:05.440 --> 00:12:07.679 Oh, I think I need an analogy here. This sounds 269 00:12:07.720 --> 00:12:08.799 a bit abstract. 270 00:12:08.919 --> 00:12:11.159 Imagine you're reading a book, and you want to be 271 00:12:11.200 --> 00:12:14.480 able to pause at any point and come back later 272 00:12:14.879 --> 00:12:17.799 without losing your place. Okay, generators are kind of like 273 00:12:17.840 --> 00:12:19.799 bookmarks for your code. 274 00:12:19.879 --> 00:12:22.600 I like that. So using the yield keyword in a 275 00:12:22.759 --> 00:12:25.720 generator is like placing a bookmark exactly, and. 276 00:12:25.679 --> 00:12:28.279 The generator function can pick up right where it left off. 277 00:12:28.399 --> 00:12:31.919 That's really cool. And how are generators related to iterators? 278 00:12:32.240 --> 00:12:37.000 The generator function actually creates an iterator. When you call 279 00:12:37.080 --> 00:12:41.320 a generator function, it doesn't run the code right away. Oh, Instead, 280 00:12:41.360 --> 00:12:44.399 it returns an iterator object, and each time you call 281 00:12:44.519 --> 00:12:48.200 the next method on that iterator, it runs the generator 282 00:12:48.200 --> 00:12:50.039 function until it hits a yield statement. 283 00:12:50.159 --> 00:12:52.919 So it's like stepping through the generator function one bookmark at. 284 00:12:52.799 --> 00:12:53.879 A time, precisely. 285 00:12:54.360 --> 00:12:56.399 I see how this could be really useful for things 286 00:12:56.440 --> 00:12:58.000 like asynchronous operations. 287 00:12:58.240 --> 00:13:01.919 You're right, generators provide a very elegant way to handle 288 00:13:02.000 --> 00:13:05.080 a secretous code, especially when combined with promises. 289 00:13:05.159 --> 00:13:08.879 Okay, my mind is officially blown. All right, let's shift 290 00:13:08.919 --> 00:13:11.679 gears and talk about one of the most anticipated features 291 00:13:11.720 --> 00:13:13.320 of ES six. Modules. 292 00:13:13.440 --> 00:13:17.919 Ah. Yes, modules finally a standardized way to organize our code. 293 00:13:18.000 --> 00:13:19.879 It's like JavaScript finally grew up. 294 00:13:19.960 --> 00:13:22.600 I know, right before EES six we had to rely 295 00:13:22.679 --> 00:13:25.919 on all sorts of ad hoc solutions for modularity, right, all. 296 00:13:25.840 --> 00:13:28.480 Those different module loaders and bundlers exactly. 297 00:13:28.639 --> 00:13:30.799 But now we have a built in way to define 298 00:13:30.840 --> 00:13:32.919 modules in important export code. 299 00:13:32.960 --> 00:13:35.039 No more global scope pollution exactly. 300 00:13:35.360 --> 00:13:37.919 Modules make it so much easier to write well structured 301 00:13:37.919 --> 00:13:39.039 and maintainable code. 302 00:13:39.200 --> 00:13:42.440 It's a beautiful thing. Now let's talk about a feature 303 00:13:42.639 --> 00:13:45.639 that might be familiar to developers coming from other languages. 304 00:13:46.519 --> 00:13:47.080 Classes. 305 00:13:47.200 --> 00:13:50.720 Classes in ES six provide a more familiar syntax for 306 00:13:50.759 --> 00:13:52.840 working with objects and inheritance. 307 00:13:53.080 --> 00:13:56.159 So under the hood, it's still prototypes. 308 00:13:55.840 --> 00:14:00.320 That's right. Classes are basically syntactic sugar on top of prototypes, so. 309 00:14:00.279 --> 00:14:03.039 They're not a completely new inheritance model. 310 00:14:03.200 --> 00:14:05.919 Nope. They just offer a cleaner way to express what 311 00:14:05.960 --> 00:14:07.120 we were already doing. 312 00:14:07.440 --> 00:14:10.480 Okay, So it's all about making the code more readable 313 00:14:10.799 --> 00:14:12.799 and easier to understand. 314 00:14:12.559 --> 00:14:15.639 Exactly, especially for those coming from class based languages. 315 00:14:15.759 --> 00:14:19.919 Right, and classes come with all the usual bells and whistles, constructors, methods, 316 00:14:19.960 --> 00:14:21.440 the extends, keyword. 317 00:14:21.200 --> 00:14:22.919 You got it. They just make things a bit smoother. 318 00:14:23.120 --> 00:14:26.639 I'm all for smoother, all right, Onto some new additions 319 00:14:26.639 --> 00:14:30.480 for handling data, maps, sets, and weak references. 320 00:14:31.159 --> 00:14:33.600 Maps and sets provide more efficient ways to work with 321 00:14:33.679 --> 00:14:35.799 key value pairs and unique values. 322 00:14:35.919 --> 00:14:37.200 Okay, can you give me an example. 323 00:14:37.440 --> 00:14:39.360 Imagine you're building a shopping cart. You could use a 324 00:14:39.399 --> 00:14:41.960 map to store the items in the cart, right, where 325 00:14:41.960 --> 00:14:44.120 the key is the product ID and the value is 326 00:14:44.159 --> 00:14:45.399 the quantity I see. 327 00:14:45.480 --> 00:14:47.720 And if you need to keep track of unique visitors 328 00:14:47.720 --> 00:14:50.559 to your website, you could use a set to store 329 00:14:50.600 --> 00:14:51.480 their user IDs. 330 00:14:51.759 --> 00:14:54.480 Ah, makes sense? And what about weak references. 331 00:14:54.600 --> 00:14:56.679 Weak references are a way to hold a reference to 332 00:14:56.720 --> 00:14:59.600 an object without preventing it from being garbage collected. 333 00:15:00.080 --> 00:15:02.120 Interesting, So it's like having a loose grip on an 334 00:15:02.159 --> 00:15:03.200 object exactly. 335 00:15:03.559 --> 00:15:06.360 It's useful for situations where you want to associate data 336 00:15:06.639 --> 00:15:09.080 with an object without affecting its lifespan. 337 00:15:09.360 --> 00:15:11.480 Got it. Okay, so we've covered a lot of ground 338 00:15:11.480 --> 00:15:12.399 here in this first part. 339 00:15:12.480 --> 00:15:12.720 We have. 340 00:15:13.039 --> 00:15:16.679 We've seen how ES six introduced block scope declarations, the 341 00:15:16.720 --> 00:15:20.480 spreadurist operator, default parameter values, and destructuring. 342 00:15:20.639 --> 00:15:24.840 And we've also looked at object literal enhancements, tablet literals, aerofunctions, 343 00:15:25.159 --> 00:15:26.200 and the four dot of loop. 344 00:15:26.440 --> 00:15:29.320 Plus those handy new methods for numbers and strings the 345 00:15:29.320 --> 00:15:32.840 power symbols, and the control offered by iterators and generators. 346 00:15:33.039 --> 00:15:36.440 We've even touched on modules, classes, and the data handling 347 00:15:36.480 --> 00:15:39.200 capabilities of maps, sets and weak references. 348 00:15:39.360 --> 00:15:41.480 It's a lot to take in before we move on 349 00:15:41.559 --> 00:15:44.320 to what lies beyond YES six. I encourage everyone to 350 00:15:44.360 --> 00:15:46.840 think about which of these features you're most excited to 351 00:15:46.840 --> 00:15:48.200 try out in your own projects. 352 00:15:48.399 --> 00:15:51.919 There's so much to explore and experiment with in the 353 00:15:51.919 --> 00:15:55.000 world of modern JavaScript, and stay tuned for Part two, 354 00:15:55.320 --> 00:15:58.279 where we'll venture beyond ES six and into even more 355 00:15:58.279 --> 00:15:59.240 exciting territory. 356 00:15:59.559 --> 00:16:02.120 It's going to be a wild ride, all right. So 357 00:16:02.159 --> 00:16:05.399 we've explored a lot of the core features of ES six. 358 00:16:05.480 --> 00:16:06.879 Yeah, we've covered a good chunk of it. 359 00:16:06.919 --> 00:16:09.399 Now I'm really curious to see what lies beyond ES six. 360 00:16:09.679 --> 00:16:12.000 Buckle up, there's a whole lot more to discover. 361 00:16:12.559 --> 00:16:14.120 Okay, so where do we start. 362 00:16:14.159 --> 00:16:17.080 Well, one of the most anticipated features beyond ES six 363 00:16:17.159 --> 00:16:21.519 is asyncowate. It's all about making asynchronous code look and 364 00:16:21.600 --> 00:16:23.799 feel more like synchronous code. 365 00:16:23.879 --> 00:16:26.039 Oh that sounds like a dream come true. I've spent 366 00:16:26.120 --> 00:16:28.799 countless hours wrestling with callbacks and promises. 367 00:16:28.919 --> 00:16:31.919 I know, right, asyncowight really simplifies things. 368 00:16:32.039 --> 00:16:33.519 Okay, so how does it actually work. 369 00:16:33.639 --> 00:16:37.200 Imagine you're fetching data from an API with promises, you 370 00:16:37.279 --> 00:16:40.279 typically have these chains of than handlers. Yeah, but with 371 00:16:40.320 --> 00:16:42.759 a syncowate you can write code that reads more like 372 00:16:42.799 --> 00:16:44.240 a traditional synchronous flow. 373 00:16:44.399 --> 00:16:46.679 So no more pyramid of doom exactly. 374 00:16:47.000 --> 00:16:49.799 You use the awake keyword to pause execution until a 375 00:16:49.840 --> 00:16:51.200 promise is resolved. 376 00:16:51.000 --> 00:16:53.720 And that makes the code much easier to read and understand. 377 00:16:53.960 --> 00:16:57.320 Absolutely, asynchronous code becomes much less daunting. 378 00:16:57.919 --> 00:17:01.679 I'm sold. Now what about object dot observe. I heard 379 00:17:01.720 --> 00:17:04.400 that was supposed to be a game changer for change detection. Ah. 380 00:17:04.519 --> 00:17:07.599 Yes, Object dot observe was a promising feature. It allowed 381 00:17:07.640 --> 00:17:11.160 you to observe changes to JavaScript objects and get notified 382 00:17:11.160 --> 00:17:14.000 when properties were added, deleted, or modified. 383 00:17:14.680 --> 00:17:17.519 Sounds incredibly useful for things like data binding. 384 00:17:17.880 --> 00:17:20.839 It did. Yeah, Unfortunately it was eventually deprecated due to 385 00:17:20.920 --> 00:17:24.559 performance concerns and some complexities. Oh that's a shame, it is. 386 00:17:24.680 --> 00:17:26.960 But the good news is that proxies can be used 387 00:17:26.960 --> 00:17:30.960 to achieve similar functionality with more control and flexibility. 388 00:17:31.319 --> 00:17:33.480 Right, we talked about proxies earlier. Okay, so they kind 389 00:17:33.480 --> 00:17:34.400 of stepped in to fill. 390 00:17:34.240 --> 00:17:36.519 The gap yep proxies are super powerful. 391 00:17:36.880 --> 00:17:40.000 Now let's talk about some simpler additions that make life easier, 392 00:17:40.279 --> 00:17:41.920 like the exponentiation operator. 393 00:17:42.000 --> 00:17:43.920 Oh yeah, that's a handy one. No more math dot 394 00:17:43.960 --> 00:17:46.599 pal for simple exponentiation. 395 00:17:46.240 --> 00:17:50.119 Much more concise. And what about spread syntax for objects? 396 00:17:50.319 --> 00:17:51.759 I loved using it with a raise. 397 00:17:52.160 --> 00:17:54.960 Well you're in luck. Spread syntax can now be used 398 00:17:54.960 --> 00:17:57.119 to copy properties from one object to another. 399 00:17:57.440 --> 00:18:01.119 Awesome, so we can finally say goodbye to manually copying properties. 400 00:18:01.200 --> 00:18:02.440 It's a huge time saver. 401 00:18:02.960 --> 00:18:05.359