WEBVTT 1 00:00:01.972 --> 00:00:03.071 In this lecture, 2 00:00:03.071 --> 00:00:06.267 I'm gonna show you a new way of creating IIFEs 3 00:00:06.267 --> 00:00:08.444 using the concepts that we just learned 4 00:00:08.444 --> 00:00:10.111 in the last lecture. 5 00:00:11.087 --> 00:00:12.738 So, in the last lecture, 6 00:00:12.738 --> 00:00:14.503 we saw that variables declared 7 00:00:14.503 --> 00:00:16.134 using let and const 8 00:00:16.134 --> 00:00:17.994 are block-scoped. 9 00:00:17.994 --> 00:00:19.846 And this means that these variables 10 00:00:19.846 --> 00:00:22.154 are defined inside of a block. 11 00:00:22.154 --> 00:00:24.278 And from the outside of that block, 12 00:00:24.278 --> 00:00:26.155 they are not accessible. 13 00:00:26.155 --> 00:00:29.006 Now, what does that sound like to you? 14 00:00:29.006 --> 00:00:31.212 Yeah, that's data privacy 15 00:00:31.212 --> 00:00:33.429 that we've been talking about a lot 16 00:00:33.429 --> 00:00:36.105 during our big project, right? 17 00:00:36.105 --> 00:00:37.834 So up until this point, 18 00:00:37.834 --> 00:00:40.051 we always used immediately-invoked 19 00:00:40.051 --> 00:00:42.338 function expressions for that. 20 00:00:42.338 --> 00:00:44.054 But it looks like in ES6, 21 00:00:44.054 --> 00:00:46.463 we have a new, much simpler way 22 00:00:46.463 --> 00:00:48.635 of achieving data privacy. 23 00:00:48.635 --> 00:00:52.664 Because all we have to do is to use a block. 24 00:00:52.664 --> 00:00:54.367 So let's see how. 25 00:00:54.367 --> 00:00:56.811 Now a block is not restricted 26 00:00:56.811 --> 00:00:59.250 only to if statements or for loops 27 00:00:59.250 --> 00:01:00.933 or while loops. 28 00:01:00.933 --> 00:01:03.589 So we can also just write a block 29 00:01:03.589 --> 00:01:04.812 like this. 30 00:01:04.812 --> 00:01:07.043 All we have to do is to use curly braces 31 00:01:07.043 --> 00:01:09.960 and then create some code inside of these 32 00:01:09.960 --> 00:01:12.799 and we just created a block. 33 00:01:12.799 --> 00:01:14.902 So let's now create a constant in here. 34 00:01:14.902 --> 00:01:16.402 So const a is one. 35 00:01:17.499 --> 00:01:20.332 And then let's also create b, two, 36 00:01:21.434 --> 00:01:23.157 using a let statement here. 37 00:01:23.157 --> 00:01:24.721 So it doesn't make any difference 38 00:01:24.721 --> 00:01:27.374 thus to use both of them here. 39 00:01:27.374 --> 00:01:30.625 And we now were to console logged 40 00:01:30.625 --> 00:01:31.875 these two here, 41 00:01:33.873 --> 00:01:36.456 console.log let's say a plus b, 42 00:01:39.028 --> 00:01:41.512 then what would we get? 43 00:01:41.512 --> 00:01:43.315 Alright, we have an error here. 44 00:01:43.315 --> 00:01:45.607 And that's because these values 45 00:01:45.607 --> 00:01:48.702 are not accessible from outside of the block. 46 00:01:48.702 --> 00:01:50.915 So again, they're block-scoped 47 00:01:50.915 --> 00:01:52.854 and not function-scoped. 48 00:01:52.854 --> 00:01:54.218 So what we have here now 49 00:01:54.218 --> 00:01:56.755 is exactly like an IIFE, right? 50 00:01:56.755 --> 00:02:00.110 Like an immediately-invoked function expression. 51 00:02:00.110 --> 00:02:01.767 So we created some data here 52 00:02:01.767 --> 00:02:04.283 that is not accessible from the outside. 53 00:02:04.283 --> 00:02:07.133 And it's much easier to write it like this, right? 54 00:02:07.133 --> 00:02:11.300 Remember, an IIFE, in ES5 would be written like this. 55 00:02:12.407 --> 00:02:13.240 So ES5, 56 00:02:15.366 --> 00:02:17.533 we had to do all this work 57 00:02:18.760 --> 00:02:20.593 and write it like this 58 00:02:22.470 --> 00:02:24.529 just to create a simple variable 59 00:02:24.529 --> 00:02:27.211 that's not accessible from the outside. 60 00:02:27.211 --> 00:02:30.870 And then we also have to call this function. 61 00:02:30.870 --> 00:02:31.810 Right? 62 00:02:31.810 --> 00:02:34.143 So if we do console log now, 63 00:02:37.369 --> 00:02:40.428 okay, and let's get rid of that, 64 00:02:40.428 --> 00:02:44.811 then of course we have our error here, right? 65 00:02:44.811 --> 00:02:46.811 So that was the old way. 66 00:02:50.351 --> 00:02:51.601 So this is ES6. 67 00:02:53.383 --> 00:02:56.883 Now, let's just try to add var here, okay? 68 00:02:58.179 --> 00:03:00.012 So var c equals three, 69 00:03:01.359 --> 00:03:03.776 and what's gonna happen then? 70 00:03:05.397 --> 00:03:07.685 And of course you know the answer. 71 00:03:07.685 --> 00:03:08.518 Right? 72 00:03:10.737 --> 00:03:13.544 So again, let's get rid of this. 73 00:03:13.544 --> 00:03:16.343 And now, of course, we see three. 74 00:03:16.343 --> 00:03:18.781 And that's because for variable declarations 75 00:03:18.781 --> 00:03:20.237 with a var keyword, 76 00:03:20.237 --> 00:03:22.745 it doesn't matter if they're inside of a block 77 00:03:22.745 --> 00:03:24.751 or if they're not inside of a block, 78 00:03:24.751 --> 00:03:26.462 because they're not block-scoped. 79 00:03:26.462 --> 00:03:29.005 They're function-scoped. 80 00:03:29.005 --> 00:03:31.429 Alright, so this is a very simple change 81 00:03:31.429 --> 00:03:34.432 that you can do if you wanna start writing ES6 code. 82 00:03:34.432 --> 00:03:36.653 So if you have a simple IIFE like this 83 00:03:36.653 --> 00:03:38.157 that you need to write, 84 00:03:38.157 --> 00:03:39.625 you can very simply switch 85 00:03:39.625 --> 00:03:41.368 to doing it like this. 86 00:03:41.368 --> 00:03:44.039 So this is very simple and very straightforward, 87 00:03:44.039 --> 00:03:45.347 once again. 88 00:03:45.347 --> 00:03:47.312 Alright, so let's now move on 89 00:03:47.312 --> 00:03:49.562 to the next feature of ES6.