Welcome back. I hope you took a nice long break after the functions video, because I know we covered a
lot.
We're going to learn something a little bit easier this time around.
And we're going to learn our first data structure.
Now, what is a data structure?
Up until now we've only learned about numbers, strings, booleans, 'undefined' and functions. But how do you
store all of them?
We said that a variable is like a desk drawer, but you don't want to throw everything in there and have
a huge mess. Or you don't want to throw just a pen and close that drawer.
Ideally you can store more things, you can organize them. Data structures are like compartment holders
in your desk, kind of like this picture over here. Different data structures are good at different things.
For example, in this picture it looks like the file cabinet is really-really good for finding things,
because, it's sort in alphabetical order. And data structures give us this ability to store information
and access it in a way that is useful to us.
So let's learn our first data structure and that is
'Array'.
Let's open up our console and we have our script file here and we're going to write our first array
by doing variable 'list'. And we will have square brackets: 'tiger', 'cat', 'bear' and let's do 'bird'.
So it's still a variable.
And you see strings here.
The only thing that's different are these square brackets.
But I call this 'list' and it does look like a list, but I could have called this anything: 'listOfAnimals'
for example.
But an array, like I said, it's a way to organize information.
And this is organized in this way.
But how do we grab it? How do we grab one of these 4 items from the desk drawer?
The way you access an array is - with something like this.
OK.
So, variable name - square brackets - a number and - square brackets. Let's do 'console.log' and see what happens.
I get 'cat'.
Hmmm, now, most of you might have thought that we would get 'tiger'.
I mean 'list', we want the first item in the 'list'.
Maybe that's how you read it, but that's not actually how it works. In computer science
developers like counting from '0'. So '0' was the first number, then '1, then '2', then '3'.
So, we always start counting from '0'.
So if you want to get 'tiger' from this list, you do '0'.
And let's refresh and we get 'tiger'. Let's play around with this in the console. If I copy the 'list' and
put it like this. OK.
The console actually gives us a nice
log the array. And we see that we have: '0' - 'tiger', '1' - 'cat', '2' - 'bear', '3' - 'bird'.
So, as you can see, an array is just a nice way for us to list items in an order from '0', '1', '2' and '3'.
Now what kind of things can arrays hold or is it just strings?
Well, not really.
We can do variable 'numbers'.
And have '1, 2, 3, 4'.
We can have 'booleans' and we can have 'true, false', 'true' again.
And this is the fun part.
You can also have 'functions' as an array.
So I can do 'function apple':
'console.log(apple)'.
And then close up with the square brackets.
And 'functionList' now has an array, at location '0' of 'apple'. Here it's even wackier, you can do a
variable, let's call it a 'mixedList' and that can contain strings, can have numbers, can have undefined, you
can have booleans.
And like I showed you before, you can have functions.
And 'mixedList' now has a whole bunch of wacky stuff.
Now, this is not advised.
It's actually a bit of a performance issue, when you have arrays with different types.
So, you want to keep it the same but, I do want to show you that. We can put anything in arrays.
We can also make arrays within an array.
You see, what I just did here? We have an array, that has an array of 'tiger', 'cat', 'bear', 'bird'.
So, if we save this and refresh, what do you think will happen?
We get an array, that has 'tiger', 'cat', 'bear', 'bird'. But we accessed '0'.
Let's try that again without the '0'.
Let's see what happens.
This time we get an array, just like it says here, that has an array inside of it.
So how do we get, let's say, bear?
Well, we would say, we want the first array. And then another pair of square brackets.
And because 'tiger' is at '0, 1, 2', we want '2'. Or I say 'tiger' and then 'bear'.
So we're getting the first array, this one.
And within that first array we want the '0, 1, 2' - the 'bear'.
Let's see if that works.
And then we get 'bear'.
Now arrays are cool because JavaScript has predefined methods for them.
And what are those? For now think of them as functions. They are functions, that we can use on arrays.
Don't worry about too much the term of method, we'll get to it later.
But let me show you what I mean.
If we return this 'list' to the way it was.
Back to 'tiger', 'cat', 'bear', 'bird'.
So, let's to, let's look at 'list', what we have in 'list' now.
Now we have 'tiger', 'cat', 'bear', 'bird'. OK.
So, let's see what sort of methods we can add to the 'list'. 'list' let's do 'shift'.
And let's see what that does.
I get back 'tiger', but if I look at the 'list' now, 'tiger' has been moved.
I've shifted the array to remove 'tiger' and now everything shifted to the left.
What if I do 'list.pop'?
I get 'bird'.
So, if we look at the 'list' now - it's 'popped' 'bird' off of the end of the array.
And now I only have 'cat' and 'bear'. What if we do 'list.push', and then 'push'. Needs to have an argument,
let's do 'elephant'.
And now we get back to number '3'.
You might guess what that means.
And let's look at 'list'.
Now we have 'cat', 'bear' and 'elephant'.
So 3 items in the array.
Let's clean this up a bit and let's just double check what we have in the 'list'.
Perfect.
What's another thing that we can do?
Well, we can also do 'list.concat'. For concatenate.
And in here we can actually add another array.
Let's do 'bee' and 'deer'. Let's press 'Enter', and now we have an array of 5 items:
'cat', 'bear', 'elephant', 'bee' and 'deer'. And I haven't told you this, but when we look at the numbers '0, 1, 2, 3, 4', they're
called 'index' in arrays.
So 'index' means: 'cat' has an 'index' of '0',
'bear' - an index of '1', 'elephant' - of '2', 'bee' - of '3', 'deer' - an index of '4'. OK
Let's do one last thing and then you can go do some exercises. As you can see a are a ton of fun.
One last thing I want to show you is this: if we do 'list.sort'. Well, as the name suggests,
we now have a sorted 'list'. But, well, why do we only have 3 items?
Why not 5?
And this is a little bit tricky.
You have to, you have to practice a bit with the arrays to understand them.
We've sorted, our array, but only the original one.
The one that we concatenated, the one that we added, we didn't assign it to a variable. So it created a
new array.
So, now we had 2 arrays in existence: the 'list', which only had 'bear', 'cat' and 'elephant'. And another 'list' concat
'bee', 'deer', that we didn't capture the value of.
We didn't assign it to a variable. To show you let's copy this again.
And try this: variable 'myList' equals
OK. We have these 5 items and let's do variable 'myNewList' equals 'myList.concat'.
And we'll do an array with 'monkey'.
So, now, if I look at 'myList', I have 5 items:
'cat', 'bear', 'elephant', 'bee', 'deer'.
But if I look at 'myNewList' - I have 6 items: with 'monkey' in it.
So, there are some methods, that creates new lists: like 'concat'; and some methods: like 'push' or 'pop', that
don't create a new list, just modify the current one.
I have some exercises for you at the end of this video.
This is a really fun data structure.
Hopefully, you're excited about learning this one.
That's it for arrays.
Once you understand the syntax and the structure, this has a lot of power.
The last thing I wanted to show you was that our good friend 'W3C',
has a great list of references of what methods arrays have.
So, you can read through them as you work on your exercises.
There's a few things, that I didn't cover in the video, that you'll have to search yourself through here
to figure out what you'll need to solve the problems.
I'll see you in the next one.