How could we introduce arrays and objects here?
Well let's say we want to log every operation we do, so when we add, when we subtract,
when we multiply,
we kind of want to log this, we want to store this in an internal log which we theoretically could send
to a server or anything like that.
In
Node.js,
we could write it to a file, in the browser
we can't because we don't have access to the filesystem there for security reasons but we might want
to keep track of that, right,
because we want to store it on our own analytic server for example.
Now in such a case, we want to keep track of a list of operations because we're not just interested in
the first click on the add button but we want to store every click on every button and therefore we
need to have a list of data that gets bigger and bigger over time. For that,
we can add a new global variable here and I will create it here with the let keyword and name it log
entries,
the name is totally up to you of course,
again it should be a name that kind of gives an idea of which kind of data you're going to store
and it's a plural name here because I'll have multiple elements in there because it should be such an
array as I mentioned.
Now you create an array by adding square brackets and it can either be an empty array or of course an
array with some initial data and there, each element is separated from the other elements by a comma.
Typically you also add a whitespace to improve readability but that's not required,
the comma however is required.
Now here, I want to have an empty array though because initially we have no log entry, so therefore
we can create it just like this.
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
there and now we want to edit this array and add a new entry.
Now how can we do that?
Well we can refer to log entries and now previously we always assign a new value by setting this equal
to a new value.
Now of course, we can set it equal to a new value here as well
and here the new value would be a new array because I want to overwrite the existing empty array and
therefore of course we could also leave this uninitialized with a new array which now includes let's
say the entered number,
right?
So now, we set this to a new array, a new list of data with one element and that one element is this entered
number which we have. Now that's one way of editing an array,
we basically overwrite the array stored in the variable with a brand new array and sometimes that's
just what you need but sometimes you also want to edit the existing one
and for that, let's reinitialize this to an empty array up there,
let's say we want to add a new element to this existing array,
for that we can reach out to this array and not assign a new value with the equal sign but instead use
a dot to use a function that belongs to the array so to say and there, there's a specific function built
into Javascript and that's the push function.
Now actually, arrays have way more than just a push function and I have a whole module dedicated to arrays
where we dive way deeper into them, for now let's focus on the push function. The push function does what
the name implies, it pushes a new element onto this array, so it adds a new element to the list and there
we could say that should be the entered number.
Now it would be kind of neat to see that array
and for now we can do something which you will often do during development,
you can add console log here and that's a built-in functionality built into Javascript, a built-in command
which the browser understand which allows you to output something into that development console, into
the console
which you see in the developer tools where we previously saw some errors.
Now here we're not outputting an error but an information log message
and here we can for example log the log entries, so the value that's currently in that variable, which
should be that array with one extra element
if we run this for the first time and after the second click, it should have two elements because we
always push a new one.
Let's see, let's save that, open the developer tools in your browser and go to the console there, reload
the page and now enter any number you want and click on the plus
and of course you see the result down there
but more interesting than that, you see this thing on the right here,
that is your array
and if I add another value, so if I click the plus again, you see now this is the new log, this now is
a new array or the old array with an extra element to be precise.
You see we have two elements and they're separated by commas,
in this case two numbers
but again you could store any data in the array and therefore that's what we have in there
and this is a great way of keeping track of multiple items, multiple pieces of data that are kind of
belonging together and that should be managed as a list of data. Now if you want to read from the array
in the sense of not logging it entirely but let's say you want to extract the first element that's in
there,
so the five in this case,
well then you can also do that. If you want to access a specific element in the array,
you do this by adding square brackets after the variable name
if you access the variable, so in a place where you want to get or read the variable, you can also
add square brackets thereafter
and now in there, you add the index, so the position so to say, of the element you want to extract. Now
you could think that you add one here if you want to read the first value but this will actually not
work because and that's just something you have to know but thankfully it's the case in pretty much all
programming languages or in most programming languages,
arrays are zero-based or their index is zero-based, which means the first element in an array has
an index of zero.
So if you want to access specifically the first element, you want to retrieve that, to work with it, then
you do this with this square bracket notation and then with index zero. Index one would refer to the
second element, index two to the third, well and so on and index zero
therefore to the first one, that's just how it works in many programming languages.
So now what we should see when we log this is that we don't log the entire array but a single value
of the array, to be precise
always the first element in the array.
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
the square brackets but just a number because that's what we're retrieving and retrieving by the way
does not mean that we destroy the array,
it's still there, it's still managed in memory,
I'm just reading a single value from there because that's also something you need quite often in programming,
that you have a list of data
but then for a specific operation, you want to work with one specific entry of that list
and again as so often, we'll of course also see examples for that throughout the course.
So that's how you can add a new element to an array, by the way if you would try to read the second
element,
so the one with index one here, we would actually get an error here in this code because when I reload
this, when I add a new element here, you see I now get undefined,
so not an error technically but also not the value we expected because of course this already fires,
for the first element we add it,
so when I clicked the button for the first time and there we simply have no second element in the array
yet because we only added one value, so we pushed one value into the array,
so there only is one value in there
and as you learned, that one value has the index of zero, only after the second button click, we have two
values in there and then we can retrieve a value with index one which is the second element.
So now if I add another element here, now this gets logged and if I had a third one,
I of course still get eleven logged here because I still extract the second element and that's still
the element we added on the second click.
So that's arrays, we can manage lists of data with them,
there is way more we can do with them than just push and access single elements
but again that's also something we'll gradually learn throughout the course because we also need some other
things,
some other pieces of knowledge before we can fully unleash their power.
There are already quite nice like this though to manage lists of data.