Original subtitles

1 1

Our next topic is something called, 2

2

Immediately Invoked Function Expressions. 3

3

So let's take a look at what they are. 4

4

So sometimes in JavaScript, 5

5

we need a function that is only executed once. 6

6

And then never again. 7

7

So basically a function 8

8

that disappears right after it's called once. 9

9

And this might not appear 10

10

to make much sense right now. 11

11

But we actually need this technique later. 12

12

For example, with something called async/await. 13

13

So how could we do that? 14

14

Well, we could simply create a function. 15

15

And then only execute it once. 16

16

So, run, once, function. 17

17

This will never run again. 18

18

And then we can call it here. 19

19

However, we can actually run this function again. 20

20

At some other point in the code, 21

21

if we want it to, right? 22

22

There's nothing stopping us, 23

23

from later doing run once again, right? 24

24

And so this is not what we want to do. 25

25

We want to actually execute a function immediately. 26

26

And not even having to save it somewhere. 27

27

And so this is how we do that. 28

28

So we simply write the function expression itself. 29

29

So without assigning it to any variable. 30

30

Now, if we try to run this, 31

31

we will get an error for now. 32

32

So it says function statements require a function name. 33

33

And that's because 34

34

of course JavaScript here expects a function statement. 35

35

Because we simply started this line of code here 36

36

with the function keyword. 37

37

However, we can still trick JavaScript 38

38

into thinking that this is just an expression. 39

39

And we do that by simply wrapping all 40

40

of this into parentheses. 41

41

And so now, 42

42

we basically transformed the statement that we had before 43

43

into an expression. 44

44

And so now if we save this, 45

45

we get no error. 46

46

But also this function didn't execute yet, right? 47

47

We never called it. 48

48

So we know that this here is the function. 49

49

And so, we can then immediately call it. 50

50

And so with this, 51

51

we will get now this text here locked 52

52

to the console, to string. 53

53

And indeed here it is, alright? 54

54

So again this here, 55

55

is really just the function value. 56

56

So it's just a function expression. 57

57

And then immediately, we call it here. 58

58

And so this is why this pattern here, 59

59

is called the Immediately Invoked Function Expression. 60

60

Or IIFE for short. 61

61

So Immediately Invoked Function Expression. 62

62

And the same would of course, 63

63

also work for an arrow function. 64

64

So let's just copy this. 65

65

This will also never run again. 66

66

So if we try to call it like this, 67

67

then it would not work. 68

68

And so, 69

69

we actually don't get an error. 70

70

But also nothing happens. 71

71

So we first need to wrap this into parentheses. 72

72

And then as we called it. 73

73

Then here it is. 74

74

Okay, so two ways of writing 75

75

an Immediately Invoked Function Expression. 76

76

But you might be wondering, 77

77

why was this pattern actually invented? 78

78

Well, we already know that functions create scopes, right? 79

79

And what's important here 80

80

is that one scope does not have access 81

81

to variables from an inner scope, right? 82

82

For example, right here in this global scope. 83

83

We do not have access to any variables that 84

84

are defined in the scope 85

85

of any of these functions here, right? 86

86

So for example, 87

87

let's add a variable here. 88

88

Let's say, is private = 23. 89

89

And then as we tried to access it out here. 90

90

You already know that it's not going to work, right? 91

91

And that's because the scope chain 92

92

only works the other way around. 93

93

So the inner scope would have access 94

94

to anything defined outside, 95

95

here in the global scope. 96

96

But the other way around, 97

97

the global scope does not have access to anything, 98

98

that is inside of a scope. 99

99

So in this case, 100

100

of the scope created by this function here. 101

101

Therefore, we say that all data defined 102

102

inside a scope is private. 103

103

We also say that this data is encapsulated. 104

104

So for example, this is private here 105

105

is encapsulated inside of this function scope, 106

106

that's created here. 107

107

And data encapsulation and data privacy 108

108

are extremely important concepts in programming. 109

109

So many times we actually need to protect our variables, 110

110

from being accidentally overwritten by some other parts 111

111

of the program. 112

112

Or even with external scripts or libraries. 113

113

And I'm going to talk in detail about 114

114

these concepts in the object oriented programming section. 115

115

But for now, keep in mind that it's important 116

116

to hide variables. 117

117

And that scopes are a good tool for doing this. 118

118

And this is also the reason why 119

119

The Immediately Invoked Function Expressions were invented. 120

120

So basically, this pattern here. 121

121

So this is not really a feature, of the JavaScript language. 122

122

It's more of a pattern, that some developers came up with. 123

123

And that then started to being used, 124

124

by many other developers. 125

125

Now, do you remember what also creates a scope in ES6? 126

126

And that's right. 127

127

Variables declared with let or const create 128

128

their own scope inside a block. 129

129

And we learned that 130

130

in the behind the scenes section, remember? 131

131

So when we create a block, like this, 132

132

and declare is private in there. 133

133

Then the outside can still not access is private. 134

134

So let's comment out this one, 135

135

and paste it here. 136

136

And once again, 137

137

we cannot access this variable. 138

138

while on the other hand, 139

139

this one here, 140

140

would of course, be accessible. 141

141

And so again that's what we learned, 142

142

in one of the previous sections. 143

143

So that's because this one here was declared with var, 144

144

and therefore it does completely ignore 145

145

this block here essentially. 146

146

And this is the reason why now 147

147

in modern JavaScript. 148

148

Immediately Invoked Function Expressions are not 149

149

that used anymore. 150

150

Because if all we want 151

151

is to create a new scope for data privacy. 152

152

All we need to do, 153

153

is to just create a block like this, right? 154

154

There's no need to creating a function 155

155

to create a new scope. 156

156

Unless of course, 157

157

we want to use var for our variables. 158

158

But we already know, 159

159

we probably shouldn't do that. Right? 160

160

Now on the other hand, 161

161

if what you really need, 162

162

is to execute a function just once, then the IIFE. 163

163

So the Immediately Invoked Function Expression pattern 164

164

is still the way to go. 165

165

Even now with modern JavaScript. 166

166

And we will actually see a great use case a bit later 167

167

of doing an IIFE.