Original subtitles

1 1

So I talked about the JavaScript engine 2

2

in the last lecture, but what is that engine actually? 3

3

And what is a JavaScript runtime? 4

4

Also, how is JavaScript code translated to a machine code? 5

5

So that's just some of the topics 6

6

that we talked about in the last video. 7

7

And so now let's find out how they work in this lecture. 8

8

So a JavaScript engine is simply 9

9

a computer program that executes JavaScript code. 10

10

There are a lot of steps involved in doing that, 11

11

but essentially executing JavaScript code 12

12

is what an engine does. 13

13

Now every browser has its own JavaScript engine 14

14

but probably the most well known engine is Google's V-Eight. 15

15

The V eight engine powers Google Chrome, 16

16

but also Node.js which is that JavaScript runtime 17

17

that we talked about in the beginning of the course, 18

18

so the one that we can use to build server side applications 19

19

with JavaScript, so outside of any browser. 20

20

And of course all the other browsers 21

21

have their own JavaScript engines 22

22

which you can look up online if you're interested. 23

23

Anyway, it's quite easy to understand what an engine is 24

24

but what's most important is to actually understand 25

25

its components and how it works. 26

26

So any JavaScript engine always contains 27

27

a call stack and a heap. 28

28

The call stack is where our code is actually executed 29

29

using something called execution contexts. 30

30

Then the heap is an unstructured memory pool 31

31

which stores all the objects that our application needs. 32

32

Alright, so with this look at the engine, 33

33

we have answered where our code is executed. 34

34

But now the question is 35

35

how the code is compiled to machine code 36

36

so that it actually can be executed afterwards. 37

37

Well, let's find out. 38

38

But first we need to make 39

39

a quick computer science side note here 40

40

and talk about the difference between 41

41

compilation and interpretation. 42

42

So in the last lecture, 43

43

we learned that the computer's processor 44

44

only understands zeros and ones 45

45

and that's therefore every single computer program 46

46

ultimately needs to be converted into this machine code 47

47

and this can happen using compilation or interpretation. 48

48

So in compilation, the entire source code 49

49

is converted into machine code at once. 50

50

And this machine code is then written 51

51

into a portable file that can be executed on any computer. 52

52

So we have two different steps here. 53

53

First, the machine code is built 54

54

and then it is executed in the CPU so in the processor. 55

55

And the execution can happen 56

56

way after the compilation of course. 57

57

For example, any application that you're using 58

58

on your computer right now has been compiled before 59

59

and you're now executing it way after it's compilation. 60

60

Now, on the other hand in interpretation, 61

61

there is an interpreter which runs through the source code 62

62

and executes it line by line. 63

63

So here we do not have the same two steps as before. 64

64

Instead the code is read and executed all at the same time. 65

65

Of course the source code still 66

66

needs to be converted into machine code, 67

67

but it simply happens right before it's executed 68

68

and not ahead of time. 69

69

Now JavaScript used to be a purely interpreted language 70

70

but the problem with interpreted languages 71

71

is that they are much, much slower than compiled languages. 72

72

This used to be okay for JavaScript, 73

73

but now with modern JavaScript 74

74

and fully fledged web applications that we built 75

75

and use today, low performance is no longer acceptable. 76

76

Just imagine you were using Google maps in your browser 77

77

and you were dragging the map and each time you dragged 78

78

it would take one second for it to move. 79

79

That would be completely unacceptable, right? 80

80

Now many people still think 81

81

that JavaScript is an interpreted language 82

82

but that's not really true anymore. 83

83

So instead of simple interpretation 84

84

modern JavaScript engine now use a mix between 85

85

compilation and interpretation 86

86

which is called just-in-time compilation. 87

87

This approach basically compiles the entire code 88

88

into machine code at once and then executes it right away. 89

89

So we still have the two steps 90

90

of regular ahead of time compilation 91

91

but there is no portable file to execute. 92

92

And the execution happens immediately after a compilation. 93

93

And this is perfect for JavaScript 94

94

as it's really a lot faster than just executing code 95

95

line by line. 96

96

Now I skimmed over some details here 97

97

but this is really all you need to know. 98

98

Anyway, let's now understand how this works 99

99

in the particular case of JavaScript. 100

100

So as a piece of JavaScript code enters the engine 101

101

the first step is to parse the code 102

102

which essentially means to read the code. 103

103

During the parsing process, the code is parsed 104

104

into a data structure called 105

105

the abstract syntax tree or AST. 106

106

This works by first splitting up each line of code 107

107

into pieces that are meaningful to the language 108

108

like the const or function keywords, 109

109

and then saving all these pieces 110

110

into the tree in a structured way. 111

111

This step also checks if there are any syntax errors 112

112

and the resulting tree will later be used 113

113

to generate the machine code. 114

114

Now let's say we have a very simple program. 115

115

All it does is to declare a variable like this, 116

116

and this is what the AST 117

117

for just this one line of code looks like. 118

118

So we have a variable declaration 119

119

which should be a constant 120

120

with the name X and the value of 23. 121

121

And besides that there is a lot of other stuff here, 122

122

as you can see. 123

123

So just imagine what it would look like 124

124

for a large real application. 125

125

And of course you don't need to know 126

126

what an AST looks like. 127

127

This is just for curiosity okay. 128

128

Now sometimes I get asked 129

129

if this tree has anything to do with the DOM tree 130

130

and the answer is a very clear no. 131

131

So this tree has absolutely nothing to do with the DOM. 132

132

It is not related in any way. 133

133

It's just a representation 134

134

of our entire code inside the engine. 135

135

Anyway, the next step is compilation 136

136

which takes the generated AST 137

137

and compiles it into machine code 138

138

just as we learned in the previous slide. 139

139

This machine code then gets executed right away 140

140

because remember modern JavaScript engine use 141

141

just-in-time compilation. 142

142

And remember execution happens 143

143

in the JavaScript engines call stack 144

144

but we will dig deeper into this in the next lecture. 145

145

All right, so far so good. 146

146

We have our code running so we can finish here, Right? 147

147

Well, not so fast because modern JavaScript engines 148

148

actually have some pretty clever optimization strategies. 149

149

What they do is to create a very unoptimized version 150

150

of machine code in the beginning 151

151

just so that it can start executing as fast as possible. 152

152

Then in the background, this code is being optimized 153

153

and recompiled during the already running program execution. 154

154

And this can be done most of the times 155

155

and after each optimization 156

156

the unoptimized code is simply swept 157

157

for the new more optimized code 158

158

without ever stopping execution of course. 159

159

And this process is what makes modern engines 160

160

such as the V-Eight so fast 161

161

and all this parsing, compilation and optimization 162

162

happens in some special threads inside the engine 163

163

that we cannot access from our code. 164

164

So completely separate from the main thread 165

165

that is basically running into call stack 166

166

executing our own code. 167

167

Now different engines implements in slightly different ways, 168

168

but in a nutshell this is what modern 169

169

just-in-time compilation looks like for JavaScript. 170

170

And the next time someone tells you 171

171

JavaScript is an interpreted language, 172

172

you just show them this slide so that they can learn 173

173

how it really works. 174

174

Alright, so we looked at the JavaScript engine 175

175

and how it works behind the scenes in quite some detail. 176

176

Now to round off this lecture 177

177

let's also take a look at what a JavaScript runtime is. 178

178

And in particular, the most common one, 179

179

which is the browser and by doing this, 180

180

we can get the bigger picture 181

181

of how all the pieces fit together when we use JavaScript. 182

182

And so this is a really important slide. 183

183

So we can imagine a JavaScript runtime as a big box 184

184

or a big container 185

185

which includes all the things that we need 186

186

in order to use JavaScript in this case, in the browser. 187

187

And to heart of any JavaScript, 188

188

runtime is always a JavaScript engine. 189

189

So exactly the one we've been talking about. 190

190

That's why it makes sense to talk about engines 191

191

and runtimes together. 192

192

Without an engine there is no runtime 193

193

and there is no JavaScript at all. 194

194

However the engine alone is not enough. 195

195

In order to work properly, 196

196

we also need access to the web APIs, 197

197

and we talked about web APIs before, remember? 198

198

So that's everything related to the DOM 199

199

or timers or even the console.log that we use all the time. 200

200

So essentially web APIs are functionalities provided 201

201

to the engine, 202

202

but which are actually not part 203

203

of the JavaScript language itself. 204

204

JavaScript simply gets access to these APIs 205

205

through the global window object. 206

206

But it still makes sense that the web APIs 207

207

are also part of the runtime, 208

208

because again a runtime is just like a box 209

209

that contains all the JavaScript related stuff that we need. 210

210

Next a typical JavaScript runtime 211

211

also includes a so called callback queue. 212

212

This is a data structure that contains 213

213

all the callback functions that are ready to be executed. 214

214

For example we attach event handler functions 215

215

to DOM elements like a button 216

216

to react to certain events, right? 217

217

And these event handler functions 218

218

are also called callback functions okay. 219

219

So as the event happens, 220

220

for example a click, the callback function will be called. 221

221

And here is how that actually works behind the scenes. 222

222

So the first thing that actually happens after the event 223

223

is that the callback function is put 224

224

into the callback queue. 225

225

Then when the stack is empty 226

226

the callback function is passed to the stack 227

227

so that it can be executed. 228

228

And this happens by something called the event loop. 229

229

So basically the event loop takes callback functions 230

230

from the callback queue 231

231

and puts them in the call stack 232

232

so that they can be executed. 233

233

And remember how I said in the last lecture 234

234

that the event loop 235

235

is how JavaScript's nonblocking concurrency model 236

236

is implemented? 237

237

Well, here is an overview of how that works. 238

238

Now we will go over why this makes JavaScript nonblocking 239

239

in a special lecture about the event loop 240

240

later in the course, 241

241

because this is really a fundamental piece 242

242

of JavaScript development 243

243

that every developer needs to understand deeply. 244

244

Alright, so as they already said the focus in this course 245

245

is on JavaScript in the browser 246

246

and that's why we analyzed the browser JavaScript runtime. 247

247

However, it's also important to remember 248

248

that JavaScript can exist outside of browsers, 249

249

for example, in Node.js. 250

250

And so here is what the node JS JavaScript runtime 251

251

looks like. 252

252

It's pretty similar, but since we don't have a browser 253

253

of course, we can't have the web APIs 254

254

because it's the browser who provides these. 255

255

Instead we have multiple C ++ bindings 256

256

and a so called thread pool. 257

257

Now details don't matter here at all. 258

258

I just want you to know 259

259

that different JavaScript runtimes do exist. 260

260

Alright cool, that's all I had to tell you 261

261

about JavaScript engines and runtimes. 262

262

In our next lecture we will learn how JavaScript is executed 263

263

in the call stack.