Original subtitles

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.