Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,380 --> 00:00:03,920 Our next topic is something called, 2 2 00:00:03,920 --> 00:00:07,240 Immediately Invoked Function Expressions. 3 3 00:00:07,240 --> 00:00:09,703 So let's take a look at what they are. 4 4 00:00:11,290 --> 00:00:13,460 So sometimes in JavaScript, 5 5 00:00:13,460 --> 00:00:16,960 we need a function that is only executed once. 6 6 00:00:16,960 --> 00:00:18,850 And then never again. 7 7 00:00:18,850 --> 00:00:20,430 So basically a function 8 8 00:00:20,430 --> 00:00:24,040 that disappears right after it's called once. 9 9 00:00:24,040 --> 00:00:25,670 And this might not appear 10 10 00:00:25,670 --> 00:00:27,870 to make much sense right now. 11 11 00:00:27,870 --> 00:00:30,330 But we actually need this technique later. 12 12 00:00:30,330 --> 00:00:33,950 For example, with something called async/await. 13 13 00:00:33,950 --> 00:00:36,220 So how could we do that? 14 14 00:00:36,220 --> 00:00:38,940 Well, we could simply create a function. 15 15 00:00:38,940 --> 00:00:41,003 And then only execute it once. 16 16 00:00:42,130 --> 00:00:46,913 So, run, once, function. 17 17 00:00:51,600 --> 00:00:55,390 This will never run again. 18 18 00:00:55,390 --> 00:00:56,933 And then we can call it here. 19 19 00:00:59,700 --> 00:01:03,050 However, we can actually run this function again. 20 20 00:01:03,050 --> 00:01:05,060 At some other point in the code, 21 21 00:01:05,060 --> 00:01:07,120 if we want it to, right? 22 22 00:01:07,120 --> 00:01:08,540 There's nothing stopping us, 23 23 00:01:08,540 --> 00:01:13,540 from later doing run once again, right? 24 24 00:01:14,040 --> 00:01:16,560 And so this is not what we want to do. 25 25 00:01:16,560 --> 00:01:20,020 We want to actually execute a function immediately. 26 26 00:01:20,020 --> 00:01:22,670 And not even having to save it somewhere. 27 27 00:01:22,670 --> 00:01:25,550 And so this is how we do that. 28 28 00:01:25,550 --> 00:01:29,483 So we simply write the function expression itself. 29 29 00:01:31,700 --> 00:01:35,030 So without assigning it to any variable. 30 30 00:01:35,030 --> 00:01:36,640 Now, if we try to run this, 31 31 00:01:36,640 --> 00:01:38,673 we will get an error for now. 32 32 00:01:40,020 --> 00:01:44,530 So it says function statements require a function name. 33 33 00:01:44,530 --> 00:01:45,490 And that's because 34 34 00:01:45,490 --> 00:01:49,970 of course JavaScript here expects a function statement. 35 35 00:01:49,970 --> 00:01:53,000 Because we simply started this line of code here 36 36 00:01:53,000 --> 00:01:54,940 with the function keyword. 37 37 00:01:54,940 --> 00:01:57,920 However, we can still trick JavaScript 38 38 00:01:57,920 --> 00:02:01,410 into thinking that this is just an expression. 39 39 00:02:01,410 --> 00:02:03,700 And we do that by simply wrapping all 40 40 00:02:03,700 --> 00:02:06,350 of this into parentheses. 41 41 00:02:06,350 --> 00:02:07,970 And so now, 42 42 00:02:07,970 --> 00:02:11,560 we basically transformed the statement that we had before 43 43 00:02:11,560 --> 00:02:12,853 into an expression. 44 44 00:02:13,780 --> 00:02:15,720 And so now if we save this, 45 45 00:02:15,720 --> 00:02:17,350 we get no error. 46 46 00:02:17,350 --> 00:02:20,960 But also this function didn't execute yet, right? 47 47 00:02:20,960 --> 00:02:22,053 We never called it. 48 48 00:02:23,290 --> 00:02:25,720 So we know that this here is the function. 49 49 00:02:25,720 --> 00:02:28,700 And so, we can then immediately call it. 50 50 00:02:28,700 --> 00:02:29,650 And so with this, 51 51 00:02:29,650 --> 00:02:32,210 we will get now this text here locked 52 52 00:02:32,210 --> 00:02:33,823 to the console, to string. 53 53 00:02:34,880 --> 00:02:38,360 And indeed here it is, alright? 54 54 00:02:38,360 --> 00:02:40,210 So again this here, 55 55 00:02:40,210 --> 00:02:43,090 is really just the function value. 56 56 00:02:43,090 --> 00:02:45,570 So it's just a function expression. 57 57 00:02:45,570 --> 00:02:47,997 And then immediately, we call it here. 58 58 00:02:47,997 --> 00:02:50,780 And so this is why this pattern here, 59 59 00:02:50,780 --> 00:02:54,293 is called the Immediately Invoked Function Expression. 60 60 00:02:55,280 --> 00:02:56,600 Or IIFE for short. 61 61 00:02:56,600 --> 00:03:00,540 So Immediately Invoked Function Expression. 62 62 00:03:00,540 --> 00:03:02,990 And the same would of course, 63 63 00:03:02,990 --> 00:03:06,123 also work for an arrow function. 64 64 00:03:07,760 --> 00:03:09,313 So let's just copy this. 65 65 00:03:11,090 --> 00:03:14,470 This will also never run again. 66 66 00:03:14,470 --> 00:03:17,910 So if we try to call it like this, 67 67 00:03:17,910 --> 00:03:19,550 then it would not work. 68 68 00:03:19,550 --> 00:03:21,090 And so, 69 69 00:03:21,090 --> 00:03:22,700 we actually don't get an error. 70 70 00:03:22,700 --> 00:03:24,470 But also nothing happens. 71 71 00:03:24,470 --> 00:03:27,200 So we first need to wrap this into parentheses. 72 72 00:03:27,200 --> 00:03:29,193 And then as we called it. 73 73 00:03:30,610 --> 00:03:31,593 Then here it is. 74 74 00:03:32,650 --> 00:03:34,910 Okay, so two ways of writing 75 75 00:03:34,910 --> 00:03:37,543 an Immediately Invoked Function Expression. 76 76 00:03:38,540 --> 00:03:39,850 But you might be wondering, 77 77 00:03:39,850 --> 00:03:43,490 why was this pattern actually invented? 78 78 00:03:43,490 --> 00:03:48,490 Well, we already know that functions create scopes, right? 79 79 00:03:48,690 --> 00:03:49,950 And what's important here 80 80 00:03:49,950 --> 00:03:52,530 is that one scope does not have access 81 81 00:03:52,530 --> 00:03:56,300 to variables from an inner scope, right? 82 82 00:03:56,300 --> 00:03:59,750 For example, right here in this global scope. 83 83 00:03:59,750 --> 00:04:02,370 We do not have access to any variables that 84 84 00:04:02,370 --> 00:04:04,170 are defined in the scope 85 85 00:04:04,170 --> 00:04:06,823 of any of these functions here, right? 86 86 00:04:07,870 --> 00:04:09,123 So for example, 87 87 00:04:10,360 --> 00:04:12,763 let's add a variable here. 88 88 00:04:14,220 --> 00:04:16,813 Let's say, is private = 23. 89 89 00:04:18,040 --> 00:04:21,623 And then as we tried to access it out here. 90 90 00:04:22,950 --> 00:04:26,970 You already know that it's not going to work, right? 91 91 00:04:26,970 --> 00:04:28,570 And that's because the scope chain 92 92 00:04:28,570 --> 00:04:31,410 only works the other way around. 93 93 00:04:31,410 --> 00:04:33,410 So the inner scope would have access 94 94 00:04:33,410 --> 00:04:35,700 to anything defined outside, 95 95 00:04:35,700 --> 00:04:37,040 here in the global scope. 96 96 00:04:37,040 --> 00:04:38,240 But the other way around, 97 97 00:04:38,240 --> 00:04:40,963 the global scope does not have access to anything, 98 98 00:04:40,963 --> 00:04:43,530 that is inside of a scope. 99 99 00:04:43,530 --> 00:04:44,600 So in this case, 100 100 00:04:44,600 --> 00:04:47,810 of the scope created by this function here. 101 101 00:04:47,810 --> 00:04:50,490 Therefore, we say that all data defined 102 102 00:04:50,490 --> 00:04:53,350 inside a scope is private. 103 103 00:04:53,350 --> 00:04:56,720 We also say that this data is encapsulated. 104 104 00:04:56,720 --> 00:04:59,230 So for example, this is private here 105 105 00:04:59,230 --> 00:05:03,330 is encapsulated inside of this function scope, 106 106 00:05:03,330 --> 00:05:04,960 that's created here. 107 107 00:05:04,960 --> 00:05:08,120 And data encapsulation and data privacy 108 108 00:05:08,120 --> 00:05:12,000 are extremely important concepts in programming. 109 109 00:05:12,000 --> 00:05:16,040 So many times we actually need to protect our variables, 110 110 00:05:16,040 --> 00:05:19,450 from being accidentally overwritten by some other parts 111 111 00:05:19,450 --> 00:05:20,660 of the program. 112 112 00:05:20,660 --> 00:05:24,070 Or even with external scripts or libraries. 113 113 00:05:24,070 --> 00:05:25,980 And I'm going to talk in detail about 114 114 00:05:25,980 --> 00:05:29,670 these concepts in the object oriented programming section. 115 115 00:05:29,670 --> 00:05:32,360 But for now, keep in mind that it's important 116 116 00:05:32,360 --> 00:05:33,550 to hide variables. 117 117 00:05:33,550 --> 00:05:36,870 And that scopes are a good tool for doing this. 118 118 00:05:36,870 --> 00:05:38,700 And this is also the reason why 119 119 00:05:38,700 --> 00:05:43,030 The Immediately Invoked Function Expressions were invented. 120 120 00:05:43,030 --> 00:05:45,120 So basically, this pattern here. 121 121 00:05:45,120 --> 00:05:48,670 So this is not really a feature, of the JavaScript language. 122 122 00:05:48,670 --> 00:05:52,350 It's more of a pattern, that some developers came up with. 123 123 00:05:52,350 --> 00:05:54,570 And that then started to being used, 124 124 00:05:54,570 --> 00:05:56,133 by many other developers. 125 125 00:05:57,090 --> 00:06:01,193 Now, do you remember what also creates a scope in ES6? 126 126 00:06:02,090 --> 00:06:03,170 And that's right. 127 127 00:06:03,170 --> 00:06:06,310 Variables declared with let or const create 128 128 00:06:06,310 --> 00:06:08,830 their own scope inside a block. 129 129 00:06:08,830 --> 00:06:09,670 And we learned that 130 130 00:06:09,670 --> 00:06:13,060 in the behind the scenes section, remember? 131 131 00:06:13,060 --> 00:06:16,100 So when we create a block, like this, 132 132 00:06:16,100 --> 00:06:18,963 and declare is private in there. 133 133 00:06:22,730 --> 00:06:26,303 Then the outside can still not access is private. 134 134 00:06:28,210 --> 00:06:30,150 So let's comment out this one, 135 135 00:06:30,150 --> 00:06:31,253 and paste it here. 136 136 00:06:32,180 --> 00:06:33,480 And once again, 137 137 00:06:33,480 --> 00:06:36,000 we cannot access this variable. 138 138 00:06:36,000 --> 00:06:37,363 while on the other hand, 139 139 00:06:39,200 --> 00:06:40,670 this one here, 140 140 00:06:40,670 --> 00:06:43,363 would of course, be accessible. 141 141 00:06:46,350 --> 00:06:48,423 And so again that's what we learned, 142 142 00:06:49,740 --> 00:06:52,140 in one of the previous sections. 143 143 00:06:52,140 --> 00:06:55,900 So that's because this one here was declared with var, 144 144 00:06:55,900 --> 00:06:58,770 and therefore it does completely ignore 145 145 00:06:58,770 --> 00:07:00,930 this block here essentially. 146 146 00:07:00,930 --> 00:07:03,140 And this is the reason why now 147 147 00:07:03,140 --> 00:07:05,220 in modern JavaScript. 148 148 00:07:05,220 --> 00:07:08,160 Immediately Invoked Function Expressions are not 149 149 00:07:08,160 --> 00:07:09,520 that used anymore. 150 150 00:07:09,520 --> 00:07:10,970 Because if all we want 151 151 00:07:10,970 --> 00:07:13,890 is to create a new scope for data privacy. 152 152 00:07:13,890 --> 00:07:15,110 All we need to do, 153 153 00:07:15,110 --> 00:07:18,430 is to just create a block like this, right? 154 154 00:07:18,430 --> 00:07:20,780 There's no need to creating a function 155 155 00:07:20,780 --> 00:07:22,500 to create a new scope. 156 156 00:07:22,500 --> 00:07:23,350 Unless of course, 157 157 00:07:23,350 --> 00:07:26,490 we want to use var for our variables. 158 158 00:07:26,490 --> 00:07:28,400 But we already know, 159 159 00:07:28,400 --> 00:07:31,430 we probably shouldn't do that. Right? 160 160 00:07:31,430 --> 00:07:32,840 Now on the other hand, 161 161 00:07:32,840 --> 00:07:34,300 if what you really need, 162 162 00:07:34,300 --> 00:07:38,290 is to execute a function just once, then the IIFE. 163 163 00:07:38,290 --> 00:07:41,560 So the Immediately Invoked Function Expression pattern 164 164 00:07:41,560 --> 00:07:43,260 is still the way to go. 165 165 00:07:43,260 --> 00:07:45,860 Even now with modern JavaScript. 166 166 00:07:45,860 --> 00:07:48,584 And we will actually see a great use case a bit later 167 167 00:07:48,584 --> 00:07:50,253 of doing an IIFE. 13648