Original subtitles

1 1

In this lecture, let's answer the question. 2

2

How is JavaScript code executed? 3

3

We already know that it happens in a call stack 4

4

in the engine, but let's dig a bit deeper now. 5

5

And let's start 6

6

by supposing that our code was just finished compiling. 7

7

Just in the way that we learned in the last lecture. 8

8

So the code is now ready to be executed. 9

9

What happens then, 10

10

is that a so-called global execution context is created 11

11

for the top-level code. 12

12

And top-level code is basically code that is not 13

13

inside any function. 14

14

So again, in the beginning 15

15

only the code that is outside of functions will be executed. 16

16

And this makes sense, right? 17

17

Functions should only be executed when they are called. 18

18

And actually we saw this happening already 19

19

in our pig game project. 20

20

So there we had an init function, 21

21

which initialized our entire project 22

22

but in order to actually initialize the game 23

23

the first time that the page loaded, 24

24

we needed to call that function immediately 25

25

in our top-level code. 26

26

And so that's what I mean here. 27

27

But anyway, we can also see 28

28

what top-level code is in this example here. 29

29

So this name variable declaration 30

30

is clearly top-level code right? 31

31

And therefore it will be executed 32

32

in the global execution context. 33

33

Next, we have two functions, one expression, 34

34

and one declaration. 35

35

So these will also be declared, 36

36

so that they can be called later. 37

37

But the code inside the functions, 38

38

will only be executed when the functions are called. 39

39

Okay, so we know that a global execution context 40

40

is created for top-level code. 41

41

But now what exactly is an execution context? 42

42

Well, an execution context is an abstract concept. 43

43

But I define it basically as an environment 44

44

in which a piece of JavaScript is executed. 45

45

It's like a box that stores all the necessary information 46

46

for some code to be executed. 47

47

Such as local variables or arguments passed into a function. 48

48

So, JavaScript code always runs inside an execution context. 49

49

And to make this a bit more intuitive 50

50

let's imagine you order a pizza at a takeaway. 51

51

So usually that pizza comes in a box right? 52

52

And it might also come 53

53

with some other stuff that is necessary 54

54

for you to eat a pizza such as cutlery or a receipt, 55

55

so that you can actually pay for the pizza before eating it. 56

56

So, in this analogy, 57

57

the pizza is the JavaScript code to be executed, 58

58

and the box is of course the execution context 59

59

for our pizza. 60

60

And that's because eating the pizza happens inside the box 61

61

which is then the environment for eating pizza. 62

62

The box also contains cutlery and the receipt, 63

63

which are necessary to eat a pizza 64

64

or in other words, to execute the code, okay? 65

65

I hope that made sense, 66

66

and to made the concept of execution context 67

67

a little bit more clear. 68

68

Now, in any JavaScript project, no matter how large it is, 69

69

there is only ever one global execution context. 70

70

It's always there as the default context, 71

71

and it's where top-level code will execute. 72

72

And speaking of execute, 73

73

now that we have an environment 74

74

where the top-level code can be executed, 75

75

it finally is executed. 76

76

And there is not a lot to say about the execution itself. 77

77

It's just the computer CPU processing 78

78

the machine code that it received. 79

79

Okay, and once this first code, 80

80

so the top-level of code is finished, 81

81

functions finally start to execute as well. 82

82

And here is how that works. 83

83

For each and every function call, 84

84

and you execution context will be created 85

85

containing all the information that is necessary 86

86

to run exactly that function. 87

87

And the same goes for methods, of course, 88

88

because they're simply functions 89

89

attached to objects remember? 90

90

Anyway, all these execution contexts together, 91

91

make up the call stack that I mentioned before. 92

92

But more on that in a second. 93

93

Now, when all functions are done executing, 94

94

the engine will basically keep waiting 95

95

for callback functions to arrive 96

96

so that it can execute these. 97

97

For example, a callback function associated 98

98

with a click event. 99

99

And remember, that it's the event loop who provides 100

100

these new callback functions 101

101

as we learned in the last lecture. 102

102

All right. 103

103

So we know now what an execution context is, 104

104

but don't really know what it's made of. 105

105

So, what's inside of it? 106

106

And so let's find that out next. 107

107

And the first thing that's inside any execution context 108

108

is a so-called variable environment. 109

109

In this environment, 110

110

all our variables and function declarations are stored, 111

111

and there is also a special arguments object. 112

112

This object contains, 113

113

as the name says all the arguments that were passed 114

114

into the function that the current execution context 115

115

belongs to. 116

116

Because remember each function 117

117

gets its own execution context 118

118

as soon as the function is called. 119

119

So basically all the variables 120

120

that are somehow declared inside a function, 121

121

will end up in its variable environment. 122

122

However, a function can also access variables 123

123

outside of the function. 124

124

And we have already seen that in action 125

125

throughout this course, 126

126

especially in the projects of the previous section. 127

127

And this works because of something called the scope chain. 128

128

And we will learn all about scoping 129

129

and the scope chain later in the section. 130

130

But for now, what you need to know 131

131

is that the scope chain basically consists of 132

132

references to variables that are located 133

133

outside of the current function. 134

134

And to keep track of the scope chain, 135

135

it is stored in each execution context. 136

136

Finally, each context also gets a special variable 137

137

called the this keyword. 138

138

And once more, there is a special lecture 139

139

just about the this keyword later in the section. 140

140

Okay. 141

141

Now, the content of the execution context, 142

142

so variable environment, scope chain 143

143

and this keyword is generated in a so-called creation phase. 144

144

Which happens right before execution. 145

145

And now just one final 146

146

but very important detail that we need to keep in mind, 147

147

is that execution contexts belonging to arrow functions, 148

148

do not get their own arguments keyword, 149

149

nor do they get the this keyword, okay? 150

150

So, basically arrow functions 151

151

don't have the arguments object 152

152

and the this keyword. 153

153

Instead, they can use the arguments object, 154

154

and the this keyword 155

155

from their closest regular function parent. 156

156

And this is an extremely important detail to remember 157

157

about arrow functions and we will come back to it later. 158

158

So these are the things 159

159

that are necessary to run each function 160

160

as well as the code in the top-level. 161

161

Now behind the scenes, it's actually even more complex 162

162

but I think we're fine like this, aren't we? 163

163

And now let's actually try to simulate the creation phase 164

164

for this code example here. 165

165

So, as you hopefully know, by now, 166

166

we will get one global execution context 167

167

and one for each function. 168

168

So one for the first function, 169

169

and one for the second function. 170

170

In the global context, 171

171

we have the name variable declaration, 172

172

the first and second function declarations, 173

173

as well as the X variable declaration. 174

174

For the functions, the variable environment 175

175

will literally contain all the code 176

176

of a particular function. 177

177

Now the value of X is marked as unknown here, 178

178

because this value is the result 179

179

of the first function that we didn't run yet. 180

180

But we will simulate this in the next slide. 181

181

Now, technically none of these values actually become known 182

182

during the creation phase, but only in the execution phase. 183

183

So this is not 100% accurate here, 184

184

but it's just to illustrate 185

185

how these execution contexts work. 186

186

Okay? So just keep that in mind. 187

187

Anyway, now in the first function, 188

188

we have the a variable set to 1 and the b variable 189

189

which once again requires a function call 190

190

in order to become known. 191

191

Finally, the variable environment of the second function, 192

192

contains the C variable set to 2, 193

193

and since this is a irregular function, 194

194

so not an arrow function, it also has the arguments object. 195

195

And this object is an array, 196

196

which contains all the arguments that were passed 197

197

into the function when it was called. 198

198

In this case, as you can see, that's 7 and 9. 199

199

Quite simple right? 200

200

Well, it's simple because this is an extremely small 201

201

amount of code. 202

202

But now imagine there are hundreds of execution contexts 203

203

for hundreds of functions. 204

204

How will the engine keep track 205

205

of the order in which functions we're called? 206

206

And how will it know where it currently is 207

207

in the execution? 208

208

Well, that's where the call stack finally comes in. 209

209

And remember that the call stack, 210

210

together with the memory heap, 211

211

makes up the JavaScript engine itself. 212

212

But what actually is the call stack? 213

213

Well, it's basically a place where execution contexts 214

214

get stacked on top of each other, 215

215

in order to keep track 216

216

of where we are in the programs execution. 217

217

So the execution context that is on top of the stack, 218

218

is the one that is currently running. 219

219

And when it's finished running, 220

220

it will be removed from the stack, 221

221

and execution will go back 222

222

to the previous execution context. 223

223

And using the analogy from before, 224

224

it is as if you bought pizzas with some friends. 225

225

Each friend has a pizza box, and then you put the boxes 226

226

on top of each other, forming a stack, 227

227

in order to keep track, which pizza belongs to each friend. 228

228

Now, all this sounds a bit abstract, doesn't it? 229

229

And so to demonstrate how the call stack works, 230

230

let's walk through this code example together, 231

231

so that I can show you exactly what happens. 232

232

So, once the code is compiled, 233

233

top-level code will start execution. 234

234

And then as we learned in the beginning of the lecture, 235

235

a global execution context will be created 236

236

for the top-level of code, right? 237

237

So this is where all the code outside of any function 238

238

will be executed. 239

239

And what happens with this execution context? 240

240

That's right, it will be put in the call stack. 241

241

And since this context is now at the top of the stack, 242

242

it is the one where the code is currently being executed. 243

243

So, let's continue now with this execution. 244

244

So here, there is a simple variable declaration. 245

245

And then the first and the second functions are declared. 246

246

So nothing fancy, but that's just how normal top-level code 247

247

gets executed. 248

248

But then, in the last line 249

249

is where things start to get interesting. 250

250

Here, we declare the X variable, 251

251

with the value that is gonna be returned 252

252

from calling the first function. 253

253

And so let's actually call that function. 254

254

Now what happens immediately when a function is called? 255

255

Well, it gets its own execution context 256

256

so that it can run the code that's inside its body. 257

257

Perfect. 258

258

And what happens to the context? 259

259

Well, again it is put in the call stack, 260

260

on top of the current context, 261

261

and so it's now the new current execution context. 262

262

Great. 263

263

So, let's continue. 264

264

So we have yet another simple variable declaration here, 265

265

and this variable will of course be defined 266

266

in the variable environment 267

267

of the current execution context, 268

268

and not in the global context, right? 269

269

Then right in the next line, we have another function call. 270

270

So, let's call that function and move there. 271

271

And as you guessed a new execution context 272

272

was created right away for this second function. 273

273

And once more, it is pushed 274

274

onto the call stack and becomes the new act of context. 275

275

Now what's important to note here is that the execution 276

276

of the first function has now been paused, okay? 277

277

So again, we are running the second function now 278

278

and in the meantime, no other function is being executed. 279

279

The first function stopped at this point 280

280

where the second function was called 281

281

and will only continue as soon 282

282

as this second function returns. 283

283

And it has to work this way because remember, 284

284

JavaScript has only one thread of execution. 285

285

And so it can only do one thing at a time. 286

286

Okay? Never forget that. 287

287

Now, moving to the next line, we have a return statement 288

288

meaning that the function will finish its execution. 289

289

So, what does that mean for the call stack? 290

290

Well, it basically means 291

291

that the function's execution context, 292

292

will be popped off the stack 293

293

and disappear from the computer's memory. 294

294

At least that's what you need to know for now 295

295

because actually the popped off execution context 296

296

might keep living in memory. 297

297

But more about that later in the course. 298

298

Anyway, what happens next, 299

299

is that the previous execution context, will now be back 300

300

to being the active execution context again. 301

301

And so let's also go back to where we were 302

302

before in the code. 303

303

And I hope that by now, 304

304

you start to see how the call stack really keeps track 305

305

of the order of execution here. 306

306

Without the call stack, 307

307

how would the engine know which function 308

308

was being executed before? 309

309

It wouldn't know where to go back to, right? 310

310

And that's the beauty of the call stack. 311

311

It makes this process almost effortless. 312

312

So I like to use the analogy 313

313

of the call stack being like a map 314

314

for the JavaScript engine. 315

315

Because the call stack ensures 316

316

that the order of execution never gets lost. 317

317

Just like a map does, at least if you use it correctly. 318

318

All right. 319

319

So, we returned from the second function, 320

320

or back in the first function 321

321

where we have this calculation, 322

322

and then finally this first function also returns. 323

323

And so here the same as before happens. 324

324

So the current execution context gets popped off the stack, 325

325

and the previous context is now the current context 326

326

where code is executed. 327

327

In this case, we're back to the global execution context 328

328

and the line of code where the first function 329

329

was first called. 330

330

So here, the return value is finally assigned to X 331

331

and the execution is finished. 332

332

Now the program will now actually stay in this state 333

333

for forever until it is eventually really finished. 334

334

And that only happens like when we close the browser tab, 335

335

or the browser window. 336

336

Only when the program is really finished like this, 337

337

is when the global execution context 338

338

is also popped off the stack. 339

339

And this is in a nutshell how the call stack works. 340

340

So hopefully it makes sense now that we say 341

341

that Java script code runs inside the call stack. 342

342

And actually it is more accurate to say 343

343

that code runs inside of execution contexts 344

344

that are in the stack. 345

345

But the general point is that code runs in the call stack, 346

346

which is of course true. 347

347

Great. 348

348

Next up, we will learn some more 349

349

about the variable environment, 350

350

and how variables are created. 351

351

So stay tuned for the next video.