1
00:00:00,840 --> 00:00:02,820
Luckily for us, we no longer have to rely

2
00:00:02,820 --> 00:00:05,390
on weird syntax or kludgy workarounds to

3
00:00:05,390 --> 00:00:08,770
build clean, standalone bundles of code.

4
00:00:08,770 --> 00:00:10,290
ES6 has introduced a mechanism that allows

5
00:00:10,290 --> 00:00:12,860
us to build modules natively in

6
00:00:12,860 --> 00:00:16,040
JavaScript. Now we do that with two new

7
00:00:16,040 --> 00:00:19,260
keywords, import and export. Export is the

8
00:00:19,260 --> 00:00:21,800
keyword we use to create the module, and

9
00:00:21,800 --> 00:00:23,590
then import is going to be the keyword we

10
00:00:23,590 --> 00:00:27,020
used to consume that module. So here's a

11
00:00:27,020 --> 00:00:29,100
hint: that's going to be module 3 and

12
00:00:29,100 --> 00:00:33,440
module 4, respectively, of this course.

13
00:00:33,440 --> 00:00:35,760
Now, the import and export keywords allow

14
00:00:35,760 --> 00:00:38,340
us to encapsulate our code into a single

15
00:00:38,340 --> 00:00:40,540
protected entity. Basically, that means we

16
00:00:40,540 --> 00:00:43,200
get to create this little bundle of code

17
00:00:43,200 --> 00:00:44,780
that we can package up and then only

18
00:00:44,780 --> 00:00:47,580
expose pieces out to help guide

19
00:00:47,580 --> 00:00:49,370
understanding about what this chunk of

20
00:00:49,370 --> 00:00:52,150
code can do and utilize that chunk of code

21
00:00:52,150 --> 00:00:56,320
in a meaningful way. Now then that allows

22
00:00:56,320 --> 00:00:58,765
us to control access to the code as well.

23
00:00:58,765 --> 00:01:01,130
We saw in that last clip, just putting

24
00:01:01,130 --> 00:01:02,880
code in a script file doesn't prevent you

25
00:01:02,880 --> 00:01:05,090
from accessing individual members of that

26
00:01:05,090 --> 00:01:06,800
code, and we don't really want to allow

27
00:01:06,800 --> 00:01:08,890
that, and modules are going to allow us to

28
00:01:08,890 --> 00:01:11,970
protect our code so that people who are

29
00:01:11,970 --> 00:01:14,780
consuming our code can't necessarily go in

30
00:01:14,780 --> 00:01:17,430
and make changes to what's going on. And

31
00:01:17,430 --> 00:01:19,460
last but not least, we can reference our

32
00:01:19,460 --> 00:01:22,270
own dependencies internally. Now what that

33
00:01:22,270 --> 00:01:24,670
means is that if a piece of code needs to

34
00:01:24,670 --> 00:01:27,110
reference like a Lodash function or

35
00:01:27,110 --> 00:01:29,040
something similar to that, I don't have to

36
00:01:29,040 --> 00:01:31,330
import that globally into the whole

37
00:01:31,330 --> 00:01:33,960
application. I can just use it in my one

38
00:01:33,960 --> 00:01:37,400
module to keep scope to a to a minimum.

39
00:01:37,400 --> 00:01:39,430
Now, before we dive into what this looks

40
00:01:39,430 --> 00:01:42,470
like in practice, let's take a quick look

41
00:01:42,470 --> 00:01:45,580
about some of the considerations you need

42
00:01:45,580 --> 00:01:48,850
to think about as we go through and work

43
00:01:48,850 --> 00:01:50,925
through modules because some of these are

44
00:01:50,925 --> 00:01:52,370
pretty different than what you might

45
00:01:52,370 --> 00:01:55,920
expect or what you're used to. First,

46
00:01:55,920 --> 00:01:58,480
modules are singletons, and what that

47
00:01:58,480 --> 00:02:00,560
means is when you export something from a

48
00:02:00,560 --> 00:02:03,370
module, every other thing that imports

49
00:02:03,370 --> 00:02:06,240
that module gets the same instance of it.

50
00:02:06,240 --> 00:02:07,850
And now that can be super helpful out of

51
00:02:07,850 --> 00:02:10,160
the gate, but can cause some oddities if

52
00:02:10,160 --> 00:02:12,100
you don't expect it. Just keep that in

53
00:02:12,100 --> 00:02:15,020
mind. You're using the same thing

54
00:02:15,020 --> 00:02:18,500
everywhere that you import a module. Now,

55
00:02:18,500 --> 00:02:21,130
along those lines, the individual items

56
00:02:21,130 --> 00:02:23,580
exported are not just values, but they're

57
00:02:23,580 --> 00:02:26,960
pointers or bindings to the properties.

58
00:02:26,960 --> 00:02:29,150
Now we'll dig a little bit more into that

59
00:02:29,150 --> 00:02:31,290
a little bit later, but just know that if

60
00:02:31,290 --> 00:02:33,720
something is exported and then changed, it

61
00:02:33,720 --> 00:02:38,977
changes everywhere. Also, once you define

62
00:02:38,977 --> 00:02:40,390
what's being exposed through an export,

63
00:02:40,390 --> 00:02:43,620
you can't change it later at run time.

64
00:02:43,620 --> 00:02:46,390
Once it's loaded, it stays how it is, and

65
00:02:46,390 --> 00:02:48,120
that can be a little weird in JavaScript

66
00:02:48,120 --> 00:02:50,020
where you can normally change anything at

67
00:02:50,020 --> 00:02:52,120
run time, like nothing is static in

68
00:02:52,120 --> 00:02:54,250
JavaScript, well, except the things you're

69
00:02:54,250 --> 00:02:56,190
exporting out of a module, those are

70
00:02:56,190 --> 00:03:01,370
static. We also have one module per file.

71
00:03:01,370 --> 00:03:04,350
Modules are filed-based, and if you're

72
00:03:04,350 --> 00:03:05,990
loading multiple modules into your

73
00:03:05,990 --> 00:03:08,110
browser, you're going to request those

74
00:03:08,110 --> 00:03:12,460
files one at a time over HTTP. And let's

75
00:03:12,460 --> 00:03:14,030
talk about that for just a second because

76
00:03:14,030 --> 00:03:16,080
that can be a little disconcerting. Now,

77
00:03:16,080 --> 00:03:19,080
when we get to HTTP/2, that'll make things

78
00:03:19,080 --> 00:03:20,650
a little bit more palatable because that's

79
00:03:20,650 --> 00:03:22,170
going to hold up in a socket connection,

80
00:03:22,170 --> 00:03:24,250
you load multiple files, and that'll be

81
00:03:24,250 --> 00:03:27,230
fine, but in the meantime when we get

82
00:03:27,230 --> 00:03:29,430
through modules, normally what we're going

83
00:03:29,430 --> 00:03:32,310
to do is use a module bundler like webpack

84
00:03:32,310 --> 00:03:34,300
or something like that to consolidate them

85
00:03:34,300 --> 00:03:36,350
all down into one file. Now, we're not

86
00:03:36,350 --> 00:03:39,090
going to cover specifically the use of

87
00:03:39,090 --> 00:03:40,250
webpack or something like that in this

88
00:03:40,250 --> 00:03:42,690
course. This is just to get us an

89
00:03:42,690 --> 00:03:44,550
understanding of what modules are and how

90
00:03:44,550 --> 00:03:46,860
to use them, and then depending on your

91
00:03:46,860 --> 00:03:52,000
implementation, you may pick a module bundler that's going to work for you.

