1
00:00:02,400 --> 00:00:05,790
How could we introduce arrays and objects here?

2
00:00:05,880 --> 00:00:13,280
Well let's say we want to log every operation we do, so when we add, when we subtract,

3
00:00:13,290 --> 00:00:14,550
when we multiply,

4
00:00:14,550 --> 00:00:21,450
we kind of want to log this, we want to store this in an internal log which we theoretically could send

5
00:00:21,450 --> 00:00:24,030
to a server or anything like that.

6
00:00:24,030 --> 00:00:24,450
In

7
00:00:24,510 --> 00:00:25,280
Node.js,

8
00:00:25,290 --> 00:00:27,660
we could write it to a file, in the browser

9
00:00:27,660 --> 00:00:32,880
we can't because we don't have access to the filesystem there for security reasons but we might want

10
00:00:32,880 --> 00:00:34,250
to keep track of that, right,

11
00:00:34,260 --> 00:00:38,490
because we want to store it on our own analytic server for example.

12
00:00:38,490 --> 00:00:45,210
Now in such a case, we want to keep track of a list of operations because we're not just interested in

13
00:00:45,480 --> 00:00:51,240
the first click on the add button but we want to store every click on every button and therefore we

14
00:00:51,240 --> 00:00:56,900
need to have a list of data that gets bigger and bigger over time. For that,

15
00:00:56,900 --> 00:01:04,550
we can add a new global variable here and I will create it here with the let keyword and name it log

16
00:01:04,670 --> 00:01:05,320
entries,

17
00:01:05,310 --> 00:01:07,580
the name is totally up to you of course,

18
00:01:07,580 --> 00:01:13,010
again it should be a name that kind of gives an idea of which kind of data you're going to store

19
00:01:13,010 --> 00:01:18,380
and it's a plural name here because I'll have multiple elements in there because it should be such an

20
00:01:18,590 --> 00:01:20,540
array as I mentioned.

21
00:01:20,540 --> 00:01:26,600
Now you create an array by adding square brackets and it can either be an empty array or of course an

22
00:01:26,600 --> 00:01:32,210
array with some initial data and there, each element is separated from the other elements by a comma.

23
00:01:32,210 --> 00:01:36,350
Typically you also add a whitespace to improve readability but that's not required,

24
00:01:36,380 --> 00:01:38,590
the comma however is required.

25
00:01:38,870 --> 00:01:43,850
Now here, I want to have an empty array though because initially we have no log entry, so therefore

26
00:01:43,850 --> 00:01:46,640
we can create it just like this.

27
00:01:46,640 --> 00:01:52,550
Now if we want to add a log entry, let's say when we click the add button here, we could say we go down

28
00:01:52,550 --> 00:01:58,580
there and now we want to edit this array and add a new entry.

29
00:01:58,650 --> 00:02:00,470
Now how can we do that?

30
00:02:01,200 --> 00:02:07,290
Well we can refer to log entries and now previously we always assign a new value by setting this equal

31
00:02:07,290 --> 00:02:08,400
to a new value.

32
00:02:08,400 --> 00:02:11,550
Now of course, we can set it equal to a new value here as well

33
00:02:11,640 --> 00:02:16,830
and here the new value would be a new array because I want to overwrite the existing empty array and

34
00:02:16,830 --> 00:02:23,740
therefore of course we could also leave this uninitialized with a new array which now includes let's

35
00:02:23,740 --> 00:02:25,750
say the entered number,

36
00:02:26,020 --> 00:02:26,260
right?

37
00:02:26,260 --> 00:02:34,600
So now, we set this to a new array, a new list of data with one element and that one element is this entered

38
00:02:34,600 --> 00:02:39,010
number which we have. Now that's one way of editing an array,

39
00:02:39,050 --> 00:02:44,660
we basically overwrite the array stored in the variable with a brand new array and sometimes that's

40
00:02:44,660 --> 00:02:49,180
just what you need but sometimes you also want to edit the existing one

41
00:02:49,460 --> 00:02:53,760
and for that, let's reinitialize this to an empty array up there,

42
00:02:53,840 --> 00:02:56,590
let's say we want to add a new element to this existing array,

43
00:02:56,600 --> 00:03:02,420
for that we can reach out to this array and not assign a new value with the equal sign but instead use

44
00:03:02,420 --> 00:03:09,740
a dot to use a function that belongs to the array so to say and there, there's a specific function built

45
00:03:09,740 --> 00:03:12,720
into Javascript and that's the push function.

46
00:03:12,710 --> 00:03:18,350
Now actually, arrays have way more than just a push function and I have a whole module dedicated to arrays

47
00:03:18,560 --> 00:03:24,050
where we dive way deeper into them, for now let's focus on the push function. The push function does what

48
00:03:24,050 --> 00:03:30,890
the name implies, it pushes a new element onto this array, so it adds a new element to the list and there

49
00:03:30,890 --> 00:03:33,700
we could say that should be the entered number.

50
00:03:34,100 --> 00:03:37,180
Now it would be kind of neat to see that array

51
00:03:37,400 --> 00:03:41,790
and for now we can do something which you will often do during development,

52
00:03:41,990 --> 00:03:49,490
you can add console log here and that's a built-in functionality built into Javascript, a built-in command

53
00:03:49,520 --> 00:03:56,690
which the browser understand which allows you to output something into that development console, into

54
00:03:56,690 --> 00:03:57,280
the console

55
00:03:57,290 --> 00:04:01,930
which you see in the developer tools where we previously saw some errors.

56
00:04:01,930 --> 00:04:06,360
Now here we're not outputting an error but an information log message

57
00:04:06,440 --> 00:04:13,130
and here we can for example log the log entries, so the value that's currently in that variable, which

58
00:04:13,130 --> 00:04:15,800
should be that array with one extra element

59
00:04:15,860 --> 00:04:20,480
if we run this for the first time and after the second click, it should have two elements because we

60
00:04:20,540 --> 00:04:23,060
always push a new one.

61
00:04:23,110 --> 00:04:29,530
Let's see, let's save that, open the developer tools in your browser and go to the console there, reload

62
00:04:29,530 --> 00:04:34,700
the page and now enter any number you want and click on the plus

63
00:04:34,810 --> 00:04:36,880
and of course you see the result down there

64
00:04:36,910 --> 00:04:40,030
but more interesting than that, you see this thing on the right here,

65
00:04:40,060 --> 00:04:41,830
that is your array

66
00:04:41,830 --> 00:04:49,150
and if I add another value, so if I click the plus again, you see now this is the new log, this now is

67
00:04:49,150 --> 00:04:52,960
a new array or the old array with an extra element to be precise.

68
00:04:52,960 --> 00:04:55,810
You see we have two elements and they're separated by commas,

69
00:04:55,810 --> 00:04:57,160
in this case two numbers

70
00:04:57,180 --> 00:05:02,140
but again you could store any data in the array and therefore that's what we have in there

71
00:05:02,230 --> 00:05:09,010
and this is a great way of keeping track of multiple items, multiple pieces of data that are kind of

72
00:05:09,010 --> 00:05:17,280
belonging together and that should be managed as a list of data. Now if you want to read from the array

73
00:05:17,590 --> 00:05:23,290
in the sense of not logging it entirely but let's say you want to extract the first element that's in

74
00:05:23,290 --> 00:05:23,680
there,

75
00:05:23,680 --> 00:05:26,590
so the five in this case,

76
00:05:26,590 --> 00:05:33,030
well then you can also do that. If you want to access a specific element in the array,

77
00:05:33,040 --> 00:05:37,630
you do this by adding square brackets after the variable name

78
00:05:37,630 --> 00:05:44,300
if you access the variable, so in a place where you want to get or read the variable, you can also

79
00:05:44,330 --> 00:05:45,820
add square brackets thereafter

80
00:05:45,840 --> 00:05:54,290
and now in there, you add the index, so the position so to say, of the element you want to extract. Now

81
00:05:54,290 --> 00:06:00,860
you could think that you add one here if you want to read the first value but this will actually not

82
00:06:01,100 --> 00:06:08,060
work because and that's just something you have to know but thankfully it's the case in pretty much all

83
00:06:08,090 --> 00:06:11,260
programming languages or in most programming languages,

84
00:06:11,450 --> 00:06:21,350
arrays are zero-based or their index is zero-based, which means the first element in an array has

85
00:06:21,350 --> 00:06:23,140
an index of zero.

86
00:06:23,150 --> 00:06:29,720
So if you want to access specifically the first element, you want to retrieve that, to work with it, then

87
00:06:29,720 --> 00:06:37,320
you do this with this square bracket notation and then with index zero. Index one would refer to the

88
00:06:37,320 --> 00:06:42,210
second element, index two to the third, well and so on and index zero

89
00:06:42,210 --> 00:06:47,480
therefore to the first one, that's just how it works in many programming languages.

90
00:06:47,480 --> 00:06:53,420
So now what we should see when we log this is that we don't log the entire array but a single value

91
00:06:53,420 --> 00:06:55,340
of the array, to be precise

92
00:06:55,340 --> 00:06:58,510
always the first element in the array.

93
00:06:58,520 --> 00:07:05,150
So if I now reload this and now I add let's say six here, you see a log six, not as an array so without

94
00:07:05,150 --> 00:07:09,980
the square brackets but just a number because that's what we're retrieving and retrieving by the way

95
00:07:09,980 --> 00:07:11,990
does not mean that we destroy the array,

96
00:07:12,050 --> 00:07:14,390
it's still there, it's still managed in memory,

97
00:07:14,390 --> 00:07:19,490
I'm just reading a single value from there because that's also something you need quite often in programming,

98
00:07:19,620 --> 00:07:21,050
that you have a list of data

99
00:07:21,080 --> 00:07:26,170
but then for a specific operation, you want to work with one specific entry of that list

100
00:07:26,210 --> 00:07:31,060
and again as so often, we'll of course also see examples for that throughout the course.

101
00:07:31,100 --> 00:07:36,020
So that's how you can add a new element to an array, by the way if you would try to read the second

102
00:07:36,020 --> 00:07:36,400
element,

103
00:07:36,410 --> 00:07:42,470
so the one with index one here, we would actually get an error here in this code because when I reload

104
00:07:42,470 --> 00:07:46,630
this, when I add a new element here, you see I now get undefined,

105
00:07:46,640 --> 00:07:52,190
so not an error technically but also not the value we expected because of course this already fires,

106
00:07:52,190 --> 00:07:53,920
for the first element we add it,

107
00:07:53,930 --> 00:07:59,330
so when I clicked the button for the first time and there we simply have no second element in the array

108
00:07:59,330 --> 00:08:03,420
yet because we only added one value, so we pushed one value into the array,

109
00:08:03,470 --> 00:08:05,250
so there only is one value in there

110
00:08:05,300 --> 00:08:12,170
and as you learned, that one value has the index of zero, only after the second button click, we have two

111
00:08:12,170 --> 00:08:17,330
values in there and then we can retrieve a value with index one which is the second element.

112
00:08:17,630 --> 00:08:22,300
So now if I add another element here, now this gets logged and if I had a third one,

113
00:08:22,430 --> 00:08:27,260
I of course still get eleven logged here because I still extract the second element and that's still

114
00:08:27,260 --> 00:08:30,120
the element we added on the second click.

115
00:08:30,140 --> 00:08:33,120
So that's arrays, we can manage lists of data with them,

116
00:08:33,140 --> 00:08:37,830
there is way more we can do with them than just push and access single elements

117
00:08:37,880 --> 00:08:43,190
but again that's also something we'll gradually learn throughout the course because we also need some other

118
00:08:43,340 --> 00:08:43,840
things,

119
00:08:43,850 --> 00:08:47,610
some other pieces of knowledge before we can fully unleash their power.

120
00:08:47,610 --> 00:08:51,140
There are already quite nice like this though to manage lists of data.