Original subtitles

1 1

Let's now use modules and practice, 2

2

to make sure that we really understand how they work, 3

3

and to import and export values between them. 4

4

And let's start with the simplest scenario of all, 5

5

which is to simply import a module, 6

6

but without importing any value. 7

7

And so that's also possible, 8

8

and so let's use that as a starting point here. 9

9

So let's then create a new module. 10

10

Okay? 11

11

So as always, we already start with a script.js, 12

12

but now as we create a new module, 13

13

we simply have to create a new file. 14

14

So new file, 15

15

and here, I will use the example of a "shopping-cart", 16

16

and so we're gonna have a module called, 17

17

shoppingcart.jS, 18

18

and in module names, 19

19

it's also a convention to use camelCase names. 20

20

All right? 21

21

So this one here will be the importing 22

22

module, 23

23

and this will be the exporting module. 24

24

And to start, 25

25

let's actually lock this to the console, 26

26

just, 27

27

so we can see 28

28

that the module is actually being imported. 29

29

So this one here, will lock to the console exporting module, 30

30

and this one should look to the console importing module. 31

31

So like this, 32

32

with the quotes, of course, 33

33

and now we also have to import, that other module, 34

34

And let's do that here first, so import 35

35

and then a string with the location of the module. 36

36

So ./, which simply means to current location, 37

37

and then here VS code already gives us these options. 38

38

So let's choose here shoppingcart.js 39

39

and you see that VS code automatically omits the js here. 40

40

So the name is actually this one with the js, 41

41

but ES modules actually also work without the extension. 42

42

but for now let's actually leave the extension there, 43

43

just to make it a little bit more clear. 44

44

So, let's start this cart here. 45

45

So as always live server, 46

46

but then we will see that this is not yet going to work. 47

47

So let's take a look at the console here. 48

48

And so what we see cannot use import statement 49

49

outside a module. 50

50

So why is that happening? 51

51

Well, remember from the last lecture, 52

52

that when we want to connect a module to the HTML file, 53

53

we actually need to specify the type attribute. 54

54

So here we have to say 55

55

that this is off the type module. 56

56

Okay, and so now it actually worked. 57

57

So let's go back here and analyze this. 58

58

And so here in the console, we see 59

59

that the first log is actually exporting module 60

60

only then importing model is locked to the console. 61

61

And so this means that in fact, this cart here is executed 62

62

before any cart in the importing module. 63

63

So exactly what I explained to you in the last lecture. 64

64

So the cart in this module here is passed, 65

65

and before it is executed, 66

66

all the cart in the modules 67

67

that it imports is executed first. 68

68

Right?, 69

69

And the same is true if we had this lock here before. 70

70

Okay? 71

71

So remember that all the importing statements 72

72

are basically hoisted to the top. 73

73

And so usually, this is actually also how we write it. 74

74

So all the imports statements at the top of the file, 75

75

and also note how I didn't use strict mode here, 76

76

and that's because as you learned in the last video, 77

77

all modules are executed in strict mode by default. 78

78

But now let's go back here to the "shopping-cart" module 79

79

and define some variables. 80

80

So let's just say, 81

81

shipping cost = 10. 82

82

And let's also say we have an empty card 83

83

which is like an array. 84

84

So an empty array for now. 85

85

Now variables that are declared inside of a module, 86

86

So just like these two ones here, 87

87

are actually sculpt to this module. 88

88

So basically inside a module, 89

89

the module itself is like the top level scope. 90

90

And so by default, this means that all top level variables 91

91

are private inside of this variable. 92

92

So unlike traditional scripts, 93

93

which would put all of these variables here 94

94

in the global scope, 95

95

but again, not modules, 96

96

and so that's why right here, we cannot do this. 97

97

All right? 98

98

So "shipping-cost" is not defined. 99

99

All right? 100

100

So the "shipping-costs" 101

101

and cart variables are scoped, 102

102

to the current module basically, 103

103

and so we can only use them here. 104

104

Now, if we wanted to use them in the script.js module 105

105

then we would have to use exports. 106

106

And in ES modules, there are two types of exports, 107

107

Named Exports and Default Exports. 108

108

And named imports is actually the simplest way 109

109

of exporting something from a module, 110

110

because all we have to do is to put export 111

111

in front of anything, that we might want to export. 112

112

So let's say that we want to create this method here 113

113

"add to cart" 114

114

and it should be a function that takes a product, 115

115

and the quantity. 116

116

And then it pushes basically a new object to the cart, 117

117

so to that cart array, 118

118

and then let's also lock something to the console, 119

119

like quantity, 120

120

and then the product, 121

121

was added to the cart. 122

122

Okay? 123

123

And so again, by now 124

124

this variable is private inside of this module, 125

125

but if we wanted to now export it, so that we can import it, 126

126

in some other module, 127

127

all we have to do is write export right here. 128

128

And so this then creates a named export from this module. 129

129

And so now we can then import that variable right here, 130

130

we just have to write it with the exact same name. 131

131

So the variable is called "add to cart", right here. 132

132

and so, right here in this module, 133

133

and so therefore we have to call it that here as well. 134

134

Now what we're missing here is the from, 135

135

so this is quite easy to understand, 136

136

it reads just like a normal sentence. 137

137

So we want to import "add to cart" from this module. 138

138

And again, "add to cart", this variable name here, 139

139

has to be exactly the same as this one. 140

140

okay? 141

141

Now here we are just missing, actually curly braces 142

142

around this here, like this, 143

143

so now it's going to work, 144

144

and to Syntax without the curly braces. 145

145

we will see a little bit later. 146

146

But again with named imports, 147

147

you have to give them here the same name, 148

148

and you actually have to put them 149

149

inside curly braces like this. 150

150

And so now here we are able to call this function 151

151

as if it was defined here in this same scope. 152

152

So let's just say, we want to add five breads 153

153

to the "shopping-cart", you know, 154

154

indeed it works. 155

155

So here we got dad log, 156

156

now that is coming from the "add to cart" function 157

157

that is indeed defined in this module here. 158

158

Now, just keep in mind 159

159

that exports always need to happen in top level cart, 160

160

so it wouldn't work like this. 161

161

All right? 162

162

So then indeed you get an unexpected token export. 163

163

So let's put it back of course. 164

164

And so now here we are back. 165

165

And of course we can also export multiple things 166

166

from a module using Named Exports. 167

167

And actually, that is the main use case of Named Exports, 168

168

so, basically when we want to export multiple things. 169

169

Now, okay? 170

170

Now we can also export multiple things, 171

171

at the same time, using Named Exports. 172

172

So we can just, let's say, declare some variables here, 173

173

like total price, 174

174

237 175

175

and total quantity, 176

176

let's say 23. 177

177

And so now we can export all of this at the same time, 178

178

again, using Named Exports, by writing total price 179

179

and total quantity. 180

180

So this is a little bit like exporting an object 181

181

from this module. 182

182

And so now, just like before we can then come here, 183

183

and import these variables using the same name, 184

184

and again, that's inside of the curly braces, 185

185

just like we export it here. 186

186

So that's "add to cart", 187

187

total price and total quantity. 188

188

And so of course we can then go ahead and use them here, 189

189

and in this case, all we do is to lock them, 190

190

but indeed, now we get access to these values from here, 191

191

and indeed now we get access to these values here, 192

192

in this main importing module. 193

193

Now actually we can change the name of the inputs as well, 194

194

so for example, if we wanted to call the total price, 195

195

simply price, we could write this, 196

196

So total price as price. 197

197

And so then here, it would no longer be called total price. 198

198

Right? 199

199

So it's no longer there, 200

200

but instead it is simply called price. 201

201

And we could actually even do that here in the exports. 202

202

So here we could also write, 203

203

write export total quantity, just as QT, 204

204

let's say. 205

205

And so then here, 206

206

it would no longer be called total quantity, 207

207

but TQ. 208

208

And now that doesn't work, so let's go back. 209

209

So it's TQ, So total quantity. 210

210

And so now indeed, we are back to having 23 there. 211

211

So this is all very flexible as you can see, 212

212

and we can play around with this as we wish. 213

213

Okay? 214

214

And actually we can take this importing even further, 215

215

because we can also import all the exports 216

216

of a module at the same time. 217

217

So that's import and then everything. 218

218

So that's usually the meaning of the star, 219

219

and then as and here we can give it some name that we want, 220

220

So let's call it "shopping-cart" and with a S here, 221

221

so a little bit like a class name. 222

222

Okay? 223

223

So that's kind of the convention when we import everything 224

224

into an object like this. 225

225

So basically, this year we'll create an object 226

226

containing everything that is exported from the module 227

227

that we will specify here. 228

228

So from, 229

229

"shopping-cart". 230

230

And so this will then basically create a namespace, 231

231

for all of the values, exported from that module. 232

232

Let's just comment out this one here, 233

233

and I will put this code that is more related 234

234

to this import, and they are here, 235

235

So actually I want all of it here. 236

236

So put that here and comment it out, 237

237

like this, because now we are doing it differently. 238

238

Let's just put everything here, 239

239

just so we get some new cart here. 240

240

Now it tells us that this module doesn't exist, 241

241

and that's because by default, 242

242

a VS code again removed this js. 243

243

And in fact it is necessary, 244

244

It is only not necessary in some other cases, 245

245

that we will see later. 246

246

So now it works again, 247

247

and we are back to having our logs here. 248

248

And so now whenever we want to use 249

249

something that was exported like this, "add to cart" 250

250

function 251

251

then we have to basically take that from this object. 252

252

So, "add to cart", and let's again say bread, 253

253

five. 254

254

All right? 255

255

So here it is again. 256

256

And so basically if we think about this, 257

257

this module here is now basically exporting a public API, 258

258

just like a class. 259

259

So it's as if this object here, 260

260

was an object created from a class, 261

261

which now has these methods, 262

262

and also, for example these properties, 263

263

like shoppingcart.total price. 264

264

Right?, 265

265

So that's the other Named Export from this module. 266

266

Now of course we are not trying 267

267

to replace classes with modules. 268

268

I just wanted to turn your attention to the fact, 269

269

that some things here look pretty similar indeed. 270

270

Right?, 271

271

And actually we can say daddy module exports, 272

272

kind of a public API, 273

273

because everything else of course stays private 274

274

inside of the module. 275

275

All right? 276

276

And that's basically how named imports and exports work. 277

277

So we saw how we can export just one value 278

278

and also how we can export multiple values at once, 279

279

and also how we can change the name of the Named Exports, 280

280

and also of the named import, 281

281

like this. 282

282

Then we learned how we can import everything 283

283

at the same time. 284

284

So all the named imports at once. 285

285

All right? 286

286

And so now it's time to talk about Default Exports. 287

287

So I said that they were Named Exports and Default Export, 288

288

and so let's now talk a little bit 289

289

about these exports defaults. 290

290

So usually, we use Default Exports 291

291

when we only want to export one thing per module, 292

292

and so that's the reason why they are called default. 293

293

And so it works like this, 294

294

so pretty similar, but then we have to write default, 295

295

and then here, we want to simply export a value. 296

296

So for example, if we wanted to export the same function, 297

297

we would simply export the value itself, 298

298

so not the variable. 299

299

And here you see, that no name is involved at all. 300

300

We are simply exporting this value. 301

301

And so then when we import it 302

302

we can basically give it any name that we want. 303

303

So let's say import add from, 304

304

shoppingcart.js 305

305

And so this will then import the Default Export, 306

306

no matter what that's called. 307

307

And in fact it's not called anything. 308

308

And so, yeah, we can give it any name here that we want. 309

309

And right now, we are actually 310

310

importing the same module here twice as you see, 311

311

now that's not a problem, as you see here now, 312

312

but usually we don't do that. 313

313

Okay? 314

314

So we didn't get any error, 315

315

but it is also not advisable, I would say. 316

316

So let's take this out here for now. 317

317

And now let's once again try to, 318

318

actually use the value that we imported here. 319

319

So let's add two pizzas, and here they are. 320

320

All right? 321

321

And we could even mix all 322

322

of them in the same import statement. 323

323

So if we wanted, we could have default 324

324

and named imports and exports all at the same time. 325

325

So here we would just have to take this one, 326

326

and then put that here after a comma, 327

327

and then we could take a look, 328

328

for example, at the price once again. 329

329

All right? 330

330

However in practice, we usually never mix 331

331

Named and Default Exports in the same module. 332

332

So this is not really desirable here. 333

333

Let me just comment it just so you see that we can do it, 334

334

but I will then leave it as it was before. 335

335

All right? 336

336

So of course now the price is not defined, 337

337

but now we should be good to go. 338

338

So the preferred style is actually 339

339

to just use one default expert per module, 340

340

and then import that here like we did. 341

341

And in fact, that's the reason why 342

342

it is easier to import a Default Exports. 343

343

So here we don't even need to use the curly braces, 344

344

and the designers of the specification, did that on purpose. 345

345

So again, to make it easier, to import default exports 346

346

but of course that's not a rigid rule, 347

347

that we always need to follow, 348

348

so, we can do whatever is best for any given situation. 349

349

However, what you probably should really not do 350

350

is to mix Default and Named Exports like we did here, 351

351

so avoid that to reduce complexity. 352

352

But besides that, you can use Named Exports 353

353

or Default Exports, whatever works best in your situations. 354

354

Now, of course, we will use all of this in the real world, 355

355

in our next big project. 356

356

And so by then, you will get a good feeling for how all 357

357

of this works, 358

358

a little bit better in the real world. 359

359

All right? 360

360

But with this, 361

361

you now already have a pretty good idea of how importing 362

362

and exporting values between modules actually works. 363

363

But before finishing this lecture, 364

364

I actually also wanted to prove you, 365

365

that imports are in fact, a life connection to exports. 366

366

So that's something that I mentioned 367

367

by the end of last video, 368

368

and it's something really important to keep in mind, 369

369

and so let's take a look at this. 370

370

And so actually what I will start doing, 371

371

is to now export this cart array here. 372

372

All right? 373

373

So here now it looks as if we are simply exporting 374

374

this MTRA here. 375

375

So cart is an empty array, 376

376

and that's all we are exporting here. 377

377

But now watch what happens as we add a couple more products. 378

378

So let's say bread, 379

379

five, 380

380

and then just a couple of apples. 381

381

And so watch what happens when we now import this cart 382

382

and to log it to the console. 383

383

So, actually let's do that here. 384

384

So I mentioned we should not mix them, 385

385

but now just to make this work, we actually need to. 386

386

So we're mixing a Default Export and a Named Export, 387

387

but nevermind. 388

388

Okay? 389

389

So everything is added to the cart, 390

390

and now let's lock the cart, and see what happens. 391

391

So here we do not see that empty object, 392

392

that we export, but instead we have this array 393

393

with the objects that we just added to the cart, 394

394

by calling the add function here. 395

395

And so that proves that this import here, 396

396

is in fact, not simply a copy of the value, 397

397

that we exported here. 398

398

Right? 399

399

Because if it was, 400

400

then here we would simply get debt MTRA, 401

401

Right? 402

402

Because that's what this cart variable looked 403

403

like by the time we exported it. 404

404

But, as I mentioned in the last lecture, 405

405

it is not simply a copy, 406

406

it is a life connection. 407

407

And as we call function, 408

408

that we called as in the other module, 409

409

we keep pushing objects to that array. 410

410

So we are mutating that array here, 411

411

and so then here of course, 412

412

we see that manipulating the array, in the console, 413

413

as we locked the cart here. 414

414

And so they are in fact, 415

415

the exact same object behind the scenes, basically. 416

416

So one more time, repeat it with me, 417

417

imports are not copies of the export. 418

418

They are instead like a live connection, 419

419

and so what that means is that I point to the same place 420

420

in memory, 421

421

because again, otherwise, if it was a copy 422

422

then here, we would not get anything in the array. 423

423

And so keep this in mind, 424

424

when you write your own programs 425

425

because this can of course leads to bugs, 426

426

if you don't know what you're doing, 427

427

and if you don't know that this is how it actually works. 428

428

All right? 429

429

And so with this, we actually finished this video 430

430

which was a pretty important one, 431

431

because this is the foundation 432

432

of how we organize a modern JavaScript code base. 433

433

So make sure to review this lecture thoroughly, 434

434

and I would actually like you to play 435

435

around a little bit on your own, 436

436

with exporting and importing some more values 437

437

like we just did here. 438

438

And after that, I see you then in the next video.