Original subtitles

1 1

As an introduction to this theory section, 2

2

I want to start with a very cool 3

3

and very high-level overview about the JavaScript language. 4

4

Just so you get a first overview 5

5

of most of the things that we need to learn 6

6

in order to eventually master JavaScript. 7

7

And this is gonna be a long lecture, 8

8

so get ready for a crazy ride. 9

9

And I want to start by coming back to that first definition 10

10

that I gave you on JavaScript, 11

11

where I told you that JavaScript 12

12

is a high-level, object-oriented, 13

13

multi-paradigm programming language. 14

14

Now this is of course 100% correct, 15

15

but it's also really just the surface, 16

16

the tip of the iceberg. 17

17

So what about this definition? 18

18

JavaScript is a high-level, prototype-based, 19

19

object-oriented, multi-paradigm, 20

20

interpreted or just-in-time compiled, 21

21

dynamic, single-threaded, 22

22

garbage-collected programming language 23

23

with first-class functions 24

24

and a non-blocking event loop concurrency model. 25

25

Wait, what? 26

26

Is this some kind of joke? 27

27

Well, yeah, it kind of is actually, 28

28

I just packed as much information as possible 29

29

about JavaScript into one unreadable sentence, just for fun, 30

30

but besides fun, 31

31

this also gives us a great opportunity 32

32

to unpack all of this in order to get a first peek 33

33

into all the stuff that we're gonna learn about JavaScript 34

34

throughout the course. 35

35

And this is not to intimidate you. It's really not. 36

36

I just want you to get the big picture 37

37

before really getting started 38

38

and also introduce some topics 39

39

that are just good to know, 40

40

because getting the big picture before diving deep 41

41

is in my opinion, an amazing learning technique. 42

42

So with that being said, let's unpack this now a little bit. 43

43

So these are the nine JavaScript topics 44

44

that we're briefly gonna talk about in this lecture, 45

45

slightly reordered. 46

46

And starting with the high-level part, 47

47

as you might already know, 48

48

every program that runs on your computer 49

49

needs some hardware resources, 50

50

such as memory and the CPU to do its work. 51

51

Now, there are low-level languages, such as C, 52

52

where you have to manually manage these resources. 53

53

For example, 54

54

asking the computer for memory to create a new variable. 55

55

On the other side, 56

56

you have high-level languages such as JavaScript and Python, 57

57

where we do not have to manage resources at all 58

58

because these languages have so-called abstractions 59

59

that take all of that work away from us. 60

60

This makes the language easier to learn and to use, 61

61

but the downside is that programs will never be as fast 62

62

or as optimized as for example, C programs. 63

63

Now, one of the powerful tools 64

64

that takes memory management away from us developers 65

65

is garbage-collection, 66

66

which is basically an algorithm 67

67

inside the JavaScript engine, 68

68

which automatically removes old, unused objects 69

69

from the computer memory 70

70

in order not to clog it up with unnecessary stuff. 71

71

So it's a little bit like JavaScript has a cleaning guy 72

72

who cleans our memory from time to time 73

73

so that we don't have to do it manually in our code. 74

74

Next up, JavaScript is an interpreted 75

75

or just-in-time compiled language. 76

76

And again, we will learn more about this in this section, 77

77

but what you need to know for now 78

78

is that the computer's processor 79

79

only understands zeros and ones, that's right. 80

80

Ultimately, every single program needs to be written 81

81

in zeros and ones, which is also called machine code. 82

82

And since that's not really practical to write, is it? 83

83

We simply write human-readable JavaScript code, 84

84

which is an abstraction over machine code, 85

85

but this code eventually needs to be translated 86

86

to machine code. 87

87

And that step can be either compiling 88

88

or interpreting. 89

89

This step is necessary in every single programming language 90

90

because no one writes machine code manually. 91

91

In the case of JavaScript, 92

92

this happens inside the JavaScript engine. 93

93

Now, one of the things that makes JavaScript so popular 94

94

is the fact that it's a multi-paradigm language. 95

95

In programming, a paradigm is an approach 96

96

and an overall mindset of structuring our code, 97

97

which will ultimately direct the coding style and technique 98

98

in a project that uses a certain paradigm. 99

99

And this definition still sounds kind of abstract, 100

100

but don't worry, 101

101

it will become more clear as we move on. 102

102

Now, three popular paradigms are; 103

103

procedural, object-oriented, 104

104

and functional programming. 105

105

So procedural programming is what we've been doing so far, 106

106

which is basically just organizing the code 107

107

in a very linear way, 108

108

and then with some functions in between. 109

109

Now about object-oriented programming 110

110

and functional programming, 111

111

I will talk about them in a second. 112

112

Also, we can classify paradigms as imperative 113

113

or as declarative, but again, more on that later. 114

114

Now, many languages are only procedural 115

115

or only object-oriented 116

116

or only functional, 117

117

but JavaScript does all of it. 118

118

So it's really flexible and versatile. 119

119

And so we can do really whatever we want with it. 120

120

It's our choice. We can use whatever paradigm we want. 121

121

And in this course, I will show you how to use all of them. 122

122

So, about the object-oriented nature of JavaScript, 123

123

it is a prototype-based, object-oriented approach. 124

124

Now, what does that mean? 125

125

Well, first, almost everything in JavaScript is an object, 126

126

except for primitive values 127

127

such as numbers, strings, et cetera. 128

128

But arrays, for example, are just object. 129

129

And we already saw that in practice, right? 130

130

Now, have you ever wondered why we can create an array 131

131

and then use the push method on it, for example? 132

132

Well, it's because of prototypal inheritance. 133

133

Basically, we create arrays from an array blueprint, 134

134

which is like a template and this is called the prototype. 135

135

This prototype contains all the array methods 136

136

and the arrays that we create in our code 137

137

then inherit the methods from the blueprint 138

138

so that we can use them on the arrays. 139

139

And this, what I just explained to you 140

140

is actually a huge oversimplification, 141

141

which might still sound confusing. 142

142

And that's the reason why there is a whole section 143

143

on object-oriented programming with JavaScript 144

144

later in the course. 145

145

But since this is a big overview lecture, 146

146

I wanted to first introduce this topic right here. 147

147

Next up, JavaScript is a language 148

148

with first-class functions, 149

149

which simply means that functions 150

150

are treated just as regular variables. 151

151

So, we can pass functions into other functions 152

152

and we can even return functions from functions. 153

153

And this is extremely powerful 154

154

because it allows us to use a lot of powerful techniques 155

155

and also allows for functional-programming, 156

156

which is one of the paradigms 157

157

that we just talked about before. 158

158

And in fact, 159

159

we have already used the power of first-class functions 160

160

without knowing that they are called first-class functions. 161

161

So remember this piece of code that we wrote 162

162

for closing the modal window that we built before. 163

163

So right here, we pass the closeModal function 164

164

into the addEventListener function 165

165

as if it was just a regular variable, right? 166

166

And actually not all languages have first-class functions, 167

167

but JavaScript has, and it is amazing. 168

168

Believe me, it's really, really helpful. 169

169

Next, I said that JavaScript is a dynamic language 170

170

and dynamic actually means dynamically-typed. 171

171

So as we've already seen, 172

172

in JavaScript, we don't assign data types to variables. 173

173

Instead, they only became known 174

174

when the JavaScript engine executes our code. 175

175

Also, the type of variables can easily be changed 176

176

as we reassign variables. 177

177

And this is basically what dynamically-typed means. 178

178

Now there is a lot of controversy if this is good or bad, 179

179

but this is just how it works. 180

180

Now, the same is not true 181

181

for most other programming languages, 182

182

where we have to manually assign types, to variables. 183

183

And this then usually prevents bugs from happening, 184

184

which is the reason why many people say that JavaScript 185

185

should be a strongly-typed language as well. 186

186

And if you yourself want to use JavaScript with types, 187

187

then you can always look into TypeScript. 188

188

But anyway, let's now finally talk about the single-thread 189

189

and the non-blocking event loop concurrency model. 190

190

Now this is a really complex topic 191

191

and probably the most complex one of the whole course, 192

192

which is why it's kind of at the end of the course. 193

193

And therefore, 194

194

I'm not gonna go into specifics here just yet, 195

195

but instead I will just define some things here. 196

196

First, what actually is a concurrency model? 197

197

Well, it's just a fancy term 198

198

that means how the JavaScript engine handles multiple tasks 199

199

happening at the same time. 200

200

No, okay. That's cool. 201

201

But why do we need that? 202

202

Well, because JavaScript itself runs in one single-thread, 203

203

which means that it can only do one thing at a time 204

204

and therefore we need a way of handling 205

205

multiple things happening at the same time. 206

206

And by the way, in computing, 207

207

a thread is like a set of instructions 208

208

that is executed in the computer's CPU. 209

209

So basically, the thread is where our code 210

210

is actually executed in a machine's processor. 211

211

All right. But what if there is a long-running task, 212

212

like fetching data from a remote server? 213

213

Well, it sounds like that would block the single thread 214

214

where the code is running, right? 215

215

But of course we don't want that. 216

216

What we want is so-called non-blocking behavior 217

217

and how do we achieve that? 218

218

Well, by using a so-called event loop. 219

219

The event loop takes long-running tasks, 220

220

executes them in the background 221

221

and then puts them back in the main thread 222

222

once they are finished. 223

223

And this is, in a nutshell, 224

224

JavaScript's non-blocking event loop concurrency model 225

225

with a single thread. 226

226

It sounds like a mouthful for sure 227

227

but in the end, 228

228

it really just compresses to this. 229

229

Just keep in mind that, again, 230

230

this is a huge oversimplification that we will come back to. 231

231

All right. 232

232

And this actually rounds up this overview lecture. 233

233

I know there was a ton of stuff to take in, 234

234

but I hope that you still learned a thing or two here.