-: The last thing that we're gonna learn in this section
is how to programmatically create and fill arrays.
So far we have always simply created arrays like this.
Right?
So basically writing them out by hand, literally.
So just like this,
or maybe we might've done it also like this.
So using a new Array, a constructor,
and then passing in all the numbers here as arguments,
and then that also creates this array.
Now in this cases we basically already have all data.
So for example, one, two, three, four, all the way to seven.
So that's the data that we already have.
And so therefore we could then manually create these arrays.
However, we can actually also generate
arrays programmatically,
so without having to define all the items manually.
And there are many situations in which this is necessary
and there are also multiple ways of doing it.
And the easiest one is to again,
use the Array() constructor function.
So let's create a new array here like this,
and then I will pass an only one argument seven.
So what do you think is gonna happen?
Well, we might think that this is going to create an array
with only one element number seven.
But actually it doesn't,
instead it creates a new array with seven empty elements
in there and it simply contains nothing.
So this output is very weird indeed.
And the reason for that
is this weird behavior of this Array() function
which does it so that whenever we only pass in one argument,
then it creates a new empty argument with that length.
So if we don't know about this special particularity
of the Array() constructor function
then this can lead to weird errors.
Okay?
Now also we cannot really use this X array for anything.
For example, we cannot call the map() method on it
to now fill it up.
For example, we might want to do this map().
And then in each element,
we might simply want to put something there like a five,
but then you will see,
well, actually we need to log it to the console.
But you will see that nothing happened here.
So this is not really useful except for one thing,
because there is one method that we can call
on this empty array and that is the fill() method.
So that's a new method that we haven't studied yet,
but it's very straight forward.
So let me show it to you.
So that's x.fill() and then all we need to do
is to pass in a value and it will then fill up
the entire array with this specific value.
And this does actually mutate the underlying array.
so we can just change it there
and then simply log the entire thing to the console here.
So this doesn't work, let's take it out.
And now we get this array full off once.
But let's actually turn this off
so we can experiment a little bit more with fill().
Because this method is actually a little bit similar
to the slice() method.
So besides this value that we want to fill the array with,
we can also specify where we want it to start to fill.
So let's say only at index three.
And so we also can specify a begin parameter
and then it only starts at index three, which is this one.
So it will then fill it up until the end,
unless we specify an end parameter just like in slice().
So let's say five,
And also just like in a slice(),
the final index here is not gonna be included in the array.
So just these two here are filled up.
And of course, we can also use the fill() method
on other arrays.
So it doesn't have to be an empty array.
Let's say we actually defined this here as an array,
and then we can also fill that array.
So let's say arr.fill() and let's fill it with 23
at position four to six.
And again, it will mutate the original one,
and so you'll see that we put these 23s
in these two positions.
So from four to six.
Let's say from two to six to put some more in there.
So this is the fill() method + empty arrays.
So empty arrays + fill method.
And with this, we created an array programmatically,
so without actually having to write it down manually.
So let's bring this part back also to see it.
So it's an entire new array that
we here just created with our code.
And indeed the fill() method can be very useful sometimes.
However, what if we actually wanted to recreate
the array from our first example?
So what if he wanted to create this arr array
programmatically?
Well, for that, we could use the Array.from() function.
So that's Array.from(),
and this is how we use it.
And this is actually something completely new.
And we didn't see this before.
So here we are not using
the from here as a method on an array.
Instead we are using it on the Array() constructor.
So that's why it's Array.from.
And this array here is exactly the same as this one.
So this function, so again, array here is a function
and then on this function object, we call the from() method.
So that sounds confusing, but we will make more sense of it
in the object oriented programming section.
But anyway, into this function here,
we can first pass in an object with the length property.
So let's set it to seven.
And then the second argument is a mapping function.
So it is exactly like the callback function that we pass
into the map() method.
So to start, let's also programmatically recreate
this array here of seven ones.
And so let's write a callback function here.
And in this case we don't even need any arguments,
but we still have to write a function.
So let's write an arrow function here,
which will simply return one in each iteration.
So no arguments, no current element,
no current index and nothing.
So all we want to return is a one
and that will then put a one in each of the array positions.
So let's call this one here Y
and then log it to the console.
And indeed we get here the exact same result
that we had before.
But in my opinion,
this is a lot cleaner than using this a weird new array
behavior than and together with the fill() method.
So in my opinion, this is way nicer.
But anyway, let's not take it one step further
and actually create this initial array from one to seven.
So Array.from{length: 7}
and then our callback function,
and as always, we get access to the current element.
So let's call it current first and then the current index.
And so the index will vary between zero and six.
And so all we have to return from this function is
i + one.
So again, this callback function here
is exactly like the one in a map() method.
So you can simply imagine that you're using this
as a callback function in calling the map() method
on an empty array.
And so as always, we get access to the current element
and the index.
And so adding one to the index will then give us values
from one to seven.
So Z meant...
Yeah, here we go.
Now, remember how earlier I used a variable like this.
So an underscore, which means a throwaway variable.
And so this is another use case for using this convention
because we do not need this current value at all.
But we still of course have to define something
as the first parameter because the index that we need
is only the second parameter.
But to denote that we are not using this current element,
we simply write an underscore.
And then other programmers
will also understand this convention
and automatically know that we don't use this parameter.
So this is how we create an array programmatically.
And I hope you can see all kinds of
different use cases for this.
For example, you could create an array
with 100 random dice rolls.
So maybe you want to try that out on your own,
and that is actually one of the assignments that I have
later here for this section.
So there's gonna be a couple of exercises
and this will be one of them.
But you can try it out immediately if you feel like it.
So try Array.from() to generate an array
with 100 random dice rolls.
See if you can do that, but anyway,
let's now move on and see a more real use case
of the Array.from() function.
Now, this Array.from() function
was initially introduced into JavaScript
in order to create arrays from array like structures.
So remember how I talked about so-called Iterables before,
so things like Strings, Maps or Sets,
they are all Iterables in JavaScript.
And so they can be converted to real arrays
using Array.from().
And that's the reason also for the name of the function,
because we can create arrays from other things.
All right.
Now, besides these obvious Iterables that I just mentioned,
like Maps or Sets another great example
of an array like structure
is the result of using querySelectorAll().
So maybe you remember that querySelectorAll() returns,
something called a NodeList,
which is something like an array,
which contains all the selected elements.
But it's not a real array,
and so it doesn't have methods like map(), for example.
But it's not a real array,
and so it doesn't have most of the array methods
like map() or reduce().
So if we actually wanted to use
a real array method like that on a NodeList,
we would first need to convert the NodeList to an array.
And for that Array.from() is perfect.
So let's do something here now.
And let's say that we do not have the movements
or for application here stored in an array.
So let me show that real quick.
So again, let's pretend that we only have these values,
so all of these movements only stored here
in the user interface,
but we do not have them somewhere in our code.
So we don't have an array containing these values.
But now let's say we want to calculate their sum.
And so therefore we need to somehow get them first
from the user interface and then do the calculation
based on that.
So let's create a variable called movementsUI.
So the ones that we get from the user interface.
So Array.from() and now here,
the elements that we want to convert to an array.
And so that's gonna be document.querySelectorAll(),
and then it is the movements of value class.
I'm gonna show it to you in a second.
So movements_value,
so in our HTML, we can see that...
Exactly, this is where the value itself is stored.
And so that's what we want to get.
So these numbers, right?
And so we are selecting all of the elements
that have this class.
So let's just start by checking it out, movementsUI,
but now we only get two elements here,
and so that's the one that by the time we load
this script here are already in the user interface.
So it's this one here.
So not the seven that are loaded from the account object.
So it's not gonna be this seven here.
So if we wanted to actually select exactly these elements,
we would have to do this code here on some event handler.
So let's do that, actually.
Let's simply perform this action
when we click somewhere here.
Let's say here on this BalanceLabel.
So it doesn't matter where we click,
So that is called the Label Balance.
So we can attach a EventListeners to every object.
It doesn't have to be a button.
So I think we never did this actually.
But let's see what happens now.
So let's login again here.
And again, remember that we are doing this
so that we can now read these seven movements
from the user interface as we click here.
And indeed now it worked.
So now we get these eight movements here.
and you see that indeed,
it is these values that we see now on the screen.
All right.
But now let me also show you that we cannot
call the map() method on it
because the map() method would be useful to now actually get
to adjust the number,
because you'll see that here we also have
this C or sign and so we need to get rid of that.
And so the map() method would be perfect for that.
So what we would like to do is,
let's just do it here for now.
We would love to do take the current movement,
and so in this case, the movement here,
let's just call it element actually,
because right now it is a dumb element.
So we would take this movement,
which is, remember one of these elements here,
and so from this element, we need to take the text content.
And then we also want to replace the Euro sign
with nothing basically.
So I'm using the emoji picker here again on the Mac,
but you can just get a symbol from your text up there,
so from the code we already wrote.
And I want to replace it with nothing,
but now you will see as we try this again,
that is not gonna work.
And in fact it does actually work,
and that's because I was saying it wrong.
Of course it's gonna work because this one here is
already a real array at this point.
So we created this movementsUI using Array.from()
and so of course it is gonna work already.
It would not work if we did it directly on the results
of the querySelectorAll().
So sorry for that mistake.
So it did indeed work already.
But we can make this even better.
First of course, we need to convert to a number,
but that is not the point here, actually.
So the point is that we can use now the second argument
of the Array.from() a function here,
which remember the mapping callback.
And so basically we can simply put this entire callback
right here as the second argument.
And now this movementsUI array is already the final array
as we see it here.
So let's just check that out
and then make really clear what just happened here.
So again,
and as we click here, we get indeed all the numbers
that we have here.
So let's recap.
We used a Array.from() to create an array from
the result of the querySelectorAll()
which is a NodeList, which is not really an array,
but an array like structure
and that array like structure
can easily be converted to an array
using Array.from().
And then as a second step,
we even included a mapping function,
which then forms that initial array
to an array exactly as we want it.
So basically converting the raw element to its text content
and replacing the Euro sign with nothing.
And so then in the end, we end up exactly
with the array of numbers that we intended.
And by the way, I'm not sure if I mentioned it earlier,
but there is another way of converting
this here to an array,
so let me grab it here.
So movementsUI2, and then we can actually
spread the results of this querySelectorAll()
into a new array as well.
So this also creates the array,
but then we would have to do the mapping separately.
And so actually I prefer this.
So to me, the Array.from() function was a great addition
to JavaScript in ES6.
And that's actually all I had to tell you
here in this video.
So that was the last couple of methods and functions
that we learned about a arrays.
And indeed, we learned a lot of methods in the section.
Now, keeping all of them in your mind
to solve different tasks is of course,
a very hard thing to do.
And so to make sense of all this mess,
in the next video, I will help you decide which array method
you should use in each situation
to solve different problems.