Instructor: 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.