1
00:00:02,120 --> 00:00:03,570
So now we know how to work

2
00:00:03,570 --> 00:00:06,110
with values and variables.

3
00:00:06,110 --> 00:00:09,790
Even though we're not yet in the position to do really

4
00:00:09,790 --> 00:00:12,000
useful things with those features,

5
00:00:12,000 --> 00:00:12,880
we know about them,

6
00:00:12,880 --> 00:00:16,120
and these will be the core building blocks we need to

7
00:00:16,120 --> 00:00:19,240
then do more useful things, later.

8
00:00:19,240 --> 00:00:20,520
Now, up to this point,

9
00:00:20,520 --> 00:00:24,510
we always worked with strings and numbers

10
00:00:24,510 --> 00:00:27,560
and these are super crucial values,

11
00:00:27,560 --> 00:00:29,440
which we need all the time.

12
00:00:29,440 --> 00:00:32,820
But there are other useful values as well.

13
00:00:32,820 --> 00:00:33,900
For example,

14
00:00:33,900 --> 00:00:35,950
so-called arrays,

15
00:00:35,950 --> 00:00:38,210
which are lists of values.

16
00:00:38,210 --> 00:00:40,320
And let me give you an example.

17
00:00:40,320 --> 00:00:42,100
Let's assume we are dealing

18
00:00:42,100 --> 00:00:44,800
with some user input here

19
00:00:44,800 --> 00:00:46,700
and I'll actually delete all that code

20
00:00:46,700 --> 00:00:49,060
and write some new code.

21
00:00:49,060 --> 00:00:50,940
We are dealing with some user input

22
00:00:50,940 --> 00:00:53,340
and we get an age as we did it before,

23
00:00:53,340 --> 00:00:54,990
and we get a user name

24
00:00:54,990 --> 00:00:56,420
which maybe is Max,

25
00:00:56,420 --> 00:01:00,030
and now we also get some hobbies.

26
00:01:00,030 --> 00:01:02,520
We get some hobbies entered through some form,

27
00:01:02,520 --> 00:01:03,570
let's say,

28
00:01:03,570 --> 00:01:05,010
and we want to store

29
00:01:05,010 --> 00:01:07,440
that entered data in a variable

30
00:01:07,440 --> 00:01:08,970
so that we can later,

31
00:01:08,970 --> 00:01:11,000
output it, change it,

32
00:01:11,000 --> 00:01:13,430
do whatever we need to do with it.

33
00:01:13,430 --> 00:01:17,580
Now hobbies as the name suggests is not just a single value,

34
00:01:17,580 --> 00:01:18,963
but multiple values.

35
00:01:19,870 --> 00:01:22,520
Now we could, of course create multiple variables

36
00:01:22,520 --> 00:01:25,920
like hobby one and hobby two,

37
00:01:25,920 --> 00:01:30,270
and then store different values in different variables.

38
00:01:30,270 --> 00:01:32,780
But that has a couple of disadvantages,

39
00:01:32,780 --> 00:01:35,240
for one we don't know in advance,

40
00:01:35,240 --> 00:01:39,610
how many hobbies a user of our website might be entering.

41
00:01:39,610 --> 00:01:42,130
So we don't know as a developer,

42
00:01:42,130 --> 00:01:45,233
how many variables we need to create in advance.

43
00:01:46,250 --> 00:01:48,260
In addition, even if we would know it,

44
00:01:48,260 --> 00:01:50,390
we have a lot of variables

45
00:01:50,390 --> 00:01:53,290
which actually are kind of connected.

46
00:01:53,290 --> 00:01:56,393
And that's why we have this special array value.

47
00:01:57,240 --> 00:01:59,660
We create an array in JavaScript

48
00:01:59,660 --> 00:02:02,610
by using square brackets,

49
00:02:02,610 --> 00:02:06,073
opening and closing square brackets,

50
00:02:06,950 --> 00:02:10,919
and that creates a so-called array value.

51
00:02:10,919 --> 00:02:12,170
And in this array,

52
00:02:12,170 --> 00:02:14,630
we can store a list of values.

53
00:02:14,630 --> 00:02:16,300
So multiple values,

54
00:02:16,300 --> 00:02:18,270
which are kind of connected,

55
00:02:18,270 --> 00:02:21,860
you could say, stored in one variable.

56
00:02:21,860 --> 00:02:24,740
For example, multiple strings here,

57
00:02:24,740 --> 00:02:26,640
like sports

58
00:02:26,640 --> 00:02:28,270
and cooking

59
00:02:28,270 --> 00:02:29,960
and reading.

60
00:02:29,960 --> 00:02:31,010
And as you can see,

61
00:02:31,010 --> 00:02:34,060
you separate these different values,

62
00:02:34,060 --> 00:02:38,780
these different array elements with a comma,

63
00:02:38,780 --> 00:02:40,010
the white space here,

64
00:02:40,010 --> 00:02:41,880
the blank is optional.

65
00:02:41,880 --> 00:02:44,810
I just added it for readability purposes.

66
00:02:44,810 --> 00:02:46,980
It's technically not required.

67
00:02:46,980 --> 00:02:49,690
The comma is technically required.

68
00:02:49,690 --> 00:02:52,830
It's part of the JavaScript array syntax,

69
00:02:52,830 --> 00:02:54,770
and it tells JavaScript

70
00:02:54,770 --> 00:02:56,990
where a one value ends

71
00:02:56,990 --> 00:02:59,653
and a new value begins, so to say.

72
00:03:01,290 --> 00:03:02,220
So now with that,

73
00:03:02,220 --> 00:03:05,660
we created an array with three elements,

74
00:03:05,660 --> 00:03:07,840
separated by commas.

75
00:03:07,840 --> 00:03:10,290
And here I have three strings.

76
00:03:10,290 --> 00:03:12,410
We could also have numbers

77
00:03:12,410 --> 00:03:14,830
or numbers and strings mixed,

78
00:03:14,830 --> 00:03:16,200
that's all allowed.

79
00:03:16,200 --> 00:03:17,830
Depending on what you're storing,

80
00:03:17,830 --> 00:03:20,250
you might need different values in here.

81
00:03:20,250 --> 00:03:21,083
In this case,

82
00:03:21,083 --> 00:03:22,933
I need three strings.

83
00:03:24,210 --> 00:03:28,500
Now we have the convenience of having connected values

84
00:03:28,500 --> 00:03:30,830
stored in one variable,

85
00:03:30,830 --> 00:03:33,820
and we will also be able to dynamically add

86
00:03:33,820 --> 00:03:37,110
or remove values to and from this array,

87
00:03:37,110 --> 00:03:39,010
but that's a little bit more advanced,

88
00:03:39,010 --> 00:03:40,040
so we're going to see

89
00:03:40,040 --> 00:03:42,083
that later in this course.

90
00:03:43,320 --> 00:03:45,330
What we can already do though is

91
00:03:45,330 --> 00:03:48,300
output one of those array values.

92
00:03:48,300 --> 00:03:50,740
Maybe again, with the alert command,

93
00:03:50,740 --> 00:03:52,180
since at the moment,

94
00:03:52,180 --> 00:03:55,793
that's the only command we know for outputting something.

95
00:03:56,770 --> 00:03:58,410
And we can, for example,

96
00:03:58,410 --> 00:04:00,900
output the entire hobbies array

97
00:04:00,900 --> 00:04:03,270
by just pointing at hobbies here,

98
00:04:03,270 --> 00:04:04,830
just as we before did it

99
00:04:04,830 --> 00:04:06,853
with our text and our age.

100
00:04:08,290 --> 00:04:09,830
If I save that

101
00:04:12,060 --> 00:04:13,890
and I reload this page,

102
00:04:13,890 --> 00:04:17,110
I just get this array being output here.

103
00:04:17,110 --> 00:04:17,942
By the way,

104
00:04:17,942 --> 00:04:22,640
if you are still seeing some old alerts from before,

105
00:04:22,640 --> 00:04:25,190
just a close them by clicking okay,

106
00:04:25,190 --> 00:04:27,930
and then reload the page thereafter.

107
00:04:27,930 --> 00:04:30,100
And now here I see my array data

108
00:04:30,100 --> 00:04:31,563
sports, cooking, reading.

109
00:04:33,010 --> 00:04:34,480
So, conveniently,

110
00:04:34,480 --> 00:04:37,500
alert even knows how to deal with an array

111
00:04:37,500 --> 00:04:40,930
and it also outputs that array data.

112
00:04:40,930 --> 00:04:44,890
But sometimes we just need a single item from an array,

113
00:04:44,890 --> 00:04:47,080
no matter if it's for outputting it,

114
00:04:47,080 --> 00:04:48,250
for alerting it

115
00:04:48,250 --> 00:04:49,970
or for something else.

116
00:04:49,970 --> 00:04:50,803
And therefore,

117
00:04:50,803 --> 00:04:55,360
we also have a special syntax for pointing at a specific

118
00:04:55,360 --> 00:04:57,663
single item in an array.

119
00:04:59,000 --> 00:05:00,330
In the place

120
00:05:00,330 --> 00:05:02,820
where we wanna access a single item,

121
00:05:02,820 --> 00:05:06,380
we add square brackets after the variable name,

122
00:05:06,380 --> 00:05:07,400
just like this,

123
00:05:07,400 --> 00:05:09,830
directly after the variable name.

124
00:05:09,830 --> 00:05:11,000
And then here,

125
00:05:11,000 --> 00:05:14,530
the square brackets will not create a new array,

126
00:05:14,530 --> 00:05:17,900
that would only be the case after the equal sign here.

127
00:05:17,900 --> 00:05:20,970
Instead, in conjunction with that variable

128
00:05:20,970 --> 00:05:22,890
that stores and array,

129
00:05:22,890 --> 00:05:26,940
we can now put the so-called index number,

130
00:05:26,940 --> 00:05:30,280
the identifier of one of these array items

131
00:05:30,280 --> 00:05:34,980
between those square brackets to point at a specific item.

132
00:05:34,980 --> 00:05:36,990
And for that it's important to know

133
00:05:36,990 --> 00:05:38,660
that in JavaScript

134
00:05:38,660 --> 00:05:41,550
and actually in most programming languages,

135
00:05:41,550 --> 00:05:44,710
the items in such an array

136
00:05:44,710 --> 00:05:49,140
automatically receive a index number behind the scenes,

137
00:05:49,140 --> 00:05:52,810
and every item has its own unique number.

138
00:05:52,810 --> 00:05:55,950
And that index simply starts at zero

139
00:05:55,950 --> 00:05:57,400
for the first item,

140
00:05:57,400 --> 00:05:59,200
though that's important,

141
00:05:59,200 --> 00:06:02,100
zero not one for the first item,

142
00:06:02,100 --> 00:06:03,850
one for the second,

143
00:06:03,850 --> 00:06:05,330
two for the third,

144
00:06:05,330 --> 00:06:06,470
and so on.

145
00:06:06,470 --> 00:06:09,320
These are our index numbers.

146
00:06:09,320 --> 00:06:10,250
And hence here,

147
00:06:10,250 --> 00:06:13,680
if I want to output the first item from that array,

148
00:06:13,680 --> 00:06:16,830
I put zero between those square brackets,

149
00:06:16,830 --> 00:06:19,350
since that index starts at zero.

150
00:06:19,350 --> 00:06:22,950
And the first item in the array has that index zero.

151
00:06:22,950 --> 00:06:24,510
Therefore,

152
00:06:24,510 --> 00:06:27,230
that's the identifier of this first item in

153
00:06:27,230 --> 00:06:28,063
this array.

154
00:06:29,170 --> 00:06:31,120
And if I save this now

155
00:06:31,120 --> 00:06:32,970
and this page reloads,

156
00:06:32,970 --> 00:06:35,410
I see sports,

157
00:06:35,410 --> 00:06:37,453
which is my first array item.

158
00:06:39,060 --> 00:06:41,620
And that's how we can work with arrays.

159
00:06:41,620 --> 00:06:46,620
A very useful kind of value for connecting multiple values

160
00:06:46,620 --> 00:06:50,193
and storing them in one at the same variable.