1
00:00:02,180 --> 00:00:08,210
Welcome back. I hope you took a nice long break after the functions video, because I know we covered a

2
00:00:08,210 --> 00:00:08,930
lot.

3
00:00:09,410 --> 00:00:12,510
We're going to learn something a little bit easier this time around.

4
00:00:12,770 --> 00:00:16,430
And we're going to learn our first data structure.

5
00:00:16,700 --> 00:00:19,630
Now, what is a data structure?

6
00:00:19,640 --> 00:00:29,000
Up until now we've only learned about numbers, strings, booleans, 'undefined' and functions. But how do you

7
00:00:29,000 --> 00:00:31,460
store all of them?

8
00:00:31,490 --> 00:00:37,250
We said that a variable is like a desk drawer, but you don't want to throw everything in there and have

9
00:00:37,250 --> 00:00:42,170
a huge mess. Or you don't want to throw just a pen and close that drawer.

10
00:00:42,170 --> 00:00:49,560
Ideally you can store more things, you can organize them. Data structures are like compartment holders

11
00:00:49,560 --> 00:00:56,680
in your desk, kind of like this picture over here. Different data structures are good at different things.

12
00:00:56,800 --> 00:01:03,820
For example, in this picture it looks like the file cabinet is really-really good for finding things,

13
00:01:03,820 --> 00:01:11,510
because, it's sort in alphabetical order. And data structures give us this ability to store information

14
00:01:11,960 --> 00:01:17,010
and access it in a way that is useful to us.

15
00:01:17,120 --> 00:01:20,840
So let's learn our first data structure and that is

16
00:01:24,160 --> 00:01:26,010
'Array'.

17
00:01:26,180 --> 00:01:32,690
Let's open up our console and we have our script file here and we're going to write our first array

18
00:01:33,050 --> 00:01:53,130
by doing variable 'list'. And we will have square brackets: 'tiger', 'cat', 'bear' and let's do 'bird'.

19
00:01:53,180 --> 00:01:55,320
So it's still a variable.

20
00:01:55,610 --> 00:01:57,530
And you see strings here.

21
00:01:57,530 --> 00:02:02,400
The only thing that's different are these square brackets.

22
00:02:03,630 --> 00:02:10,860
But I call this 'list' and it does look like a list, but I could have called this anything: 'listOfAnimals'

23
00:02:10,860 --> 00:02:12,450
for example.

24
00:02:13,580 --> 00:02:17,780
But an array, like I said, it's a way to organize information.

25
00:02:17,950 --> 00:02:20,140
And this is organized in this way.

26
00:02:20,140 --> 00:02:25,860
But how do we grab it? How do we grab one of these 4 items from the desk drawer?

27
00:02:26,080 --> 00:02:31,040
The way you access an array is - with something like this.

28
00:02:36,320 --> 00:02:36,610
OK.

29
00:02:36,630 --> 00:02:45,540
So, variable name - square brackets - a number and - square brackets. Let's do 'console.log' and see what happens.

30
00:02:50,330 --> 00:02:52,420
I get 'cat'.

31
00:02:53,060 --> 00:02:57,820
Hmmm, now, most of you might have thought that we would get 'tiger'.

32
00:02:57,830 --> 00:03:03,000
I mean 'list', we want the first item in the 'list'.

33
00:03:03,020 --> 00:03:07,830
Maybe that's how you read it, but that's not actually how it works. In computer science

34
00:03:07,880 --> 00:03:14,510
developers like counting from '0'. So '0' was the first number, then '1, then '2', then '3'.

35
00:03:14,870 --> 00:03:17,890
So, we always start counting from '0'.

36
00:03:17,900 --> 00:03:22,580
So if you want to get 'tiger' from this list, you do '0'.

37
00:03:22,800 --> 00:03:33,620
And let's refresh and we get 'tiger'. Let's play around with this in the console. If I copy the 'list' and

38
00:03:33,620 --> 00:03:34,730
put it like this. OK.

39
00:03:40,630 --> 00:03:42,550
The console actually gives us a nice

40
00:03:45,550 --> 00:03:51,780
log the array. And we see that we have: '0' - 'tiger', '1' - 'cat', '2' - 'bear', '3' - 'bird'.

41
00:03:51,790 --> 00:04:02,530
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'.

42
00:04:02,530 --> 00:04:07,300
Now what kind of things can arrays hold or is it just strings?

43
00:04:07,500 --> 00:04:09,190
Well, not really.

44
00:04:09,220 --> 00:04:13,870
We can do variable 'numbers'.

45
00:04:15,370 --> 00:04:21,420
And have '1, 2, 3, 4'.

46
00:04:21,700 --> 00:04:33,930
We can have 'booleans' and we can have 'true, false', 'true' again.

47
00:04:35,520 --> 00:04:37,730
And this is the fun part.

48
00:04:37,740 --> 00:04:43,830
You can also have 'functions' as an array.

49
00:04:43,990 --> 00:04:46,840
So I can do 'function apple':

50
00:04:50,720 --> 00:04:52,070
'console.log(apple)'.

51
00:04:57,400 --> 00:04:59,770
And then close up with the square brackets.

52
00:05:01,560 --> 00:05:13,000
And 'functionList' now has an array, at location '0' of 'apple'. Here it's even wackier, you can do a

53
00:05:14,360 --> 00:05:26,480
variable, let's call it a 'mixedList' and that can contain strings, can have numbers, can have undefined, you

54
00:05:26,480 --> 00:05:29,280
can have booleans.

55
00:05:29,780 --> 00:05:33,860
And like I showed you before, you can have functions.

56
00:05:36,930 --> 00:05:44,190
And 'mixedList' now has a whole bunch of wacky stuff.

57
00:05:44,210 --> 00:05:47,960
Now, this is not advised.

58
00:05:47,960 --> 00:05:53,870
It's actually a bit of a performance issue, when you have arrays with different types.

59
00:05:53,870 --> 00:05:59,580
So, you want to keep it the same but, I do want to show you that. We can put anything in arrays.

60
00:05:59,780 --> 00:06:07,870
We can also make arrays within an array.

61
00:06:07,950 --> 00:06:16,510
You see, what I just did here? We have an array, that has an array of 'tiger', 'cat', 'bear', 'bird'.

62
00:06:16,620 --> 00:06:20,040
So, if we save this and refresh, what do you think will happen?

63
00:06:22,270 --> 00:06:29,380
We get an array, that has 'tiger', 'cat', 'bear', 'bird'. But we accessed '0'.

64
00:06:30,860 --> 00:06:32,740
Let's try that again without the '0'.

65
00:06:32,780 --> 00:06:34,030
Let's see what happens.

66
00:06:35,490 --> 00:06:42,370
This time we get an array, just like it says here, that has an array inside of it.

67
00:06:43,220 --> 00:06:45,180
So how do we get, let's say, bear?

68
00:06:45,290 --> 00:06:54,090
Well, we would say, we want the first array. And then another pair of square brackets.

69
00:06:54,450 --> 00:07:04,260
And because 'tiger' is at '0, 1, 2', we want '2'. Or I say 'tiger' and then 'bear'.

70
00:07:04,310 --> 00:07:07,360
So we're getting the first array, this one.

71
00:07:07,700 --> 00:07:13,470
And within that first array we want the '0, 1, 2' - the 'bear'.

72
00:07:13,470 --> 00:07:14,910
Let's see if that works.

73
00:07:15,780 --> 00:07:17,550
And then we get 'bear'.

74
00:07:17,850 --> 00:07:23,740
Now arrays are cool because JavaScript has predefined methods for them.

75
00:07:23,940 --> 00:07:32,110
And what are those? For now think of them as functions. They are functions, that we can use on arrays.

76
00:07:32,240 --> 00:07:35,620
Don't worry about too much the term of method, we'll get to it later.

77
00:07:35,870 --> 00:07:37,690
But let me show you what I mean.

78
00:07:38,090 --> 00:07:40,310
If we return this 'list' to the way it was.

79
00:07:43,860 --> 00:07:47,330
Back to 'tiger', 'cat', 'bear', 'bird'.

80
00:07:47,450 --> 00:07:50,200
So, let's to, let's look at 'list', what we have in 'list' now.

81
00:07:50,210 --> 00:07:53,490
Now we have 'tiger', 'cat', 'bear', 'bird'. OK.

82
00:07:53,540 --> 00:08:02,250
So, let's see what sort of methods we can add to the 'list'. 'list' let's do 'shift'.

83
00:08:02,410 --> 00:08:03,740
And let's see what that does.

84
00:08:03,900 --> 00:08:08,910
I get back 'tiger', but if I look at the 'list' now, 'tiger' has been moved.

85
00:08:08,910 --> 00:08:15,610
I've shifted the array to remove 'tiger' and now everything shifted to the left.

86
00:08:16,390 --> 00:08:19,840
What if I do 'list.pop'?

87
00:08:24,550 --> 00:08:26,200
I get 'bird'.

88
00:08:26,440 --> 00:08:34,179
So, if we look at the 'list' now - it's 'popped' 'bird' off of the end of the array.

89
00:08:34,460 --> 00:08:43,549
And now I only have 'cat' and 'bear'. What if we do 'list.push', and then 'push'. Needs to have an argument,

90
00:08:43,570 --> 00:08:44,600
let's do 'elephant'.

91
00:08:47,550 --> 00:08:51,250
And now we get back to number '3'.

92
00:08:51,400 --> 00:08:52,850
You might guess what that means.

93
00:08:52,870 --> 00:08:54,340
And let's look at 'list'.

94
00:08:54,480 --> 00:08:56,890
Now we have 'cat', 'bear' and 'elephant'.

95
00:08:56,980 --> 00:09:00,070
So 3 items in the array.

96
00:09:00,250 --> 00:09:04,310
Let's clean this up a bit and let's just double check what we have in the 'list'.

97
00:09:04,420 --> 00:09:05,470
Perfect.

98
00:09:05,470 --> 00:09:07,310
What's another thing that we can do?

99
00:09:07,750 --> 00:09:14,500
Well, we can also do 'list.concat'. For concatenate.

100
00:09:15,040 --> 00:09:19,900
And in here we can actually add another array.

101
00:09:19,940 --> 00:09:32,800
Let's do 'bee' and 'deer'. Let's press 'Enter', and now we have an array of 5 items:

102
00:09:32,870 --> 00:09:43,760
'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

103
00:09:43,760 --> 00:09:48,280
called 'index' in arrays.

104
00:09:48,530 --> 00:09:53,010
So 'index' means: 'cat' has an 'index' of '0',

105
00:09:53,210 --> 00:10:00,210
'bear' - an index of '1', 'elephant' - of '2', 'bee' - of '3', 'deer' - an index of '4'. OK

106
00:10:01,340 --> 00:10:09,030
Let's do one last thing and then you can go do some exercises. As you can see a are a ton of fun.

107
00:10:10,150 --> 00:10:17,280
One last thing I want to show you is this: if we do 'list.sort'. Well, as the name suggests,

108
00:10:20,300 --> 00:10:26,670
we now have a sorted 'list'. But, well, why do we only have 3 items?

109
00:10:26,670 --> 00:10:28,530
Why not 5?

110
00:10:28,860 --> 00:10:30,300
And this is a little bit tricky.

111
00:10:30,300 --> 00:10:34,200
You have to, you have to practice a bit with the arrays to understand them.

112
00:10:34,290 --> 00:10:39,260
We've sorted, our array, but only the original one.

113
00:10:39,520 --> 00:10:46,780
The one that we concatenated, the one that we added, we didn't assign it to a variable. So it created a

114
00:10:46,780 --> 00:10:49,270
new array.

115
00:10:49,310 --> 00:10:59,010
So, now we had 2 arrays in existence: the 'list', which only had 'bear', 'cat' and 'elephant'. And another 'list' concat

116
00:10:59,020 --> 00:11:02,060
'bee', 'deer', that we didn't capture the value of.

117
00:11:02,060 --> 00:11:09,420
We didn't assign it to a variable. To show you let's copy this again.

118
00:11:11,500 --> 00:11:15,910
And try this: variable 'myList' equals

119
00:11:19,530 --> 00:11:33,810
OK. We have these 5 items and let's do variable 'myNewList' equals 'myList.concat'.

120
00:11:37,010 --> 00:11:42,830
And we'll do an array with 'monkey'.

121
00:11:42,840 --> 00:11:49,790
So, now, if I look at 'myList', I have 5 items:

122
00:11:49,930 --> 00:11:51,920
'cat', 'bear', 'elephant', 'bee', 'deer'.

123
00:11:52,380 --> 00:11:57,850
But if I look at 'myNewList' - I have 6 items: with 'monkey' in it.

124
00:11:59,470 --> 00:12:08,980
So, there are some methods, that creates new lists: like 'concat'; and some methods: like 'push' or 'pop', that

125
00:12:09,670 --> 00:12:13,730
don't create a new list, just modify the current one.

126
00:12:13,740 --> 00:12:17,260
I have some exercises for you at the end of this video.

127
00:12:17,280 --> 00:12:19,050
This is a really fun data structure.

128
00:12:19,050 --> 00:12:21,140
Hopefully, you're excited about learning this one.

129
00:12:22,170 --> 00:12:23,480
That's it for arrays.

130
00:12:23,790 --> 00:12:29,260
Once you understand the syntax and the structure, this has a lot of power.

131
00:12:30,420 --> 00:12:35,790
The last thing I wanted to show you was that our good friend 'W3C',

132
00:12:41,520 --> 00:12:51,690
has a great list of references of what methods arrays have.

133
00:12:52,140 --> 00:12:54,950
So, you can read through them as you work on your exercises.

134
00:12:54,960 --> 00:13:00,060
There's a few things, that I didn't cover in the video, that you'll have to search yourself through here

135
00:13:00,450 --> 00:13:03,500
to figure out what you'll need to solve the problems.

136
00:13:04,510 --> 00:13:05,980
I'll see you in the next one.