Original subtitles

Let's now solve together a real problem

using the framework that we just learned about

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

And here is our very simple problem.

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

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

So given an array of temperatures of one day,

calculate the temperature amplitude and keep in mind

that sometimes there might be a sensor error.

And they give us this array of data.

So what should we do here?

How do we solve this problem?

And this is actually a pretty simple problem,

but it still shows us the fundamental logic

of solving problems.

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

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

the problem and to breaking up the problem

into smaller sub problems.

So let's start by understanding the problem

a little bit better by asking some questions.

So first of all, they want us to calculate

the temperature amplitude, but what actually is that?

So we can write that down here.

What is temperature amplitude?

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

the highest and the lowest temperatures in the array.

So answer difference between highest and lowest temp.

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

from the function.

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

but how do we actually calculate the highest

and the lowest temperature in an array?

So let's write that question.

So how to compute the max and mean temperatures.

And finally, they also tell us here

that sometimes there might be a sensor error.

So what does a sensor error look like?

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

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

Now, here from our data, we can actually see

what an error looks like.

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

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

so that we now really understand the problem

that we need to solve.

And so I think with this here,

we do have a pretty good idea.

So now given our understanding of the problem,

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

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

are actually ignored.

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

is to just ignore the sensor errors and simply work

with the rest of the data.

So how to ignore errors?

Then another task is gonna be,

find max value in temperature array.

And then another task is to find the minimum value.

And another task is gonna be to subtract min from max

and then return it.

So subtracting min from max is of course the amplitude.

And so that's what we need to return.

And so all of these are simple steps,

but it's good to have an idea

of how we will solve this problem.

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

of the way here.

So let's start writing a function.

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

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

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

So call this function, calcTempAmplitude.

And so this function will receive an array of temperatures.

So let's again, just call that temps.

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

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

and the minimum value in this array.

We can deal with the errors a little bit later.

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

based on what we just learned, right?

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

but this requires a little bit of thinking.

And if we don't know yet how to think

about this kind of problems,

it's a good idea to do some research.

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

a maximum value in an array.

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

do some research and use Google whenever we need to.

So what I like to do is to just write JavaScript

and then be as descriptive as possible

of what I want to achieve.

So let's say get max value in array.

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

whenever you're stuck yourself.

Now we get here a couple of replies basically,

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

So Stack Overflow is a site of questions and answers.

And most of the time, someone all ready had

the same question as we have.

And so then they asked that question on Stack Overflow,

and we can then go there and find a response.

And this one here sounds good, right?

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

So let's click on that one.

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

you will not understand most of the solutions.

For example, this one here talks about prototypes.

This one has like this weird apply in math.

And so let's just scroll

until one that we can better understand.

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

but here we actually have something that we can understand.

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

And usually the first solution is always the best one

or the first or the second.

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

so that we can find a solution

that we can implement with the tools

that we all ready learned about.

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

the first element of the array as a max.

So in the beginning, they basically assume

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

And then from here, they loop through the array

or over the array.

And in each iteration here they test,

if the current value is greater than the maximum value.

And if it is then the new maximum here,

becomes the current element in the array, okay?

Does that sound like a good idea?

Well, I think that it does.

So let's try to implement this ourself

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

why this is a good solution.

So let's create a four-loop here,

and of course we don't need to copy

the code here from this site.

Usually it's best to understand the solutions

and then trying to implement it on yourself.

So not copying the code exactly from Stack Overflow.

So let's start with the counter i,

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

they're starting at one, but nevermind.

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

So I must stay below the length of the array

that we're looping over.

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

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

And actually before we do the loop,

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

So let's do that.

Let max equal the temps array.

So at the very first element.

So again, we will start by assuming

that the first element of the array is the maximum.

And that's because we didn't loop over

the array yet at this point.

So this is similar to the challenge in the last section

where we started out with the sum set to zero.

So that was a good starter value.

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

value of the array.

And now let's implement that logic here.

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

at position i, so the current position is greater

than the current maximum value.

Then the maximum value will become this new value.

And that makes sense, right?

Because if the current value in the array

is greater than the maximum,

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

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

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

And remember that from now on,

I will start using the snippet

that we defined in the first lecture of the section.

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

And now just to test this function,

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

So three, seven and four.

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

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

have to result here in the console,

because remember we still have to live server here running.

And so it automatically reloaded to page,

and we get the correct result here,

which is that seven is the max value.

Let's add something else here like 23

and now 23 will become the max value.

And so the logic here works.

So let's get rid of this one

and just to analyze what happens.

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

the max will be the first element of the array.

So three, okay?

Then the loop starts at the first position.

So that's three.

So here then we ask is three greater than three?

No, it's not.

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

we are at seven.

So then the question is, is seven greater than three

which is the current maximum?

And yes, it is.

And so now max equals seven, okay?

Next iteration of the loop, which is four.

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

which is the current maximum?

No, it's not.

And so nothing happens and then we're done.

And so the result in the end

is that max is equal to seven, all right?

Does that make sense?

So we solved this problem here.

So the sub problem where we found the max value,

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

And hopefully you can see how that one works

because it's pretty much in the same way.

So let's say min,

and we will start at the same starting point here.

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

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

And so now what we're gonna say

is if the current temperature is less than the minimum,

then that should become the new minimum.

So min equals the current temperature.

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

let's create a variable for that.

So const current temperature is equal to temps

at position i.

And now I'm selecting and then command D

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

and replace all of this with curTemp.

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

let's log the minimum as well,

and let's add some other value here.

And so what can we expect when we save it?

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

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

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

So what that means

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

Or in other words, this logic here

should only run if we actually have a number here.

Okay, so basically if the current element is a number

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

And so, we can use something that we learned

in the last section, which is the continue keyword.

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

so type of current temperature is different

from a number, then continue.

And remember that continue means that the rest

of the iteration will not be executed.

So the current iteration will be finished

and then it moves on right to the next one.

And so in this case, what happens

is as soon as the loop reaches this part here,

since it's not a number,

then none of the logic down here is executed

and then we move on to number nine right away.

Okay, so let's now actually call calcTempAmplitude,

using or temperatures array.

And indeed, we all ready have here

the max and min temperatures.

So that's confirmed that that's correct.

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

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

which is to return the amplitude.

So return the max minus the min, okay?

Let's get rid of this one here

and here let's store that result into a variable

or actually amplitude.

Okay, and then console log ampli,

oh, actually there's an error here,

This would be called amplitude.

Okay, and so 23.

So you can probably start to see

that this is my favorite number.

And so it comes up all the time here.

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

And again, we did it because we first understood it

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

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

with our solution, the project manager

tells us that the function

should actually receive two arrays of temperatures

and not just one.

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

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

So problem two,

function should now receive two arrays of temperatures.

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

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

do we need to implement the same functionality twice?

And well, the answer is actually no.

So the solution is to just merge

the two arrays at the beginning.

So just merge two arrays and now we need

to then again break this one up into sub problems.

And in this case, that's just,

well, really just one sub problem,

which is how to merge two arrays, okay?

But we can see that this is probably

the best thing to do, right?

So imagine that we have this same function,

but instead of receiving this one here,

so just one array it gets two,

then if we can merge these two arrays into one,

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

Okay, and here the problem should actually be just

merge two arrays.

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

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

So, I think we could actually come up

with our own solution here.

But really, I just want in this lecture to use

the tools that we have to solve problems

on our own with research.

So I want to show you how a developer

goes about doing these things.

So JavaScript merge two arrays.

So we have here the Mozilla Developer Network

that I told you about in the last lecture.

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

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

So here we see that apparently

there is like a concat method.

So here we can also see array.concat.

So that seems to be the solution.

And I remember that previously on that Google results page,

there was also something about that.

So this first year,

so the MDN page is also about the concat method.

So let's now actually explore

the MDN website a little bit, okay?

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

how it really looks like.

And so, MDN looks like this and once more,

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

but the core functionality will still be there.

So there's always a short description

about the functionality and then some quick examples.

Then, here on the left side,

we can actually see all the methods about the array.

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

about an array method.

So concat is a method of arrays,

so similar to push or shift or includes, right?

So concat is just one more of these methods.

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

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

So push for example is the one that we all ready

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

And so indeed the push method adds zero or more elements

to the end of an array and returns the new length

of the array.

So this is kind of what we did ourselves previously.

And actually we can add multiple elements,

which I didn't tell you by the time,

but this here works just as well.

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

but let's return to concat here.

So here is a long description of the method.

Here's the exact syntax,

which many times looks a bit intimidating.

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

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

or function works in JavaScript,

you can always just look it up on MDN.

This is really the complete,

but unofficial JavaScript documentation.

And in fact, many, many of the things

that I know about JavaScript come here from MDN.

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

on this page, or also on Stack Overflow.

Anyway, here from this example,

we can understand kind of how the concat method works.

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

we can call the concat method

and as an argument passed in the second array.

And the result will be array three.

And when we locked that to the console,

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

And so that's the array one, abc,

and then followed by array two essentially, def.

So I'll just copy this syntax now

and to make this smaller again,

and I will paste it here

just so we can then use it as a reference.

Okay, and now I will get

this whole function and to not change that one,

but instead create a new one.

So calcTempAmplitude new.

And then here we also called a new one

and called amplitude new.

Okay, amplitude new.

And now here, we need to change the arguments.

So, remember that now this new function

will receive two arrays of temperatures.

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

Here at the beginning of the function

is where we will solve our problem.

So this sub problem of merging the two arrays.

So, let's again,

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

exactly where we need it.

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

and I will call it temps.

And I'm calling temps

because that's the name of the complete array

that we all ready have here in the function.

So that used to be the name

of the argument of the previous version of this function.

And now I can just say, the array one,

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

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

And that's it.

And now let's just lock that to the console

very quick, temps and we no longer need this.

Oh, okay, and here then we need to call

this new function with two arrays.

So let's just create two arrays.

So three, five, and one,

and then another one, nine, zero and five.

And now let's see.

And here we see, that it did actually work.

So now we get this one array,

which includes all the elements,

basically of these two arrays

that we passed into calcTempAmplitude new, so this function.

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

and the min and nine minus zero gives nine,

which is then this new amplitude new.

Awesome, so we solved this problem number two here

successfully as well now.

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

of how to solve problems

and especially how to do research using the tools

that I just showed you in this video.

So that's Google, Stack Overflow

and also the MDN documentation.

And as less one is, in my opinion,

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

It's incredible.

So now in the future,

whenever something is not working in your code,

and even during the course,

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

for example, using Google or Stack Overflow.

And so that will then be very helpful

for your developer journey.