1
00:00:06,480 --> 00:00:09,780
- ECMAScript6 came out in 2015

2
00:00:09,780 --> 00:00:13,500
and it completely revolutionized
the JavaScript language.

3
00:00:13,500 --> 00:00:15,810
For example, it introduced full support

4
00:00:15,810 --> 00:00:17,040
for object-oriented programming.

5
00:00:17,040 --> 00:00:20,280
At last, we had a proper
way to define classes

6
00:00:20,280 --> 00:00:22,800
and to create objects
and to use inheritance.

7
00:00:22,800 --> 00:00:26,370
So I'm not gonna go into the
theory of OO programming here.

8
00:00:26,370 --> 00:00:29,430
I'm sure that you are
familiar enough with it.

9
00:00:29,430 --> 00:00:31,650
So what we'll do instead is
we'll just review the syntax.

10
00:00:31,650 --> 00:00:34,380
In this section, I'm
going to review the syntax

11
00:00:34,380 --> 00:00:38,730
for defining classes and
using objects in ECMAScript 6.

12
00:00:38,730 --> 00:00:40,830
And then in the next section,

13
00:00:40,830 --> 00:00:44,280
we'll see how to test classes using Jest.

14
00:00:44,280 --> 00:00:48,450
So first of all, how do you
define a class in JavaScript?

15
00:00:48,450 --> 00:00:51,210
It looks like this. Class is a keyword

16
00:00:51,210 --> 00:00:53,160
and class names usually
have a capital letter

17
00:00:53,160 --> 00:00:55,110
like Account, bank account.

18
00:00:55,110 --> 00:00:56,580
Constructor is a keyword

19
00:00:56,580 --> 00:00:58,680
and it's the initialization function.

20
00:00:58,680 --> 00:01:00,240
When you create the new account object,

21
00:01:00,240 --> 00:01:02,430
it'll call the constructor, and you pass

22
00:01:02,430 --> 00:01:04,860
in parameters to initialize the object

23
00:01:04,860 --> 00:01:06,450
with whatever fields you're interested in.

24
00:01:06,450 --> 00:01:09,180
So I pass in my name, Andy,

25
00:01:09,180 --> 00:01:11,160
maybe in the balance a million,

26
00:01:11,160 --> 00:01:13,320
and it stores the name in this object.

27
00:01:13,320 --> 00:01:14,550
This is a keyword.

28
00:01:14,550 --> 00:01:17,970
It identifies the current
object that we are constructing.

29
00:01:17,970 --> 00:01:21,180
And whenever you're accessing
members in a, in a class,

30
00:01:21,180 --> 00:01:23,910
you have to say this, inside this object,

31
00:01:23,910 --> 00:01:25,740
it now has a properly good name,

32
00:01:25,740 --> 00:01:27,930
which receives the incoming parameter.

33
00:01:27,930 --> 00:01:29,130
And this, this object

34
00:01:29,130 --> 00:01:31,560
this bank account object,
also has a balance,

35
00:01:31,560 --> 00:01:34,500
which receives the incoming
balance parameter like so.

36
00:01:34,500 --> 00:01:38,220
I can deposit money into
this balance for the object.

37
00:01:38,220 --> 00:01:40,940
I can withdraw money from
this balance in the object.

38
00:01:40,940 --> 00:01:43,590
So that's a very simple class definition.

39
00:01:43,590 --> 00:01:46,500
Once you've defined a class,
you can then create an object.

40
00:01:46,500 --> 00:01:48,780
An object is an instance of a class.

41
00:01:48,780 --> 00:01:51,600
You say new, and then you
give it the name of the class,

42
00:01:51,600 --> 00:01:53,357
and this will create the new object

43
00:01:53,357 --> 00:01:54,840
and it'll call the constructor.

44
00:01:54,840 --> 00:01:56,850
And the constructor will
add a name property,

45
00:01:56,850 --> 00:01:58,080
set it at Peter,

46
00:01:58,080 --> 00:02:00,990
and add a balanced property,
set a set of 5,000,

47
00:02:00,990 --> 00:02:03,690
and you get back a
pointer. Acc1 is appointed

48
00:02:03,690 --> 00:02:06,360
to the object that you've just created.

49
00:02:06,360 --> 00:02:08,700
And upon that object,
you can invoke methods.

50
00:02:08,700 --> 00:02:11,190
On this object, invoke the deposit method.

51
00:02:11,190 --> 00:02:15,150
Peter now has a balance of 5,200 pounds,

52
00:02:15,150 --> 00:02:17,880
and you can withdraw money as well.

53
00:02:17,880 --> 00:02:20,340
Notice you can also access data.

54
00:02:20,340 --> 00:02:22,110
That's interesting. If you've done C sharp

55
00:02:22,110 --> 00:02:24,780
or Java or C++, you'd be surprised

56
00:02:24,780 --> 00:02:27,030
by that because in other,
in those languages,

57
00:02:27,030 --> 00:02:30,900
data is private, but in
JavaScript, it has a simpler model.

58
00:02:30,900 --> 00:02:33,030
Basically everything in a class is public,

59
00:02:33,030 --> 00:02:35,370
even the data, which might go

60
00:02:35,370 --> 00:02:37,800
against the grain as an OO programmer.

61
00:02:37,800 --> 00:02:40,020
But you know, that's
how it is in JavaScript.

62
00:02:40,020 --> 00:02:41,643
It's a simplified syntax.

63
00:02:42,600 --> 00:02:47,600
Okay. So just to kind of
summarize classes in ECMAScript 6,

64
00:02:48,240 --> 00:02:50,790
modern JavaScript, compared
to other languages,

65
00:02:50,790 --> 00:02:52,440
there are some differences.

66
00:02:52,440 --> 00:02:53,880
You don't define members

67
00:02:53,880 --> 00:02:57,120
at the top of the class in ECMAScript.

68
00:02:57,120 --> 00:03:00,480
Instead you add properties
within the constructor.

69
00:03:00,480 --> 00:03:03,690
When the object is created, it
has no properties initially.

70
00:03:03,690 --> 00:03:05,280
When the constructor is invoked,

71
00:03:05,280 --> 00:03:08,430
the constructor dynamically
adds properties to the object.

72
00:03:08,430 --> 00:03:10,470
As the object is being constructed,

73
00:03:10,470 --> 00:03:12,780
properties get added to it dynamically.

74
00:03:12,780 --> 00:03:14,880
In fact, you can add
properties to an object

75
00:03:14,880 --> 00:03:18,090
even afterwards. An object,
essentially, in JavaScript,

76
00:03:18,090 --> 00:03:20,280
is more like a map with properties

77
00:03:20,280 --> 00:03:22,530
that you can add and remove dynamically

78
00:03:22,530 --> 00:03:25,740
because JavaScript is a
dynamic language, which is

79
00:03:25,740 --> 00:03:28,845
has its plus points and its
negative points as well.

80
00:03:28,845 --> 00:03:32,040
You don't define anything
as public or private.

81
00:03:32,040 --> 00:03:34,170
JavaScript doesn't have
public and private.

82
00:03:34,170 --> 00:03:36,900
Basically everything in a class is public.

83
00:03:36,900 --> 00:03:38,760
And that does take a
little getting used to

84
00:03:38,760 --> 00:03:42,060
if you're coming from
a stronger OO language,

85
00:03:42,060 --> 00:03:45,030
like almost any other language
you can think of, actually.

86
00:03:45,030 --> 00:03:49,740
So if you're familiar
with classes or how to

87
00:03:49,740 --> 00:03:54,420
emulate classes before
ECMAScript 6, in ECMAScript 5,

88
00:03:54,420 --> 00:03:56,610
you would define a constructor function.

89
00:03:56,610 --> 00:03:59,910
And the constructor function
would behave like a class

90
00:03:59,910 --> 00:04:02,820
and it would have prototype
objects to define methods.

91
00:04:02,820 --> 00:04:06,210
So if you're familiar
with how ECMAScript 5

92
00:04:06,210 --> 00:04:09,720
used to emulate object
orientation, underneath the covers,

93
00:04:09,720 --> 00:04:12,720
ECMAScript 6 gets
converted into that syntax.

94
00:04:12,720 --> 00:04:15,030
So when you define a
class in ECMAScript 6,

95
00:04:15,030 --> 00:04:17,940
it actually gets converted
into an ECMA Script 5

96
00:04:17,940 --> 00:04:21,420
constructor function and
with a prototype object

97
00:04:21,420 --> 00:04:22,950
that houses the methods.

98
00:04:22,950 --> 00:04:24,660
If you've never seen this before,

99
00:04:24,660 --> 00:04:25,860
then you can ignore what I've just said

100
00:04:25,860 --> 00:04:27,270
for the last 30 seconds.

101
00:04:27,270 --> 00:04:28,860
You don't need to know how it works.

102
00:04:28,860 --> 00:04:31,020
You can just use the syntax.

103
00:04:31,020 --> 00:04:32,730
So what we're gonna do now
is we're gonna have a look

104
00:04:32,730 --> 00:04:35,880
at a more realistic
example of classes that

105
00:04:35,880 --> 00:04:38,070
actually do something useful.

106
00:04:38,070 --> 00:04:40,500
Have a look in this
folder, Mocking Classes,

107
00:04:40,500 --> 00:04:44,420
IntroES6Classes, have
a look in there. Okay?

108
00:04:44,420 --> 00:04:48,153
So that's the folder, Mocking
Classes, IntroES6Classes.

109
00:04:48,990 --> 00:04:51,270
Later on, in later sections,

110
00:04:51,270 --> 00:04:55,860
we're gonna see how to mock
and test those classes,

111
00:04:55,860 --> 00:04:58,710
but let's just look at
the basic syntax for now.

112
00:04:58,710 --> 00:05:00,963
If you open that folder in a code editor,

113
00:05:01,890 --> 00:05:03,480
it looks like this.

114
00:05:03,480 --> 00:05:05,910
And what you'll find is
I've defined two classes.

115
00:05:05,910 --> 00:05:10,680
I define a class rest
Client and product Manager.

116
00:05:10,680 --> 00:05:11,513
So there we go.

117
00:05:11,513 --> 00:05:16,260
We have a rest Client class,
which calls a rest service,

118
00:05:16,260 --> 00:05:18,750
and a product Manager class, which collect

119
00:05:18,750 --> 00:05:21,030
contains a collection of products.

120
00:05:21,030 --> 00:05:23,790
It allows me to add
products and remove products

121
00:05:23,790 --> 00:05:26,250
and calculate the average cost of products

122
00:05:26,250 --> 00:05:27,270
and that kind of thing.

123
00:05:27,270 --> 00:05:29,220
So let's take a look at these classes now

124
00:05:29,220 --> 00:05:31,140
and get a feel for the syntax.

125
00:05:31,140 --> 00:05:33,510
We'll have a look at the
rest Client class first.

126
00:05:33,510 --> 00:05:37,170
So rest Client is in
here, and what can I say?

127
00:05:37,170 --> 00:05:38,850
Well, first of all, it is going to be,

128
00:05:38,850 --> 00:05:40,260
this is gonna be in JavaScript.

129
00:05:40,260 --> 00:05:42,390
And the idea is that
this class is going to

130
00:05:42,390 --> 00:05:45,840
encapsulate calls to
a remote rest service.

131
00:05:45,840 --> 00:05:47,730
So I'm gonna use Axis.

132
00:05:47,730 --> 00:05:51,390
Axis is quite a popular library
for call-in rest services.

133
00:05:51,390 --> 00:05:53,580
So, and it's a standard library as well.

134
00:05:53,580 --> 00:05:58,580
In my package.json, I include
the dependency for Axis,

135
00:05:59,190 --> 00:06:02,133
so I can actually make
Axis calls in my code.

136
00:06:03,510 --> 00:06:05,610
Okay, well that's the technical detail.

137
00:06:05,610 --> 00:06:08,790
In my rest Client, it's
going to encapsulate calls

138
00:06:08,790 --> 00:06:10,830
to a rest service.

139
00:06:10,830 --> 00:06:13,980
So the constructor, when you
create one of these objects,

140
00:06:13,980 --> 00:06:15,660
you have to pass in a base URL.

141
00:06:15,660 --> 00:06:19,590
What is the URL of the rest
service that you're gonna call?

142
00:06:19,590 --> 00:06:21,330
What's the base URL?

143
00:06:21,330 --> 00:06:24,210
And then I've got, I've
got a crowd interface.

144
00:06:24,210 --> 00:06:29,210
Basically this method, get All,
using Axis under the covers,

145
00:06:29,220 --> 00:06:32,310
It sends in a get request
to the remote URL.

146
00:06:32,310 --> 00:06:35,100
That's the URL that we
specified there on the server.

147
00:06:35,100 --> 00:06:37,350
That returns a promise object.

148
00:06:37,350 --> 00:06:38,970
Then the result comes back.

149
00:06:38,970 --> 00:06:40,020
When the result comes back,

150
00:06:40,020 --> 00:06:42,060
we take the http response,

151
00:06:42,060 --> 00:06:45,840
which is the entire http
response body from the server,

152
00:06:45,840 --> 00:06:50,070
and from there, we extract
the data in the http body

153
00:06:50,070 --> 00:06:52,800
as probably json, and that will extract

154
00:06:52,800 --> 00:06:54,090
the data and return it back.

155
00:06:54,090 --> 00:06:56,970
What this function actually
returns is a promise,

156
00:06:56,970 --> 00:07:00,450
a promise that this data
will be available when

157
00:07:00,450 --> 00:07:01,950
the rest service is complete.

158
00:07:01,950 --> 00:07:03,390
The rest service might take a second,

159
00:07:03,390 --> 00:07:05,850
or two seconds, or three seconds.

160
00:07:05,850 --> 00:07:08,640
The promise object will
eventually be resolved

161
00:07:08,640 --> 00:07:11,130
with the data back from the server.

162
00:07:11,130 --> 00:07:12,810
That's to get all products.

163
00:07:12,810 --> 00:07:15,840
You can get one product
with an ID parameter.

164
00:07:15,840 --> 00:07:17,670
So what it does, it uses, this is

165
00:07:17,670 --> 00:07:19,923
an ECMAScript interpolated string.

166
00:07:20,880 --> 00:07:25,500
It embeds the URL and
it follows it by the ID.

167
00:07:25,500 --> 00:07:27,540
So it'd be something like

168
00:07:27,540 --> 00:07:32,540
example.com/products/1234, the ID.

169
00:07:32,970 --> 00:07:35,969
And presumably that would
return back one product

170
00:07:35,969 --> 00:07:39,750
as a promise. When that
promise has been resolved,

171
00:07:39,750 --> 00:07:42,930
take the http response, the whole body,

172
00:07:42,930 --> 00:07:46,173
and extract the payload, the http,

173
00:07:47,250 --> 00:07:50,400
the data from the http response.

174
00:07:50,400 --> 00:07:53,580
And this promise gets returned back to,

175
00:07:53,580 --> 00:07:54,540
to my user interface.

176
00:07:54,540 --> 00:07:57,990
So typically you would
call, this low level class,

177
00:07:57,990 --> 00:07:59,940
you would call it from
the user interface layer,

178
00:07:59,940 --> 00:08:02,040
maybe, in your code.

179
00:08:02,040 --> 00:08:06,090
It has an update method,
and the update method is

180
00:08:06,090 --> 00:08:10,410
takes an ID representing
an existing product.

181
00:08:10,410 --> 00:08:13,380
And, and basically the
new data for the product.

182
00:08:13,380 --> 00:08:14,880
It's like a replacement.

183
00:08:14,880 --> 00:08:15,840
It's like when you have, if you have,

184
00:08:15,840 --> 00:08:17,640
imagine you have a row in the database,

185
00:08:17,640 --> 00:08:20,070
it would completely change that row

186
00:08:20,070 --> 00:08:22,620
with a new set of data
for an existing row.

187
00:08:22,620 --> 00:08:26,370
So you give it the ID for
the products in the database,

188
00:08:26,370 --> 00:08:27,900
maybe the existing product,

189
00:08:27,900 --> 00:08:30,150
here's the new data for that product.

190
00:08:30,150 --> 00:08:33,030
So we call Axis as a put
function, which is an update,

191
00:08:33,030 --> 00:08:35,823
or rather, it's like a
whole object replacement.

192
00:08:36,900 --> 00:08:37,740
That's what it does.

193
00:08:37,740 --> 00:08:41,070
It sends in a put request to the URL

194
00:08:41,070 --> 00:08:45,420
like example.com/id 1, 2,
3, 4, whatever the ID is.

195
00:08:45,420 --> 00:08:48,630
And plus, in the body,
it sends in the new data.

196
00:08:48,630 --> 00:08:50,460
When you send, when
you have a put request,

197
00:08:50,460 --> 00:08:55,460
the URL specifies the ID of the
item to change, and the body

198
00:08:55,770 --> 00:08:59,130
of the http message is the new
data that you're gonna send

199
00:08:59,130 --> 00:09:02,133
to the server in the
http respo- request body.

200
00:09:03,090 --> 00:09:06,480
And then finally, delete,
you just need the ID,

201
00:09:06,480 --> 00:09:08,160
and you send in a delete request.

202
00:09:08,160 --> 00:09:10,260
Okay? And presumably at the server,

203
00:09:10,260 --> 00:09:14,160
that'll delete the item
from, from a database, maybe.

204
00:09:14,160 --> 00:09:18,090
But in terms of JavaScript class index,

205
00:09:18,090 --> 00:09:19,590
it is quite a realistic example.

206
00:09:19,590 --> 00:09:24,480
It's a class, it has a
constructor to remember the URL,

207
00:09:24,480 --> 00:09:27,900
and it uses the URL in
various different places here.

208
00:09:27,900 --> 00:09:30,540
And then it has various
methods to provide a CRUD,

209
00:09:30,540 --> 00:09:33,960
to create, read, update, delete, API.

210
00:09:33,960 --> 00:09:35,400
That's one class.

211
00:09:35,400 --> 00:09:38,190
And then I've got another
class here, product Manager,

212
00:09:38,190 --> 00:09:40,170
which is a more kind of semantic class.

213
00:09:40,170 --> 00:09:42,210
This class here is quite low level,

214
00:09:42,210 --> 00:09:44,040
but the product Manager class is more

215
00:09:44,040 --> 00:09:46,110
at a higher level of being.

216
00:09:46,110 --> 00:09:48,900
So it also has a constructor,

217
00:09:48,900 --> 00:09:51,090
and it creates one of those objects,

218
00:09:51,090 --> 00:09:54,240
the object I've just shown
you, it creates one of those.

219
00:09:54,240 --> 00:09:55,830
It creates a rest Client object.

220
00:09:55,830 --> 00:09:56,967
It creates one of those.

221
00:09:56,967 --> 00:09:59,340
And it passes in a constructor parameter.

222
00:09:59,340 --> 00:10:02,730
This is the base URL that
the rest Client object ...

223
00:10:02,730 --> 00:10:07,730
Oh, by the way, RC is the,
is the rest Client module.

224
00:10:08,820 --> 00:10:11,610
Okay? So whenever, when you,
when you import a model,

225
00:10:11,610 --> 00:10:15,990
RC is like a prefix for
anything defined in there.

226
00:10:15,990 --> 00:10:20,460
So rc.restClient, it
says go to the RC module,

227
00:10:20,460 --> 00:10:21,930
which is this one.

228
00:10:21,930 --> 00:10:25,353
And in that module, you'll find
a class called rest Client.

229
00:10:27,630 --> 00:10:28,463
There we go. Okay.

230
00:10:28,463 --> 00:10:32,070
So the, basically the module
alias, and then the class

231
00:10:32,070 --> 00:10:35,880
inside that module, it
has a constructor, and we

232
00:10:35,880 --> 00:10:37,890
pass that parameter into the constructor.

233
00:10:37,890 --> 00:10:41,280
Obviously this is an artificial example.

234
00:10:41,280 --> 00:10:42,660
Oh, and then I've got a business method

235
00:10:42,660 --> 00:10:44,790
to get the stock account.

236
00:10:44,790 --> 00:10:49,790
So I take my rest Client
and I get All products.

237
00:10:50,970 --> 00:10:52,680
So presumably, in a real application,

238
00:10:52,680 --> 00:10:54,840
that would've gone back to the server,

239
00:10:54,840 --> 00:10:57,180
and that returns back a promise, a promise

240
00:10:57,180 --> 00:11:01,050
that will eventually be
resolved with all the products.

241
00:11:01,050 --> 00:11:04,290
So I say, well, when that
product has been resolved,

242
00:11:04,290 --> 00:11:06,630
when the rest service
has finally come back,

243
00:11:06,630 --> 00:11:09,810
I will have here an array of products.

244
00:11:09,810 --> 00:11:14,340
So what I do is I take
the products and I take

245
00:11:14,340 --> 00:11:16,860
That's a lasting array
of products, presumably.

246
00:11:16,860 --> 00:11:19,980
For each product, I call the map function.

247
00:11:19,980 --> 00:11:24,966
The array class in
JavaScript has a map method,

248
00:11:24,966 --> 00:11:28,530
and it'll basically
transform each product into

249
00:11:28,530 --> 00:11:29,880
just the stock level.

250
00:11:29,880 --> 00:11:32,760
Imagine the product class
had a stock property.

251
00:11:32,760 --> 00:11:35,910
How many items in stock for
that particular product?

252
00:11:35,910 --> 00:11:38,490
So I've taken my collection
of products, and I've

253
00:11:38,490 --> 00:11:40,920
converted it effectively
into collect, a collection

254
00:11:40,920 --> 00:11:42,690
of stock numbers.

255
00:11:42,690 --> 00:11:44,580
What I then do is I call
the reduce function.

256
00:11:44,580 --> 00:11:47,280
We've seen this before,
and the reduce function

257
00:11:47,280 --> 00:11:48,360
is quite clever.

258
00:11:48,360 --> 00:11:51,780
It basically rolls two
parameters into one.

259
00:11:51,780 --> 00:11:54,060
It takes the cumulative total,

260
00:11:54,060 --> 00:11:56,970
and then the next value
from this collection.

261
00:11:56,970 --> 00:11:59,670
Okay. So this basically is a
collection of stock levels.

262
00:11:59,670 --> 00:12:02,340
It'll pass the first
stock level into there.

263
00:12:02,340 --> 00:12:06,540
And the, the initial value
for the total is zero.

264
00:12:06,540 --> 00:12:08,130
When you call the reduced function,

265
00:12:08,130 --> 00:12:09,930
you pass in two parameters,

266
00:12:09,930 --> 00:12:14,930
a lambda that says how to
reduce two values into one.

267
00:12:16,110 --> 00:12:19,080
And the second parameter
is the, if you like, the,

268
00:12:19,080 --> 00:12:22,470
the initial value for your accumulator.

269
00:12:22,470 --> 00:12:25,413
So zero will be the initial
value for the total,

270
00:12:27,300 --> 00:12:28,680
for the first time of call.

271
00:12:28,680 --> 00:12:32,013
It'll then pass the first
product's stock into here.

272
00:12:32,970 --> 00:12:34,470
And it'll add the current total,

273
00:12:34,470 --> 00:12:38,520
which is zero, to the stock
level for the next product.

274
00:12:38,520 --> 00:12:41,760
And that value then gets passed
in to the next incarnation.

275
00:12:41,760 --> 00:12:44,670
It calls the function again
with the current total

276
00:12:44,670 --> 00:12:46,320
and the next product

277
00:12:46,320 --> 00:12:48,810
and it adds the next product to the total.

278
00:12:48,810 --> 00:12:51,060
And that running total
then gets passed in again

279
00:12:51,060 --> 00:12:53,280
into here, followed by the next product.

280
00:12:53,280 --> 00:12:57,210
So it kind of marches from left
to right, starting at zero.

281
00:12:57,210 --> 00:12:59,730
It'll accumulate the total stock.

282
00:12:59,730 --> 00:13:01,992
That basically gives me
the total stock level

283
00:13:01,992 --> 00:13:05,340
of products in my catalog.

284
00:13:05,340 --> 00:13:08,301
That's assuming that when
I called the rest service

285
00:13:08,301 --> 00:13:10,383
it resolved successfully.

286
00:13:11,460 --> 00:13:13,440
It could have failed. When
you call a rest service,

287
00:13:13,440 --> 00:13:16,050
it can fail for a number of reasons.

288
00:13:16,050 --> 00:13:20,250
So you, you should also
handle the catch possibility.

289
00:13:20,250 --> 00:13:22,230
In the catch possibility, we say, like,

290
00:13:22,230 --> 00:13:24,150
I've got some kind of error message.

291
00:13:24,150 --> 00:13:25,890
I don't really care
about the error message.

292
00:13:25,890 --> 00:13:28,473
All I'm going to do is
return the value zero.

293
00:13:29,520 --> 00:13:34,520
So this function will either
return the result of this,

294
00:13:34,650 --> 00:13:37,830
you know, accumulation of stock levels,

295
00:13:37,830 --> 00:13:41,103
or it'll return zero in
the case of an error.

296
00:13:42,540 --> 00:13:44,760
The second function is quite similar.

297
00:13:44,760 --> 00:13:47,640
Instead of getting the,
no, the cumulative total

298
00:13:47,640 --> 00:13:49,860
of how many items do I have in stock,

299
00:13:49,860 --> 00:13:52,770
it tells me the overall
value of all my items,

300
00:13:52,770 --> 00:13:56,970
by multiplying the stock level
for product by its price,

301
00:13:56,970 --> 00:13:59,100
and then adding those numbers together.

302
00:13:59,100 --> 00:14:03,273
So the same idea, get all the
products from the rest Client.

303
00:14:04,350 --> 00:14:08,010
When that data's back, get
all the products from the,

304
00:14:08,010 --> 00:14:11,190
from the promise. For each product,

305
00:14:11,190 --> 00:14:14,760
tell me it's, kind of, line value.

306
00:14:14,760 --> 00:14:17,160
What's the price of one product multiplied

307
00:14:17,160 --> 00:14:21,330
by the stock level, and then
add those numbers together

308
00:14:21,330 --> 00:14:23,790
in the same ways we did just now.

309
00:14:23,790 --> 00:14:25,590
And that will tell me,
that will return back

310
00:14:25,590 --> 00:14:29,010
the total value of my
catalog, how many products

311
00:14:29,010 --> 00:14:31,470
and how much do they cost?
Add those numbers together.

312
00:14:31,470 --> 00:14:34,274
That's the, the total
stock level for your,

313
00:14:34,274 --> 00:14:36,060
for your catalog.

314
00:14:36,060 --> 00:14:38,370
Or zero, of course, if
anything goes wrong.

315
00:14:38,370 --> 00:14:39,660
Oh, and then I can remove products.

316
00:14:39,660 --> 00:14:42,360
Now this one here, this syntax,

317
00:14:42,360 --> 00:14:44,910
have you seen this syntax
before in JavaScript?

318
00:14:44,910 --> 00:14:48,540
It's a variadic, it's
called a rest parameter,

319
00:14:48,540 --> 00:14:50,190
nothing to do with rest services.

320
00:14:50,190 --> 00:14:54,720
It means you can pass into
this any number of IDs,

321
00:14:54,720 --> 00:14:59,720
like 1, 7, 3, 6, a comma-separated
... like an array almost,

322
00:15:00,870 --> 00:15:04,170
and what it does, it'll
take all of those IDs,

323
00:15:04,170 --> 00:15:09,150
and for each ID, it'll
basically invoke the rest Client

324
00:15:09,150 --> 00:15:10,920
to delete the product with that ID.

325
00:15:10,920 --> 00:15:13,830
So I passed in here, 1,
2, 3 ... whoopsie Daisy!

326
00:15:13,830 --> 00:15:16,140
If I passed in here, 1, 2, 3, 4,

327
00:15:16,140 --> 00:15:19,320
it would iterate through
that collection, 1, 2, 3, 4,

328
00:15:19,320 --> 00:15:21,420
and it would delete product one.

329
00:15:21,420 --> 00:15:23,310
And then it would delete product two,

330
00:15:23,310 --> 00:15:25,320
and then it would delete product three,

331
00:15:25,320 --> 00:15:27,060
and then it would delete product four.

332
00:15:27,060 --> 00:15:29,400
So for this comma-separated sequence,

333
00:15:29,400 --> 00:15:31,140
it'll call the delete for each ID.

334
00:15:31,140 --> 00:15:32,250
So that's quite smart,

335
00:15:32,250 --> 00:15:34,860
additional bonus feature in this example.

336
00:15:34,860 --> 00:15:37,350
So what we've seen here
is how to define classes,

337
00:15:37,350 --> 00:15:38,730
quite realistic, actually,

338
00:15:38,730 --> 00:15:39,870
you know, these are the kind of classes

339
00:15:39,870 --> 00:15:43,440
you would write in a, in
a JavaScript application.

340
00:15:43,440 --> 00:15:44,970
What we're gonna see in the next section

341
00:15:44,970 --> 00:15:46,503
is how to test these classes.