Original subtitles

1 1

Let's now solve together a real problem 2

2

using the framework that we just learned about 3

3

and also tools such as Google, Stack Overflow and MDN. 4

4

And here is our very simple problem. 5

5

So let's say that we work for a company that builds 6

6

a smart home thermometer and our most recent task is this. 7

7

So given an array of temperatures of one day, 8

8

calculate the temperature amplitude and keep in mind 9

9

that sometimes there might be a sensor error. 10

10

And they give us this array of data. 11

11

So what should we do here? 12

12

How do we solve this problem? 13

13

And this is actually a pretty simple problem, 14

14

but it still shows us the fundamental logic 15

15

of solving problems. 16

16

Again, using the framework that I just showed you before. 17

17

And so the two most important parts of that is to understand 18

18

the problem and to breaking up the problem 19

19

into smaller sub problems. 20

20

So let's start by understanding the problem 21

21

a little bit better by asking some questions. 22

22

So first of all, they want us to calculate 23

23

the temperature amplitude, but what actually is that? 24

24

So we can write that down here. 25

25

What is temperature amplitude? 26

26

And the answer to that is that it's the difference between 27

27

the highest and the lowest temperatures in the array. 28

28

So answer difference between highest and lowest temp. 29

29

And so this is the value that we will have to return 30

30

from the function. 31

31

Then we might ask, well, that's quite nice, 32

32

but how do we actually calculate the highest 33

33

and the lowest temperature in an array? 34

34

So let's write that question. 35

35

So how to compute the max and mean temperatures. 36

36

And finally, they also tell us here 37

37

that sometimes there might be a sensor error. 38

38

So what does a sensor error look like? 39

39

So what a sensor error and what to do when one occurs? 40

40

And here the answer is probably to just ignore the error. 41

41

Now, here from our data, we can actually see 42

42

what an error looks like. 43

43

So it's this string here, which says error, okay? 44

44

But it's good to have an idea of all of these questions 45

45

so that we now really understand the problem 46

46

that we need to solve. 47

47

And so I think with this here, 48

48

we do have a pretty good idea. 49

49

So now given our understanding of the problem, 50

50

let's try to break the problem up into smaller sub problems. 51

51

So first, we need to make it so that the sensor errors 52

52

are actually ignored. 53

53

So as I was saying, the answer to what to do here 54

54

is to just ignore the sensor errors and simply work 55

55

with the rest of the data. 56

56

So how to ignore errors? 57

57

Then another task is gonna be, 58

58

find max value in temperature array. 59

59

And then another task is to find the minimum value. 60

60

And another task is gonna be to subtract min from max 61

61

and then return it. 62

62

So subtracting min from max is of course the amplitude. 63

63

And so that's what we need to return. 64

64

And so all of these are simple steps, 65

65

but it's good to have an idea 66

66

of how we will solve this problem. 67

67

And so that's why I wrote down every single step 68

68

of the way here. 69

69

So let's start writing a function. 70

70

So although they don't tell us that we should write 71

71

a function here, whenever we encounter a task like this, 72

72

it's a good idea to write a function for it. 73

73

So call this function, calcTempAmplitude. 74

74

And so this function will receive an array of temperatures. 75

75

So let's again, just call that temps. 76

76

And so now we are going to start to work on solving 77

77

this problem, and let's starts here with finding the maximum 78

78

and the minimum value in this array. 79

79

We can deal with the errors a little bit later. 80

80

Now, probably we don't know yet how to do that 81

81

based on what we just learned, right? 82

82

I mean, we all ready have the tools for sure, 83

83

but this requires a little bit of thinking. 84

84

And if we don't know yet how to think 85

85

about this kind of problems, 86

86

it's a good idea to do some research. 87

87

And so we will now use Google to research how we can find 88

88

a maximum value in an array. 89

89

And so that's what I meant when I said we should 90

90

do some research and use Google whenever we need to. 91

91

So what I like to do is to just write JavaScript 92

92

and then be as descriptive as possible 93

93

of what I want to achieve. 94

94

So let's say get max value in array. 95

95

And so don't be afraid to ask Google this kind of questions 96

96

whenever you're stuck yourself. 97

97

Now we get here a couple of replies basically, 98

98

but I'm interested in showing you a Stack Overflow now. 99

99

So Stack Overflow is a site of questions and answers. 100

100

And most of the time, someone all ready had 101

101

the same question as we have. 102

102

And so then they asked that question on Stack Overflow, 103

103

and we can then go there and find a response. 104

104

And this one here sounds good, right? 105

105

Find the min-max elements of an array in JavaScript. 106

106

So let's click on that one. 107

107

But now here the problem is gonna be that at this point, 108

108

you will not understand most of the solutions. 109

109

For example, this one here talks about prototypes. 110

110

This one has like this weird apply in math. 111

111

And so let's just scroll 112

112

until one that we can better understand. 113

113

This one has this weird dots that we will go into later, 114

114

but here we actually have something that we can understand. 115

115

So let's focus on this solution here, okay? 116

116

And usually the first solution is always the best one 117

117

or the first or the second. 118

118

But in this case, we just scroll it a little bit more 119

119

so that we can find a solution 120

120

that we can implement with the tools 121

121

that we all ready learned about. 122

122

So what they're doing here is to start by defining 123

123

the first element of the array as a max. 124

124

So in the beginning, they basically assume 125

125

that the maximum value of the array is the first element. 126

126

And then from here, they loop through the array 127

127

or over the array. 128

128

And in each iteration here they test, 129

129

if the current value is greater than the maximum value. 130

130

And if it is then the new maximum here, 131

131

becomes the current element in the array, okay? 132

132

Does that sound like a good idea? 133

133

Well, I think that it does. 134

134

So let's try to implement this ourself 135

135

and then I will try to explain you a little bit better, 136

136

why this is a good solution. 137

137

So let's create a four-loop here, 138

138

and of course we don't need to copy 139

139

the code here from this site. 140

140

Usually it's best to understand the solutions 141

141

and then trying to implement it on yourself. 142

142

So not copying the code exactly from Stack Overflow. 143

143

So let's start with the counter i, 144

144

let's start at zero as always, even though here, 145

145

they're starting at one, but nevermind. 146

146

We will just do it, like we have always been doing it. 147

147

So I must stay below the length of the array 148

148

that we're looping over. 149

149

And in this case, that's the temperature array, right? 150

150

So temps.length, and then i plus plus, okay? 151

151

And actually before we do the loop, 152

152

we need to create that max variable that they have here. 153

153

So let's do that. 154

154

Let max equal the temps array. 155

155

So at the very first element. 156

156

So again, we will start by assuming 157

157

that the first element of the array is the maximum. 158

158

And that's because we didn't loop over 159

159

the array yet at this point. 160

160

So this is similar to the challenge in the last section 161

161

where we started out with the sum set to zero. 162

162

So that was a good starter value. 163

163

And in this case, a good starting point is simply the first 164

164

value of the array. 165

165

And now let's implement that logic here. 166

166

So, if the current value of the array, so that's temps 167

167

at position i, so the current position is greater 168

168

than the current maximum value. 169

169

Then the maximum value will become this new value. 170

170

And that makes sense, right? 171

171

Because if the current value in the array 172

172

is greater than the maximum, 173

173

well, then that value should be the maximum, right? 174

174

And so that's what we then do here, okay? 175

175

And now let's simply log it to the console. 176

176

And remember that from now on, 177

177

I will start using the snippet 178

178

that we defined in the first lecture of the section. 179

179

So I just type cl, hit return and then max, okay? 180

180

And now just to test this function, 181

181

let's call it with an array of just some values. 182

182

So three, seven and four. 183

183

And so now it's very obvious what the result should be. 184

184

And so I all ready saved it and so probably we now all ready 185

185

have to result here in the console, 186

186

because remember we still have to live server here running. 187

187

And so it automatically reloaded to page, 188

188

and we get the correct result here, 189

189

which is that seven is the max value. 190

190

Let's add something else here like 23 191

191

and now 23 will become the max value. 192

192

And so the logic here works. 193

193

So let's get rid of this one 194

194

and just to analyze what happens. 195

195

So in the beginning, before we even start a loop, 196

196

the max will be the first element of the array. 197

197

So three, okay? 198

198

Then the loop starts at the first position. 199

199

So that's three. 200

200

So here then we ask is three greater than three? 201

201

No, it's not. 202

202

So nothing happens then in the next iteration of the loop, 203

203

we are at seven. 204

204

So then the question is, is seven greater than three 205

205

which is the current maximum? 206

206

And yes, it is. 207

207

And so now max equals seven, okay? 208

208

Next iteration of the loop, which is four. 209

209

And so the question is, is four greater than seven, 210

210

which is the current maximum? 211

211

No, it's not. 212

212

And so nothing happens and then we're done. 213

213

And so the result in the end 214

214

is that max is equal to seven, all right? 215

215

Does that make sense? 216

216

So we solved this problem here. 217

217

So the sub problem where we found the max value, 218

218

but now we need to do the same for the minimum. 219

219

And hopefully you can see how that one works 220

220

because it's pretty much in the same way. 221

221

So let's say min, 222

222

and we will start at the same starting point here. 223

223

And all we need to do now is to add another line 224

224

to this loop so we can do it all in one go. 225

225

And so now what we're gonna say 226

226

is if the current temperature is less than the minimum, 227

227

then that should become the new minimum. 228

228

So min equals the current temperature. 229

229

And actually since we're using this here so many times, 230

230

let's create a variable for that. 231

231

So const current temperature is equal to temps 232

232

at position i. 233

233

And now I'm selecting and then command D 234

234

or Control + D one, two, three, four, 235

235

and replace all of this with curTemp. 236

236

Okay, and now just to see again if it works, 237

237

let's log the minimum as well, 238

238

and let's add some other value here. 239

239

And so what can we expect when we save it? 240

240

Well, the max would be eight and the min should be one. 241

241

So I'm saving, and yes, that works. 242

242

Next up, we can then tackle the problem of ignoring errors. 243

243

So what that means 244

244

is that we do not want to include this, right? 245

245

Or in other words, this logic here 246

246

should only run if we actually have a number here. 247

247

Okay, so basically if the current element is a number 248

248

only then it makes sense to make this sort of comparisons. 249

249

And so, we can use something that we learned 250

250

in the last section, which is the continue keyword. 251

251

So let's say if the type of the current temperature, 252

252

so type of current temperature is different 253

253

from a number, then continue. 254

254

And remember that continue means that the rest 255

255

of the iteration will not be executed. 256

256

So the current iteration will be finished 257

257

and then it moves on right to the next one. 258

258

And so in this case, what happens 259

259

is as soon as the loop reaches this part here, 260

260

since it's not a number, 261

261

then none of the logic down here is executed 262

262

and then we move on to number nine right away. 263

263

Okay, so let's now actually call calcTempAmplitude, 264

264

using or temperatures array. 265

265

And indeed, we all ready have here 266

266

the max and min temperatures. 267

267

So that's confirmed that that's correct. 268

268

And yes, seven is the max and minus six is the minimum. 269

269

Awesome, so that works now there's only the easy part left, 270

270

which is to return the amplitude. 271

271

So return the max minus the min, okay? 272

272

Let's get rid of this one here 273

273

and here let's store that result into a variable 274

274

or actually amplitude. 275

275

Okay, and then console log ampli, 276

276

oh, actually there's an error here, 277

277

This would be called amplitude. 278

278

Okay, and so 23. 279

279

So you can probably start to see 280

280

that this is my favorite number. 281

281

And so it comes up all the time here. 282

282

Awesome, we did a great job here in solving this problem. 283

283

And again, we did it because we first understood it 284

284

correctly and then we broke it up into these sub problems. 285

285

But now let's suppose that after we're done 286

286

with our solution, the project manager 287

287

tells us that the function 288

288

should actually receive two arrays of temperatures 289

289

and not just one. 290

290

But the rest of the function should work just the same. 291

291

Okay, so well, let's quickly write that problem down here. 292

292

So problem two, 293

293

function should now receive two arrays of temperatures. 294

294

So let's try to again, understand the problem. 295

295

So we can probably ask the question when we have two arrays, 296

296

do we need to implement the same functionality twice? 297

297

And well, the answer is actually no. 298

298

So the solution is to just merge 299

299

the two arrays at the beginning. 300

300

So just merge two arrays and now we need 301

301

to then again break this one up into sub problems. 302

302

And in this case, that's just, 303

303

well, really just one sub problem, 304

304

which is how to merge two arrays, okay? 305

305

But we can see that this is probably 306

306

the best thing to do, right? 307

307

So imagine that we have this same function, 308

308

but instead of receiving this one here, 309

309

so just one array it gets two, 310

310

then if we can merge these two arrays into one, 311

311

then the rest of the logic could stay exactly the same. 312

312

Okay, and here the problem should actually be just 313

313

merge two arrays. 314

314

So that's our sub problem that we will now solve. 315

315

So, let's now do some more research here. 316

316

So, I think we could actually come up 317

317

with our own solution here. 318

318

But really, I just want in this lecture to use 319

319

the tools that we have to solve problems 320

320

on our own with research. 321

321

So I want to show you how a developer 322

322

goes about doing these things. 323

323

So JavaScript merge two arrays. 324

324

So we have here the Mozilla Developer Network 325

325

that I told you about in the last lecture. 326

326

And here we also have again, a Stack Overflow reply. 327

327

So let's take a look at the Stack Overflow again. 328

328

So here we see that apparently 329

329

there is like a concat method. 330

330

So here we can also see array.concat. 331

331

So that seems to be the solution. 332

332

And I remember that previously on that Google results page, 333

333

there was also something about that. 334

334

So this first year, 335

335

so the MDN page is also about the concat method. 336

336

So let's now actually explore 337

337

the MDN website a little bit, okay? 338

338

And let's make this a bit wider so I can show you 339

339

how it really looks like. 340

340

And so, MDN looks like this and once more, 341

341

it might've changed by the time you're watching this video, 342

342

but the core functionality will still be there. 343

343

So there's always a short description 344

344

about the functionality and then some quick examples. 345

345

Then, here on the left side, 346

346

we can actually see all the methods about the array. 347

347

Okay, and that's because we are right now on the page 348

348

about an array method. 349

349

So concat is a method of arrays, 350

350

so similar to push or shift or includes, right? 351

351

So concat is just one more of these methods. 352

352

And again, we can see all of the methods here. 353

353

And as I told you, there are a lot of them. 354

354

So push for example is the one that we all ready 355

355

learned about and used, so we can quickly see that. 356

356

And so indeed the push method adds zero or more elements 357

357

to the end of an array and returns the new length 358

358

of the array. 359

359

So this is kind of what we did ourselves previously. 360

360

And actually we can add multiple elements, 361

361

which I didn't tell you by the time, 362

362

but this here works just as well. 363

363

But anyway, this was just to show you a familiar method, 364

364

but let's return to concat here. 365

365

So here is a long description of the method. 366

366

Here's the exact syntax, 367

367

which many times looks a bit intimidating. 368

368

And so I like to actually stick to the examples here. 369

369

So, whenever you need to know how a certain built in method 370

370

or function works in JavaScript, 371

371

you can always just look it up on MDN. 372

372

This is really the complete, 373

373

but unofficial JavaScript documentation. 374

374

And in fact, many, many of the things 375

375

that I know about JavaScript come here from MDN. 376

376

So, don't be afraid of doing any research that you need 377

377

on this page, or also on Stack Overflow. 378

378

Anyway, here from this example, 379

379

we can understand kind of how the concat method works. 380

380

So we have array one and two, and then on array one, 381

381

we can call the concat method 382

382

and as an argument passed in the second array. 383

383

And the result will be array three. 384

384

And when we locked that to the console, 385

385

we will get a, b, c, e, f. 386

386

And so that's the array one, abc, 387

387

and then followed by array two essentially, def. 388

388

So I'll just copy this syntax now 389

389

and to make this smaller again, 390

390

and I will paste it here 391

391

just so we can then use it as a reference. 392

392

Okay, and now I will get 393

393

this whole function and to not change that one, 394

394

but instead create a new one. 395

395

So calcTempAmplitude new. 396

396

And then here we also called a new one 397

397

and called amplitude new. 398

398

Okay, amplitude new. 399

399

And now here, we need to change the arguments. 400

400

So, remember that now this new function 401

401

will receive two arrays of temperatures. 402

402

So I'm just gonna call them T one and T two. 403

403

Here at the beginning of the function 404

404

is where we will solve our problem. 405

405

So this sub problem of merging the two arrays. 406

406

So, let's again, 407

407

just put this here, just so that we see it as a reference 408

408

exactly where we need it. 409

409

So what we want to do is to create a new array 410

410

and I will call it temps. 411

411

And I'm calling temps 412

412

because that's the name of the complete array 413

413

that we all ready have here in the function. 414

414

So that used to be the name 415

415

of the argument of the previous version of this function. 416

416

And now I can just say, the array one, 417

417

So array one, which in our case is T one dot, 418

418

and then array number two, which in our case is T two. 419

419

And that's it. 420

420

And now let's just lock that to the console 421

421

very quick, temps and we no longer need this. 422

422

Oh, okay, and here then we need to call 423

423

this new function with two arrays. 424

424

So let's just create two arrays. 425

425

So three, five, and one, 426

426

and then another one, nine, zero and five. 427

427

And now let's see. 428

428

And here we see, that it did actually work. 429

429

So now we get this one array, 430

430

which includes all the elements, 431

431

basically of these two arrays 432

432

that we passed into calcTempAmplitude new, so this function. 433

433

And we can also see that nine and zero are the max 434

434

and the min and nine minus zero gives nine, 435

435

which is then this new amplitude new. 436

436

Awesome, so we solved this problem number two here 437

437

successfully as well now. 438

438

And yeah, so I hope that now you have a better idea 439

439

of how to solve problems 440

440

and especially how to do research using the tools 441

441

that I just showed you in this video. 442

442

So that's Google, Stack Overflow 443

443

and also the MDN documentation. 444

444

And as less one is, in my opinion, 445

445

actually the most important one I learned so much from MDN. 446

446

It's incredible. 447

447

So now in the future, 448

448

whenever something is not working in your code, 449

449

and even during the course, 450

450

you can always try to figure out a solution on your own, 451

451

for example, using Google or Stack Overflow. 452

452

And so that will then be very helpful 453

453

for your developer journey.