1
00:00:01,767 --> 00:00:04,710
Now certain operations, like reading a file,

2
00:00:04,710 --> 00:00:06,100
or talking to a database,

3
00:00:06,100 --> 00:00:09,220
are typically solved with asynchronous code,

4
00:00:09,220 --> 00:00:10,630
and very often, therefore,

5
00:00:10,630 --> 00:00:13,550
with callback functions like this.

6
00:00:13,550 --> 00:00:17,000
Now sometimes you have multiple asynchronous tasks

7
00:00:17,000 --> 00:00:18,570
that depend on each other.

8
00:00:18,570 --> 00:00:19,403
For example,

9
00:00:19,403 --> 00:00:21,570
we could be reading some file content there.

10
00:00:21,570 --> 00:00:25,800
And then in there we want to start another async task

11
00:00:25,800 --> 00:00:29,600
that sends the data to a database.

12
00:00:29,600 --> 00:00:31,790
So then we would have an async task

13
00:00:31,790 --> 00:00:35,010
that's started from inside this callback function,

14
00:00:35,010 --> 00:00:37,245
once this async task finished.

15
00:00:37,245 --> 00:00:41,560
Now, whilst we don't know yet how to talk to a database,

16
00:00:41,560 --> 00:00:44,640
we'll dive into that in the next course sections,

17
00:00:44,640 --> 00:00:46,180
I can already tell you

18
00:00:46,180 --> 00:00:49,930
that since that would be another async task,

19
00:00:49,930 --> 00:00:53,080
we would have a never callback function in the end,

20
00:00:53,080 --> 00:00:56,508
that would be executed once that second async task,

21
00:00:56,508 --> 00:00:59,710
talking to a database, is done.

22
00:00:59,710 --> 00:01:03,306
And the more async tasks you have to depend on each other,

23
00:01:03,306 --> 00:01:08,050
the more callback functions inside of callback functions

24
00:01:08,050 --> 00:01:10,100
you might have at the end.

25
00:01:10,100 --> 00:01:11,300
And that's something

26
00:01:11,300 --> 00:01:14,760
which is sometimes referred to as callback. Hell,

27
00:01:14,760 --> 00:01:18,067
because it can make your code a bit hard to read,

28
00:01:18,067 --> 00:01:22,650
if you start adding more code inside of a callback function,

29
00:01:22,650 --> 00:01:24,920
that then internally again,

30
00:01:24,920 --> 00:01:27,495
relies on a callback functio,

31
00:01:27,495 --> 00:01:31,140
because you have more and more indentation to the right,

32
00:01:31,140 --> 00:01:33,210
and more and more callback functions

33
00:01:33,210 --> 00:01:35,193
that are nested into each other.

34
00:01:36,080 --> 00:01:38,999
That's why we have an alternative way

35
00:01:38,999 --> 00:01:41,630
for dealing with asynchronous code,

36
00:01:41,630 --> 00:01:45,170
which is supported by a lot of built in packages,

37
00:01:45,170 --> 00:01:47,080
and third-party packages.

38
00:01:47,080 --> 00:01:51,260
Specifically, I'm talking about a concept called promises.

39
00:01:51,260 --> 00:01:53,320
Now what's a promise?

40
00:01:53,320 --> 00:01:54,960
Well, in real life,

41
00:01:54,960 --> 00:01:57,224
a promise is if I tell you

42
00:01:57,224 --> 00:02:01,220
that I will give you back the money you borrowed me,

43
00:02:01,220 --> 00:02:04,198
I give you the promise of giving you back the money

44
00:02:04,198 --> 00:02:07,610
you gave me, in the future.

45
00:02:07,610 --> 00:02:10,470
It's basically an asynchronous task, right?

46
00:02:10,470 --> 00:02:11,415
You give me money today.

47
00:02:11,415 --> 00:02:14,916
I returned that money to you in the future.

48
00:02:14,916 --> 00:02:18,200
So the operation starts instantly.

49
00:02:18,200 --> 00:02:19,430
You give me the money.

50
00:02:19,430 --> 00:02:21,290
But the result of the operation,

51
00:02:21,290 --> 00:02:22,840
that I return you to money,

52
00:02:22,840 --> 00:02:24,430
occurs in the future.

53
00:02:24,430 --> 00:02:26,143
And I promise to do that.

54
00:02:26,143 --> 00:02:29,415
In JavaScript, we have the same concept.

55
00:02:29,415 --> 00:02:32,810
With a callback, it's pretty much all the same,

56
00:02:32,810 --> 00:02:35,600
but it's a callback function which we're using here.

57
00:02:35,600 --> 00:02:38,200
It's one way of dealing with async code,

58
00:02:38,200 --> 00:02:40,310
which has potential downsides,

59
00:02:40,310 --> 00:02:42,193
as mentioned a couple of seconds ago.

60
00:02:43,250 --> 00:02:47,169
Now we can also require this file system package,

61
00:02:47,169 --> 00:02:52,013
by requiring fs slash promises.

62
00:02:53,410 --> 00:02:54,880
Now this might look weird,

63
00:02:54,880 --> 00:02:57,280
but that's another built-in package.

64
00:02:57,280 --> 00:03:00,830
And that simply gives us promise versions

65
00:03:00,830 --> 00:03:03,083
off file system methods.

66
00:03:03,990 --> 00:03:06,760
I'll comment out this callback version for that.

67
00:03:06,760 --> 00:03:11,172
And instead again, use fs, and again use read file.

68
00:03:11,172 --> 00:03:15,950
Now read file still wants to know where the file is.

69
00:03:15,950 --> 00:03:19,030
So we still pass that path to read file,

70
00:03:19,030 --> 00:03:22,619
but it now does not want a callback anymore.

71
00:03:22,619 --> 00:03:27,116
Instead, read file now returns a so-called promise,

72
00:03:27,116 --> 00:03:29,489
which is simply a kind of object

73
00:03:29,489 --> 00:03:34,489
that's baked into browser side and Node JS JavaScript.

74
00:03:34,950 --> 00:03:36,720
It's a standardized object

75
00:03:36,720 --> 00:03:39,800
with certain properties and methods,

76
00:03:39,800 --> 00:03:44,700
and specifically it has a then method, which we can execute.

77
00:03:44,700 --> 00:03:48,630
So the result of calling read file is a promise,

78
00:03:48,630 --> 00:03:53,630
because I'm getting fs from that fs promises package.

79
00:03:54,980 --> 00:03:57,710
And since the result of read file is a promise,

80
00:03:57,710 --> 00:04:00,360
I can call then on that promise,

81
00:04:00,360 --> 00:04:02,600
because promises are objects

82
00:04:02,600 --> 00:04:05,300
that always have a then method,

83
00:04:05,300 --> 00:04:07,450
simply because the promise blueprint,

84
00:04:07,450 --> 00:04:09,370
which is baked into JavaScript,

85
00:04:09,370 --> 00:04:13,103
defines such a then method in that blueprint.

86
00:04:14,130 --> 00:04:16,510
The then method then, again,

87
00:04:16,510 --> 00:04:19,350
takes a function, an anonymous function,

88
00:04:19,350 --> 00:04:21,550
or a predefined function,

89
00:04:21,550 --> 00:04:24,160
which might get some value,

90
00:04:24,160 --> 00:04:26,630
depending on how that promise is configured.

91
00:04:26,630 --> 00:04:28,690
In case of that read false promise,

92
00:04:28,690 --> 00:04:32,565
we'll get the file data as a value.

93
00:04:32,565 --> 00:04:35,330
So this function, which we passed to then,

94
00:04:35,330 --> 00:04:38,350
is again, executed automatically for us,

95
00:04:38,350 --> 00:04:41,580
by JavaScript and read file,

96
00:04:41,580 --> 00:04:43,483
once reading the file is done.

97
00:04:44,420 --> 00:04:46,610
And the line after read file, by the way,

98
00:04:46,610 --> 00:04:48,980
is also still executed immediately

99
00:04:48,980 --> 00:04:51,660
after this process was started.

100
00:04:51,660 --> 00:04:53,113
That doesn't change.

101
00:04:53,960 --> 00:04:57,650
Now, we just don't pass our callback function to read file,

102
00:04:57,650 --> 00:05:00,933
but instead to then, which will call on read file.

103
00:05:02,050 --> 00:05:04,520
And in there we can now, again, console log,

104
00:05:04,520 --> 00:05:05,840
as I did it before.

105
00:05:05,840 --> 00:05:10,773
So console log the file data, and file parsing done.

106
00:05:12,840 --> 00:05:17,650
Now, if I saved this and I execute async JS,

107
00:05:17,650 --> 00:05:19,930
you'll see it works as before.

108
00:05:19,930 --> 00:05:22,918
We get the same output, and we get it in the same order.

109
00:05:22,918 --> 00:05:25,430
Hi there is output first,

110
00:05:25,430 --> 00:05:26,580
because this line of code

111
00:05:26,580 --> 00:05:30,170
is executed immediately after read file was started.

112
00:05:30,170 --> 00:05:32,510
And then once the file parsing is done,

113
00:05:32,510 --> 00:05:35,820
that content here, or that code executes,

114
00:05:35,820 --> 00:05:37,653
and therefore we get this output,

115
00:05:39,090 --> 00:05:41,850
but what's now the advantage of using promises?

116
00:05:41,850 --> 00:05:43,286
In the end it's almost the same,

117
00:05:43,286 --> 00:05:46,340
just to be half this extra then method.

118
00:05:46,340 --> 00:05:47,173
Well,

119
00:05:47,173 --> 00:05:48,770
the advantage is that this allows you to write code

120
00:05:48,770 --> 00:05:50,828
in a more structured way.

121
00:05:50,828 --> 00:05:52,170
If you, for example,

122
00:05:52,170 --> 00:05:54,890
would have another asynchronous operation

123
00:05:54,890 --> 00:05:58,572
that you want to trigger from inside this callback function,

124
00:05:58,572 --> 00:06:03,507
you can return another async operation.

125
00:06:03,507 --> 00:06:07,150
That's just some dummy code here, of course.

126
00:06:07,150 --> 00:06:08,611
And then if you return,

127
00:06:08,611 --> 00:06:12,550
then you could add another then block here

128
00:06:12,550 --> 00:06:15,082
with another anonymous function

129
00:06:15,082 --> 00:06:20,082
that will execute once that async operation finished.

130
00:06:20,120 --> 00:06:21,810
And then you can also write this code

131
00:06:21,810 --> 00:06:24,040
in a more structured way like this.

132
00:06:24,040 --> 00:06:28,300
And that will lead to a highly readable promise chain,

133
00:06:28,300 --> 00:06:29,530
as it's called,

134
00:06:29,530 --> 00:06:32,546
where you can combine multiple asynchronous operations

135
00:06:32,546 --> 00:06:37,303
into a clearly structured line of operations like that.

136
00:06:38,910 --> 00:06:39,743
It, again,

137
00:06:39,743 --> 00:06:42,580
doesn't matter too much to our trivial example here,

138
00:06:42,580 --> 00:06:46,280
but promises are a very modern and popular way

139
00:06:46,280 --> 00:06:48,840
of handling async operations,

140
00:06:48,840 --> 00:06:51,610
simply because they allow you to write code

141
00:06:51,610 --> 00:06:53,920
in a more structured way.

142
00:06:53,920 --> 00:06:57,320
And using promises often is an alternative

143
00:06:57,320 --> 00:06:59,340
to using callback functions,

144
00:06:59,340 --> 00:07:02,640
but it will always depend on the package you're using,

145
00:07:02,640 --> 00:07:06,490
whether they offer you both callbacks and promises,

146
00:07:06,490 --> 00:07:09,740
or adjust callbacks, or just promises.

147
00:07:09,740 --> 00:07:11,630
Here, I want to show you both,

148
00:07:11,630 --> 00:07:15,260
and here you see how you can read a file with a callback,

149
00:07:15,260 --> 00:07:17,143
or by using a promise.