Original subtitles

1 1

So now that you know how ES6 modules work, 2

2

I just wanna quickly show you the module pattern 3

3

that we used to use before 4

4

in order to implement modules in JavaScript. 5

5

And I believe that it's important 6

6

that you understand this module pattern 7

7

because you will still see it around, 8

8

and it's also a very good application of many of the stuff 9

9

that we have been learning throughout the course. 10

10

Now, of course, 11

11

just like in regular modules that we just learned about, 12

12

the main goal of the module pattern 13

13

is to encapsulate functionality, 14

14

to have private data, and to expose a public API. 15

15

And the best way of achieving all that 16

16

is by simply using a function, 17

17

because functions give us private data by default 18

18

and allow us to return values, 19

19

which can become our public API. 20

20

So let's see how the module pattern is implemented. 21

21

So we start by writing a function, okay? 22

22

And usually we write an IIFE, actually. 23

23

So an immediately invoked function expression. 24

24

And the reason for that is because 25

25

this way we don't have to call it separately 26

26

and we can also ensure that it's only called once, right? 27

27

And so for that, we wrap it like this and create an IIFE. 28

28

So it's very important that this function 29

29

is only created once because the goal of this function 30

30

is not to reuse code by running it multiple times, 31

31

the only purpose of this function 32

32

is to create a new scope and return data just once. 33

33

And then in here in the function, 34

34

let's simply add the same variables 35

35

that we had before in the other module. 36

36

So let's do here again, a shopping cart. 37

37

And so in that other shopping cart, 38

38

we had a bunch of private variables, basically, 39

39

so data that was not exported. 40

40

And so we simply defined them as variables there, 41

41

and here we do the same thing in the function. 42

42

So total price 237, and total quantity 23. 43

43

You can also use or add to cart, 44

44

and let's simply grab that from here. 45

45

So without the export, of course, 46

46

and in this one, let's actually add 47

47

another very simple function, 48

48

which will simply lock something to the console, 49

49

so this one is to order stock. 50

50

So ordered from supplier, 51

51

and let's call this one order stock. 52

52

So right now, of course, 53

53

all of this data here is private 54

54

because it is inside of the scope of the function. 55

55

And so now all we have to do is to return some of this stuff 56

56

in order to basically return a public API. 57

57

And so to do that, we simply return an object, 58

58

which contains the stuff that we want to make public here. 59

59

So let's say again, 60

60

we want to add the add to cart function to the public API, 61

61

also the cart array and total price and quantity. 62

62

So basically in this case, 63

63

everything except the order stock, okay? 64

64

And of course we could have also defined all of these here, 65

65

right in the object as properties and methods, 66

66

but I find it a little bit cleaner 67

67

to define everything outside 68

68

and then to simply create an object, 69

69

which contains everything 70

70

that we want to expose to the outside. 71

71

However, right now we are not really storing 72

72

this returned object here anywhere, right? 73

73

So if we run this right now, 74

74

then this object kind of disappears into nothing. 75

75

However, that's easy to fix 76

76

because we can simply assign the result 77

77

of running this IIFE here to a new variable. 78

78

And so let's call this just like before, the shopping cart, 79

79

let's say shopping cart two. 80

80

And so now, just like before, 81

81

we can now say shopping cart two.add to cart, 82

82

and here let's say four apples and two pizzas, right? 83

83

And so it works. 84

84

And indeed, if we take a look at shopping cart, 85

85

so shopping cart. 86

86

Now, of course, now it's not available here 87

87

because we are still inside of a module, 88

88

and everything that is in a module 89

89

is private to that very module. 90

90

And so therefore we can now not access anything 91

91

from this module here, here in the console, 92

92

because this is your basically the global scope, 93

93

but in the global scope, we are not creating any of this, 94

94

so not even shopping carts too, right? 95

95

So again, that's because it is scoped only to this module, 96

96

but let's still take a look edit here in the console, 97

97

so of course this we can do. 98

98

And so here we see that indeed, 99

99

we only exported these four things. 100

100

Now, of course our cart now got manipulated, 101

101

so that one that we defined here in the function, okay? 102

102

But of course, on the other hand, 103

103

the properties that we basically wanted to make private, 104

104

they are not accessible. 105

105

So we cannot do this, right? 106

106

So they are undefined. 107

107

All right, and that's actually it. 108

108

That's the implementation of the module pattern. 109

109

Now, do you understand exactly how and why this works? 110

110

I mean, how do we, for example, 111

111

have access to the cart variable here 112

112

and even are able to manipulate it, 113

113

so we see that it at changed, indeed. 114

114

So how are we able to do that, even if this IIFE here, 115

115

so this function has already returned long ago, right? 116

116

So this function, of course, 117

117

was only executed once in the beginning, 118

118

and then all it did was to return this object 119

119

and assigned it to this variable, right? 120

120

But then we are able to use all of this 121

121

and to also manipulate the data 122

122

that is inside of this function, 123

123

which is the function that returned this object. 124

124

And the answer to how all of this works like this 125

125

is one more time, closures. 126

126

So closures, remember, allow a function to have access 127

127

to all the variables that were present 128

128

at its birthplace, basically. 129

129

So that was a nice analogy that I used back then 130

130

when we first talked about closures, 131

131

and I think it's a very nice way to visualize 132

132

how it works also in this case. 133

133

So the add to cart function was created here, right? 134

134

And so this function here 135

135

is the birthplace of this function. 136

136

And so therefore this function never loses connection 137

137

to its birthplace, which was this function here. 138

138

And so that birthplace, so to say, is all of this scope, 139

139

which contains of course the cart. 140

140

And so therefore the add to cart function out here 141

141

can still access that cart variable 142

142

that was in the function, okay? 143

143

So the reason why this works 144

144

is not because the cart variable is also in this object, 145

145

so that's not relevant 146

146

because here we are not using this.cart, right? 147

147

We are simply using cart. 148

148

So here we could also log 149

149

something that is indeed private to this module. 150

150

So something that will not be in this exported object. 151

151

So let's say shipping cost is, and then shipping cost. 152

152

And so in order to produce this string here, 153

153

the function will also have to use this variable 154

154

that was only present at its birthplace, 155

155

but which no longer does exist besides that. 156

156

So, indeed that still works, 157

157

so the function is still able to access 158

158

that value of 10, okay? 159

159

And for an even deeper explanation of why this works, 160

160

you can, of course, always go back and revisit 161

161

that lecture about closures. 162

162

Okay, but in essence, again, 163

163

this is how the module pattern works and it works very well, 164

164

and it has been working for a long time for developers, 165

165

so long before ES6 modules even existed in JavaScript. 166

166

Now, the problem is that if we wanted one module per file, 167

167

like we have with ES6 modules, 168

168

then we would have to create different scripts 169

169

and link all of them in the HTML file. 170

170

And that then creates a couple of problems, 171

171

like we have to be careful with the order 172

172

in which we declare them in HTML, 173

173

and we would have all of the variables 174

174

living in the global scope, 175

175

and finally, we also couldn't bundle them together 176

176

using a module bundler. 177

177

And so as you learned at the beginning of this section, 178

178

using a module bundler is very important 179

179

in modern JavaScript. 180

180

So the module pattern that we just learned about 181

181

does indeed work quite good, but it has some limitations. 182

182

And so that's exactly the reason 183

183

why native modules were added to the language in ES6.