Narrator: In this lecture, we're gonna take
a look at Arrays in ES6 because a lot
of things were added to Arrays.
We now have a lot of new methods
and also a new kind of loop so let's
dive right into this lecture.
And we're actually gonna use all of these
colored boxes now here in this lecture.
So let's start by selecting them.
And we're gonna save it in a constant
and of course we use document.querySelectorAll.
And now let's first take a look now at the HTML.
And we see that all of them have this box class name here.
Right, so let's use that one to select them.
So box, now we already know that this
querySelectorAll method does not return
an array with these elements but instead,
it returns a node list, you remember that one, right?
So what we have to do is to transform it into an array.
And what we always did in this course was using
this weird trick where we called this light
method on the array prototype in setting the
dis-variable to the boxes in this case, right?
So in ES5, this is how we would do it.
So boxesArray and five for ES5.
You would say Array.prototype and then use
the slice method and then call it with boxes.
So you remember this part, right?
And so now we have an array.
And now we can use all of the array methods.
So let's say we wanted to change all of these
boxes here to blue, okay.
So like this blue color here.
So we can now use the for each method.
So boxes array five .forEach and our call back function.
And here I'm going to write it the ES5 way.
So the current element and I want to change the style.
The background color this blue color
which is called Dodger Blue.
So this is a CSS color name.
Okay, and that's it actually so let's test it out.
And nothing changed and yeah, it's because
I misspelled here this word so it's called Dodger Blue.
Okay, so just like this and yeah,
so now they're all blue but we had to use this
hack here, right, and so there's actually a better
way now in ES6 so let's get rid of
this code and write it in ES6.
So boxesArray six and now we have a new method
which is called from so all we have to do is say Array.from
and then boxes and what this is gonna do is to
simply transform this node list that we have in
boxes to an array and it's as simple as that.
And so now we can say boxes array six for each
and now I'm gonna use the arrow function, okay.
So I want the current element and I wanna change its style.
To dodger blue and I hope it's correct this time.
And yeah, it works and since this is actually so short
and simple, we can even take this from here
and do it like this and so we went from all of this
code here to doing the same thing in just one line of code.
So this new from method makes our code a bit shorter
and it also looks better, alright.
So let's now talk about loops.
So usually when we want to loop over an array,
we use the for each or the map method.
And they usually work just fine, right?
Now the problem with them is that we
actually cannot break from them.
And we can also not use the continue statement.
So if we want to use the break or the continue
statements in a loops, we cannot use for each.
And we can also not use map and so we would
use a simple four loop in ES5, which forces
us to write a lot of code just for a very simple loop.
So suppose that we wanted to change the text
here in the boxes, okay, because now this
box is not longer green and this is no longer orange.
So let's say that we want to change the text
from this box and from this box.
So if we're in a loop, we can simply say that
here in the second box, we want the loop to continue
and not to do anything so let's
start by writing that the ES5 way.
So as I was saying, we use a simple for loop here.
So you already know how this works, right?
Boxes array five and it's not active
because I commented out this code here, right?
Okay, .length and I++ so this is nothing
new at all for you and now all we have to do
is to say that if it's this second box here,
then we want to continue to loop.
So let's check it out and the class name of
this one here is box blue.
So we cannot simply say just blue
but instead we have to say that the class
name is box blue, let me show you how we can do that.
So we say that if the box is array
at the current position so position I,
the class name and I'm not sure if we already
used that in a course, but I think we didn't,
so this is a great time to learn this new property.
So a class name here, we can retrieve the name
of the class, of course, and then perform
this kind of check that we have here
so in this case to see if this element has
the box blue class on it.
And if it does, then we want to continue.
Okay, and I'm sure that you remember the
continue and break keywords from right
from the beginning of the course.
So what the continue will do is to simply
skip this iteration of the loop and go right
to the next on and the break keyword will
break this loop and then we don't continue
to the next iteration so if we would use break here,
then we simply would break the loop
and it would stop here and not continue.
Okay, but in the other cases, we simply want to
change the text so boxes array five and of course,
we need to select the current box.
And then text content and let's say I changed to blue.
Which wouldn't make much sense on the second
one because it is already blue.
So let's see what happens here.
Okay, so I changed to blue, nothing changed here.
And I changed to blue.
Let me just show you what happens with the break.
Okay and so in this case, only the first one
would change and then as soon as we hit the second
element, it would break from the loop and not continue.
Okay, now I really don't like to use the for loop like this.
We have to write all of this code here
which always seems a bit repetitive.
And then to select each element we always have
to write it out like this and so in ES6,
we now have a new loop and this new loop
combines the easy to use for each with the for loop.
And this new loop is called the for off.
Instead of for, it's called for off.
So then take out this code and write it the ES6 way.
And here is how the for off loop works.
So for and then in here we can create a new
variable, constant for example.
And then such as we do in the for each method,
we can define our current element.
And we can call this whatever we want.
We can say current of element or whatever we want.
And we say that this is an element of the boxes array six.
And that's it, so this is a simple loop,
where we can define the current element
rather than having to do all of this weird code here.
So again, this combines the very easy to use,
for each or map methods with the for loop.
So then in here we can also use the continue or the break
statements which we cannot in map or in for each.
So let's do the same thing that we did before.
So if boxes array and actually we want six,
let me see if it's active here.
Oh, it's actually not because I deleted that variable.
So let me just edit back here, okay.
So boxesArr6, alright, just because we need
this variable here later on.
So .className equals box blue, then we want to continue.
Okay and now let's just copy this part here.
So we don't have to write it all over again.
But here it's now the simpler cur
or it could be even simpler like c or whatever we want.
No, this here is actually not correct
because what we want is the class name of
the current element, right, not off the entire boxes array.
So this was a mistake so let's now check it out.
And yup, it worked just like before.
This one changed and this one changed,
the one in the middle just stays the same.
So we went from this a bit more confusing
and bigger code to this one here.
And in here, we can actually do a little bit better.
Because now we have these new string methods.
And so what we can do here is to use the
includes method so I hope you remember that one
from one of the previous lectures.
So includes and we can now say blue.
And remember that this one is gonna return a true
is the class name contains the name blue.
And so this way we don't have to write
here the entire class name because we're
just interested in the blue part.
So this makes it even a bit better and more readable.
And so you also just saw a good application
of this new includes method.
And of course, it still works so this was
of course, a very simple example but it's
really important to show you that sometimes
we might need the break or continue statements
in a loop and in this case, the new for
off loop here comes in very handy.
Alright, and just to finish there are also
two new and very useful array methods
that allow us to find elements in an array.
So up until this point, we only had the index off method,
right but now they're a couple of new ones.
And I'm gonna show you two of them
which are the best ones, in my opinion.
So suppose that we have a group of children
and we know that only one of them is a full age.
So let's now find out who and how old that person is.
So again, we start with ES5 and let's say the ages
of these children were 12, 17, eight, 21, 14 and 11.
That's not quite 11, okay.
So the ES5 way, we would first have to
create a blue and array to determine whether
each element of the array is younger or older than 18.
And we could then use the index off to determine
the element that we want.
So let's use the map method to create an array
which true or false values like this.
So full age which I'm gonna abbreviate as full
and then ages.map, okay and I want the current, of course.
And all we need to do here is to return if the current
element is older or equal to 18 years, okay.
Let's just check this, so false, false,
false, true and false, false.
So only this one is true.
But now we have to find out the position
of this element here in array.
And in order to do that, we use the index off method.
Index off and we want the one that is true, right?
And in order to see this, let's use console.log again.
And here we go, so it's element number three.
Zero, one, two, three and if you want to now see
how old the person is, we need to retrieve
that exact element from the array.
So ages and then to retrieve and now we need to again,
calculate the position of that element that's true.
And so, that person is, that's right, 21 years old.
So that's a lot of work just for this very
simple task, right and so in ES5, once again,
our life is made easier with a couple of new methods.
And these new methods are to find index and to find methods.
So in ES6, let's now start by using the find index method.
And this method we can pass a call back function
into it and it's then gonna return us the index
of the array where the call back function returns true.
So it's just like this, so it's ages.find the index.
And then this works a bit like the map or the for each
methods so we have a call back function that
has access to the current element to the current
index and the entire array and so I can write cur,
then my arrow function and then what I want is
the same expression that we had before which
is when the current is greater or equal to 18 years old.
So what this does is to basically return the index
for the element in which this expression here,
so this call back function returns the value true.
And that's as simple as it, so that's actually console.log.
This result to see if it's the same as here.
And yes it is, so it's number three.
And if we actually want to retrieve the element
and not just the index, then we could do something
very similar instead of having to write it like this way
here so the array and then retrieve the value.
Now we have a simple method that
does all of that automatically
so ages find and then this part here is of course, the same.
So if you don't want to know the end index,
we actually don't even have to calculate it.
So we could just use this one if all we are interested
in is to find the value that is greater than 18.
And that value is 21, of course.
So a lot of new and very useful stuff about arrays.
These are great additions to the new
standard of JavaScript so to ES6.
Alright, so see you in the next video.