Welcome back, welcome to another lecture today, we're going to talk about JavaScript worries and about
data structures.
So JavaScript are one of the most basic form of data structures.
OK, now, before I start explaining, just let's create the first array called first array.
Wow.
That's was pretty nice.
So how do we know that we're creating a rate while we need to use this brackets, an inside array.
We can have one.
We can have zero or multiple items.
Now, if we don't specify any items, this is only the declaration of an empty array.
OK, now, but if we want to have items inside, we can have multiple items.
In this case, I'm going to use three strings, so I'm just going to name them first.
And they need to be spaced with the comma and third loops.
Now you need to put quotes.
So single quotes or double quotes will do a job, right?
Very good.
Now, these are called items inside the array.
But how we can access them?
Well, I'm just going to make your life easy and console that.
Log the first array.
Save it.
Go back into the browser and there you go.
So we have first, second, third.
And the length of the entire is three.
Now, look at this side.
Well, we have here starts from zero one two.
So these are called indexes.
So our arrays are based on indexes.
So they work.
We starting from zero.
That's why when we do the for loop, remember, we used variable AI to be equal to zero.
So we initialize variable AI to to hold the value to start from zero.
And why is this.
Well now we can add, you will know because when we use an array we can print out probably this part
now probably first element with using the index.
So let's let me close this one because it's flicking all the time.
Right, sorry about this, guys say that we don't need it now, how we got how I can access the first
item of this array.
Well, I do know the indexes, so cancel that lock first rate.
I need to put the brackets in the position.
Now, I know the position because it started from zero.
OK.
Very good first.
Let me just right here, a common get the first first item from an array.
Nice.
I'm just going to copy this one and I'm going to do it two times.
Second and third.
Very good.
Now.
In order to get the second one you put here, sorry, one and you need to get the last one is the third
you need to put here, too.
Now, I have all of these items stored like this, but it's very good idea not to use guns a lot just
to create the first variable with any name that you want and just put the first array of sorry of zero.
Now, instead of counseling, log the first array.
You can cancel out the first variable and you can reuse it later on.
Right.
So it will yield the same result.
So let me just copy this one.
Make a comment here coming out this one.
And I'm doing this because you will know what we have done in the last second.
And that will be the first array of.
One and I'm just going to copy this here and let's call it third, and this will be number two.
Very good.
So I'm going to cause a lot better.
And also I need to do the same with the second one.
Nice.
Very good.
Save it.
Now I have the same results.
Oh, yeah, we spent a little bit time of explaining this, but it's all good now.
The arrays, we can store multiple values, but can we store a different data in JavaScript types?
Yes.
And we can store any data, any JavaScript type that we want.
And that is called a mixed theory.
But it's never good to have a mystery.
Why?
Because the data structures are all about relationship between those data that we put inside.
Right.
So we can it's going to be easy for us to navigate through that data if we use something like this,
if we use aree, that is with strings or if you use array of numbers.
OK, now let's create this mystery.
VAR.
Mix, all right, and now this array can hold one to three.
For right, true, false, so it can have no strings booleans.
And also we can have a function.
So function makes very good counsel that law makes.
How cool is this now the function can have oops, I didn't call this function console the lock makes.
All right, very good.
And now we have seven items.
We do have one, two, three, their numbers and their blue four.
Then we have boolean values, four and five.
This is a string and we have the last one.
It's function, right?
Oh, good.
Now you know that the mixed array can have a different JavaScript type.
Very good.
Now, what is something else that I want to show you?
Well, now you know how you can create a mixed array.
So let's move on to something more interesting and an array can have.
Inside another arena, and that is very interesting.
For example, let's create a reservoir called Inner Oray or are only that is a short version.
Now here I'm just going to say, Rick, and inside I will have another array with my details.
For example, one, two, three, four or five.
That will be, for example, student I.D. Then I will have a place of living or country.
But in order to specify another array inside this array, you need to use again these brackets.
Let's a the NRA and see what I will have.
Very good.
Now here say that I have Rick as a string and then I have array of three elements.
Nice.
So if you go like this on the first position, I will have that array.
So for example, if I want to grab that Inari or.
Einar Oray or just Nuray here, I'm just going to call it Nuray, very good.
And I want to grab only this one.
So how I can do this Inari of a position one, because in that position, that is the position where
this Inari is stored on index one.
Very good.
So if I can't log the new array now, I will have the only one single array here.
Very good.
Now, basically what I can do, I can just grab any item from here based on the position zero one,
the three.
But even here, even if I don't save it anywhere, I can still grab it.
For example, the Inari.
So I'm going to say, let's grab Malbon here.
Right.
Let's find Nadelberg.
From the inner all right, very good.
So how we can do this without storing this to a new array?
Now I'm just going to the console boops.
Because I use caps, caps, lock, cancel that lock and let's start like this in hurry again and it
will give me this.
Now I just want to access the number one.
Very good.
Save it now, it will get me the entire array, you know, I can just click here and see that the Melbourne
is on position one, so how I can get that position while here I can put another pair of bracket and
put number one and let's save it.
Now, I do have the item called Mount Melbourne.
Nice.
So we can practice this one.
And it's very easy to understand.
Now JavaScript comes with predefined methods or for the arrays and we can use them straight out of the
box.
Well, for that in order to show you J.S. predefine.
Methods.
Well, I need to create an array, for example, colors, and this will be a little bit of writing for
me.
The second will be orange.
The third will be blue.
Then it will be brown.
The four will be black.
They will start with be then yellow.
Then I will have a green color in the last.
I want to have a purple.
Very good.
Now I will use let's cancel the lock the array to see what's happening.
Cancel the log the colors.
That's the name of the race and color.
And I do have the entire holding eight items starting from position zero or index zero.
So first method that I want to show you, it's called shift.
And what does this shift means?
She will remove the zero index from this array.
So the zero is red.
OK, so how I can use this method.
So I need to use colors, the name of the array then shift.
And because it's a method I need to use.
These brackets save it, do it like this, console the log.
Remember that you need to lock the not console colors again Durry in order to see the changes.
And voila, I do have seven now in the red is missing and orange became zero.
And before I have.
Oops.
Before I had.
Right to be zero, right, and shoot, we should have here the red as a zero and I'm not sure why it's
not checking out doesn't matter.
So the orange now became zero.
And it's not the red is not in the items in here.
You can see the size.
It's seven.
Very good.
Now, let's cut this one from here and test it out a little bit and see what will happen.
So if I just you don't need a semicolon inside.
So if you save this one and go back now, it will give me the red or the item I just removed from the
or the item that I shift or remove.
Take it out from here from this array.
So this give me an option for for me so I can create a variable color red, because I know that the
red is the name of the first item and I can just do this, save it here.
Very good.
Now in that very old red it will hold the item.
So if I do right now again, I will have the value or what is stored from this function.
So now just print out the colors again.
So now I take one item, but I also store that item here just in case I will need them in future.
Very good.
Another method that I want to show you is called unshaved.
So these methods will add a new item at the beginning of the array, or it's totally opposite to the
shift one.
Actually, I'm just going to copy the entire one, just going to put it here and shivved will be on
shift.
Very good.
So Koller's unshaved and now what item I want to put here.
So this should be on shivved.
Good.
Now, fully unshaved, we need to specify what we want to put in the beginning of the array.
Well, I just want to put the item that I just remove.
Let's see if it's going to work.
Nice.
Now, I do have a seven with the shift and now I do have back the entire array.
Also, what you can do, you can make a comment here and seeing here a shift and this one saying on.
Shift.
Also, make sure that you put a comma there.
So shift.
Removes one item, unshaved adds item, and we added the same one that we just remove.
Very good now.
How we can remove the last element from this array, for example, the purple, well, there is a function
for that or a method called.
But.
So we're going to use the pop method to remove the last.
Item on the array now, what are we going to do here?
I'm going to say colors, dot, pop.
And cancel that log and we'll say pop hooks and colors again, we need to print out the array in order
to see if it's working.
Well, I do have seven and I don't have the purple anymore, and that is great.
But also, pop, it pops the item from the array and I can store that one as last so far purple.
Very good.
So now we just removed and also we store this one.
So if you want to make sure that the correct Color Purple is there, just cancel that log the purple
variable.
OK, let's see where we get.
I do have the purple now.
I'm good to go.
So it's always good to store whatever you are popping or shifting.
So in future, if you want to return them back, you can right now.
If you want to return this item, we can push this one back to the rate so we can push anything that
we want, but this will add the new item at the end.
So logically is to push the proposal back.
Very good.
I'm just going to copy this one here.
And I'm just we don't need this one anymore.
We don't need this one anymore.
But we need to use the push method.
And the push method requires an argument.
Which argument is that?
The variable from here now this will be push.
Very good.
Now, I do have my original Ari back because I first we shift one, then we on shift that one, then
we pop the last one, then we return that one to the push method back to its place.
Very good.
So we have learned a couple of methods.
Now, another one that is very interesting is and it's very vital everyone is using it's called sword.
Now we can sort the array so collars lets me control that lock collars, that sword and that is pretty
much it.
You need the brackets there.
Let's put it here.
Comment sort, because we do want to know what we are doing.
Very good.
Now Sword and we do have black, blue, brown, green.
These are sorting alphabetically.
Good.
So one couple of more things that I want to show you is that we can concatenate on arrays, same as
we do.
We concatenate strings, we can concatenate arrays.
Well, let's do this.
I want to add pink to this array.
So how can do this, let's say concat here now colors that concat here it is the method and I can add
pink.
Save it.
Cancel that log.
Colors now they should add a pink.
Wait, here it is now, let me just make sure that I use concat.
Here and now it's going to be more real, but what is happening, where is the pink?
Well, the pink is not there.
Why?
Because we just can't get the colors with the pink, but we never save it or store it in these colors.
So the solution is very easy.
So what I can do, I can say I'm just going to comment this one out and I'm going to copy it.
Now, in order to save it, we need to use colors equal to colors that concatenating now in this array,
in the region rate that I have here, I saved a new one with the pink color inside.
So save it and I'm just going to print it out.
And there you go.
Now, you do have the pink color there.
And that's it for this lecture, ladies and gentlemen.
So if you want to if you don't if you didn't understand some things, just go watch this lecture again.
But this is pretty much it there.
More more of these methods.
But I can't do all of them.
So what you need to do is pretty much go to V three schools and just find or research about other methods
that we can use on arrays and a predefine.
Now, do the exercise.
It will require you to do a little bit of searching online and that's the goal so you can find more
things in practice.
So I will see you in the next one.
Sorry, this was super long, but it had to be done by.