Jonas: All right.
I hope that you actually completed
the coding challenge on your own
and really started to use all these new features.
So let's see how I did it.
So, we are in charge of two town elements
and these are parks and streets.
And they both have in common that
they have a name and also a build year.
And so what I'm gonna do here is to create a class,
which is gonna be a super class
that contains the name and the build year.
And then for each of the park and street,
I'm gonna have a subclass.
And each of these subclasses will hold
their specific attributes or properties
and also their specific methods.
So, let's implement that.
So class,
element,
and the constructor is the name and the build year.
So the name and a build year.
And that's actually it.
So this is our element super class.
We could also of course add some methods in here,
that all of the park and street elements could then inherit,
but I guess that we're not gonna
need that for this small exercise.
Okay, so let's now create the park class
and remember, since it's a subclass of the element,
we need to use the extends keyword, so extends
and the super class that we extend is called element.
All right, so we need the constructor
and as I explained in the last lecture,
we need to repeat the property names
that we have in our super constructor,
which is called element in this case.
So, again, name and build year.
And then what we also have is the area
and the number of trees.
So we saw in the exercise that
you want to calculate the tree density
and that it's calculated by dividing
the total number of trees by the area.
And so of course, we need to have both
of these properties in our object.
So the first thing that we do in a constructor
of a subclass is to call the super class.
So name here and build year.
So all of this is nothing new for you at this point.
So area is of course the area that we pass in
and the same for number of trees.
And so let's now add a method for
calculating the tree density of an object.
So tree density.
So as I mentioned in the previous video,
this is calculated by dividing the number of trees
by the area of the park.
And so of course it should be
the number of trees divided by the area.
And that's it.
And since we're building something very simple here,
we're just gonna console that log
the result of this calculation,
since that is the final output that we want.
So instead of returning it, such as we would do
in the real app, we're just gonna log it to the console.
So let's now use a template string here
and I hope that you did this one as well
because this is one of the easier measures to implement.
So, what I'm gonna do is to say the name of the park
has a tree density
of
and then our density value, trees per
square and I'm gonna use the square kilometer unit.
And so in here, the unit that we'll have to put in here
will always be a square kilometer.
So I'm just putting it at a comment here,
so that we later know that that's the unit
that we're gonna use here.
So this is not specific to JavaScript,
it's just we could also use square miles or something else,
but I'm gonna go with square kilometers and
that's why I'm putting it here in the text.
So, this should be it for the park.
Now, let's add another subclass for the streets.
So, class street and of course this one
is also gonna extend the previous element class.
And I'm sure that you know what comes now,
which is the constructor, right?
So of course, once again, the name, the build year,
and now we need to add our properties here,
which is the length, so the length of the street,
and the size.
Because remember, in our final report,
we need to say the average and total length
of all the streets together and
also a classification of the size of each street.
And the classification is tiny, small, normal, big, or huge.
And so here as the size parameter,
I'm gonna pass in a number for each of these
and then write a method later on
that will then classify the street based on this number.
And remember that in our text,
it said that default should be normal.
And so we're gonna have a default here
but I'll leave that one for later
and I'll put it here when we write
our method to classify the street.
So it will be just in a second,
so let's just finish this one and then we write that method.
So again, we first need to call our super class
with the name and the build year
and then we need to set our own properties.
So the length we'll be doing and the size.
All right, so let's now write that method
that I was talking about called classify street.
And I'm gonna use one number
for each of these classifications.
So tiny is gonna be one, small is gonna be two,
normal is gonna be three, big is gonna be four,
and huge, it's gonna be five.
So what does this sound like to you?
To me, it sounds a lot like
we're doing a HashMap here, right?
And so we're gonna make use of
the new ES6 feature which is the map.
So let's create a new variable
and I will call it classification.
Now I'll create a new empty map here.
So, classification.set
and I'm gonna say that number one is for tiny.
Two is for small and let me just duplicate these
couple of times so one, two, three, four, and five.
And this one is gonna be normal,
big and huge.
And so when we put in a size here, then as an argument,
we can use that argument to simply read
our classification out of this map here.
Because we can make use here of the fact that
we can use something different than a string for our keys.
So it's different from the objects
that we used to use before for this kind of thing.
Now, just remember that part where I said
that we want to be normal to be the default.
And so we can make use of default parameters
here in ES6 and simply set this one to three.
So now if we create a new street
and don't specify this argument,
so we can just specify name, build year and length,
then the size will automatically be three
and then the three will be classified as normal.
All right, and so now we can just log it to the console,
once again using a template string here
and say that the name,
so name of the street in this case.
And we could also use the year now in this case
so we can say the street, which was built in,
so just to give some more information to the console
and also to use the variable that we have available,
is a, and now, how do we get the data out of our map?
Remember that?
Right, we use the get method.
So we simply say classification.get
and then we need our number, which is the size.
And so of course, we can get that by saying this.size.
And that's it, so the name of the street,
build and a year, is a normal, for example, street.
And that's it.
Now with this method, we can classify our street.
So we now have all our classes
or data model, let's say so, defined.
So now it's time to create some data.
So to create some objects.
And we're gonna start with the parks.
So I'll create an array which will contain
all of our three parks, because remember,
we have three parks and four streets.
So I will say, all parks,
so, new park.
The first one, let's call it the Green Park.
It was built in 1987, has 0.2 square kilometers of area,
and has 215 trees,
so that's the first one.
Now let's make new park.
This one is going to be called the National Park.
So this one is gonna be a little better or bigger,
so this is one old, 1894, it has 2.9 square kilometers,
and, let's say, 3,541 trees,
so really a huge one.
And now the third one,
let's call this one the Oak Park,
built in 1953,
0.4, and 949 trees.
Okay, so now we have our parks.
Let's now create the streets.
So first one, and I call it the Ocean Avenue,
built in 1999, 1.1 kilometers length, and the size of 4.
So this will then be classified using our classify method.
So next one,
and this one is to Evergreen Street,
built in 2008, 2.7 kilometers, and a smaller street.
So, I'm just kind of putting some random data
here for a very small town.
You could of course put data for your own town or whatever.
And maybe you noticed that in here and this line before,
I didn't specify it, this last parameter here.
So this is the size one, so just to see what happens
when I don't put anything in, so just to show that
this default parameter here is going to work.
Okay, and just the last one,
let's call this one the Sunset Boulevard,
which is a beautiful name, I think.
1982, 2.5, and this, with this beautiful name,
it has to be a huge street, so number five here.
All right, so let's now start generating our report
and what I'm gonna do is to write one function
for each report and then pass in our array,
which contains our data.
So for the parks, I'm gonna pass in this one,
and for the streets, of course, this one.
So, function, report park
and I'm simply gonna call it p here
and I will also already define the other function here,
so that we then just have to fill it.
So report parks and report streets
and this one is called s.
Then we'll also just call them
so report parks, which all parks,
and report streets, and all streets.
So again, in this exercise, I don't wanna write
any fancy code like we did in our big app project,
but instead I'm really focusing here
on using some of the ES6 features.
So just very simple functions
and very simple data structures.
So, let's start with the parks report.
First one I'm gonna print, simply say PARKS REPORT
to make it well visible here in the console.
So, what do we want here?
Let's take a look at our exercise.
We want the tree density of each park,
then we want the average age of the town's park,
this actually doesn't make much sense.
So it's average age of the entire parks,
but then we also want the name of the park
that has more than 1,000 trees.
So these three things are about parks.
So let's put it here, you want the density,
you want average age,
and which park
have more than 1,000 trees.
So the first one is really simple.
So for each of our park objects,
we want to call the tree density method.
So we have three parks in our array
and for each of them we want to call that method.
So it makes sense that we loop through them.
And for that, we're simply gonna use for each method
and in our callback function,
we only want the current element,
so this one is for the current element
and then on that element,
we can call the tree density method.
And that's it.
So again, we loop through all of our parks
and for each one, we simply call the tree density method,
which is then going to print to the console the density.
So let's try that out and we have some kind of bug here.
In line 658,
so we already wrote a lot of code here, so 658
and here it is, and yes, so I forgot these parentheses here,
so such like regular functions, of course,
all of the code has to have these parentheses.
So let's try it again and another small mistake,
line 641, and yeah, so here I see the problem.
I have numTrees here and here I misspelled it.
And let's hope, yeah, so now it works, great.
So the Green Park has a tree density
of 1,075 trees per square kilometer.
This one has about 1,200 and this one
has about 2,300 trees per square kilometer.
All right, so that part is already working.
So let's now talk about the average age thing.
And what I'm gonna do here is to create an external function
which is going to calculate the average and the total
for any array that we input into that function.
And so, this way, we can then reuse it down here
in our reportStreets function to calculate
the total and average length of all the streets.
So let me do that out here.
And I'm simply gonna calculate it calc
because that's what we do, we calculate stuff
based on an array that we receive.
So we want the total and the average.
Now, there's an extremely handy method that
I didn't show you before and it's called the reduce method.
And the reduce method is used to
basically reduce an array to a single value.
And it's actually an ES5 method,
so it's nothing new with ES6,
it's just one of the ES5 methods similar to for each or map,
because all of these loop through arrays.
Now the difference is that this one
loops through an array to accumulate all the values
into a single value, so this is perfect
for adding up all of the elements in an array.
So let me show you how this one works.
So let's say we want a variable called sum
and so we use the reduce method
on our input array of course.
And now in here, as with all our other methods,
like for each in map, we can use a callback function.
Now, what's different about this one is
that we not only have access to the current value
and the current index, but also to the previous value.
So let me write that out, actually.
So previous, the current and index
and we're not gonna use all of these,
but I just wanna write it out here
so that you have this kind of as a reference.
And then what we need to return is in the case
that we want to sum everything,
the previous plus the current.
And that's actually it for the callback function.
Now, another argument for the reduce method
is the initial value of the accumulator,
so the number at which we want to start.
So in this case, it's gonna be zero,
because we want to start with our sum at exactly zero.
If we wanted to add everything to 100, let's say,
then you could put 100 in here,
but that's of course not what we want.
So imagine that we had an array
with three, five, and six, like this, just as an example.
So the previous value would then be zero in the beginning
because that's the initial value that we defined here
and then here in our callback function
or previous plus the current would be zero plus three.
Then in the next iteration, the previous value
would be zero plus three, which is three,
and so what we had here would be three plus five, so eight.
Then in the next iteration, it would be
the previous, which is eight, plus six, which is 14.
And so the final result would be 14.
And we had then reduced all of the elements in a array
to a single value which is 14.
Now, of course we can use different things in here,
for example, we could multiply them
or we could divide or subtract or even other things,
but now, all we want to do is to simply
add all of these elements together.
And this reduce method is perfect for that.
And so that's now returned that sum and also the average.
Now we can use the concept of the structuring
that I showed you in one of these lectures,
in which we simply return an array of two elements
and we can then use this structuring to save these elements
into two different variables when we call this function.
So return, of course, the sum and then the average
and we can calculate it right here because it's very simple.
The average is simply the sum of all the elements
of an array divided by the length of this array.
So sum divided by array.length, so that's it.
This is actually all that we have to do in this function.
So let's now use it down here and as I was saying,
we can now use the structuring.
So const total age and average age.
Now what do we pass into this calc function?
We want an array of all the ages of all the parks.
So let's maybe first calculate this.
So we wanna calculate the ages, so const ages.
So what we're gonna do is to loop through
all of the elements of our park array
and calculate the age for each of them.
And we could actually write a different function for that,
but I'm not gonna do that right now,
but of course you could totally do that.
So if you want, feel free to do that.
So, I'm gonna use the map method
to loop through all the arrays,
then I want the current element
and then the age is very simply 2016,
so the current year, minus, of course, the buildYear.
Okay, and let's actually replace this
with a new date, getFullYear,
so that this is always up to date.
And so like this, we will have here an array
with all of the ages for all of the parks.
So, we saved both of the variables here.
So one with the age and one with the average
using once again the concept of the structuring,
but all we need here is actually the average,
but that's no problem, we can just ignore the total.
And so I'm gonna print to the console
that our, let's put in a number of our parks,
so it's p.length, obviously,
have an average of avg age
years.
Okay, and that should be it, let me check it out.
Okay, so date get full years not a constructor,
so this is what I was missing here, these parentheses
and now current is not defined.
So 681, of course it's cur year
and I'm sure that you saw it coming (chuckles),
but I didn't.
But now it works, okay.
So our three parks have an average of 71 years.
All right, now finally,
let's take care of this last part here,
which is to determine which park has more than 1,000 trees.
So, to me it makes lot of sense
to use the very new ES6 method called find index,
which remember, we use on an array
to get the index of the element of the array
which satisfies or a callback function.
So let's first get all of the numbers of trees
into an array and then use the find index method on that.
So what we're gonna determine here is an index, so i.
And so at first, get all of the number of trees
and these of course stored in our p array.
So we loop through p and then store
all of the tree numbers into a new array.
So from the current element,
we want to read the number of trees, property.
So, this one return us an array.
And since this one is an array,
you could now immediately put the next method here,
so we could chain these methods.
So in order to write less lines of code let's do that.
Now what we want here is to find the index
of the element that is larger than 1,000.
So it's simply this,
element greater or equal to 1,000 trees.
And that's it and we didn't use the find method here,
remember that we have the find
and the find index method here, which are both new,
but we didn't want to use the find
because we're not interested in the number of trees,
but in the index, so that we can now select
the correct park and retrieve its name.
So that's what we're gonna do now.
Console.log and we can simply say
that we want p number i, and then its name,
has more than 1,000 trees.
So, does that make sense to you?
Let's check it out.
And that's right, the National Park
has more than 1,000 trees.
And let's see it if it's actually true.
So this one only has 215, this one has 3,541,
and this has 949.
So this is the correct answer and so it works.
So, all there's left to do now
is to do the report for our trees.
So let's copy this one here
and not trees of course, it's streets.
All right, so what do we want here?
Let's go check our text here.
And we want the total and average length
of the town's streets, let's actually copy this one,
and then classify the sizes.
And classify the sizes, which would be very easy.
Now, we already have our function which does this,
so now all we have to do is to reuse it.
And again using the structuring,
we can write total length
and average length.
So, we use a calc function and now let's
actually direct the get all of our length
and we're doing it the same way that we did before,
so s.map, then the element,
and then simply retrieve the length of each of them.
So this builds us our array with all the length
that we can then pass into the calc function.
Let's now log it to the console.
Once again, we're using a template string and say, our
the number of streets here, such as I did before,
streets
have a total length of
totallength, obviously, kilometers,
with an average of
average length kilometers.
So let's check it out and here we go.
Our four streets have a total length of 7.1,
with an average of 7.775.
And ignore these values here, this is a weird bug
that JavaScript sometimes has, so of course
it should be simply 7.1 but the JavaScript engine
sometimes gets a bit confused and it adds
all of these zero zero zero and then some random value here.
So not to worry about this, the correct result is 7.1.
So you can simply ignore these strange number here
and the same thing of course in here.
And now all that's left to do is to classify our streets
and so that's very easy as well.
We just need to loop through all of them
and call our classify street method.
And so here we go.
Ocean Avenue, 1999, is a big street,
a small, a normal and a huge.
So remember here, the third one,
which is called the fourth street,
I did not pass in any argument.
But it still was classified as a normal street
and that's because, and I showed you,
the default parameter here is set to three,
which then maps to normal.
All right, and that's actually it.
So our report now has all of the things
that our bosses asked us to include in the report.
So with this, we conclude our coding challenge,
in which we used not all but at least
some of the new ES6 features.
What you can do now to practice ES6 even more
is to, for example, convert code
that we wrote before to ES6 codes.
So, for example, we can redo the older challenges
but this time write it in ES6.
Or you could even, if you really feel like it,
convert our budget app project to ES6.
So that should be a lot of work
but if you feel like it, then it's of course
one of the tasks that you can do.
All right, so have fun with that
and see you in the next lecture.