So now we know how to work
with values and variables.
Even though we're not yet in the position to do really
useful things with those features,
we know about them,
and these will be the core building blocks we need to
then do more useful things, later.
Now, up to this point,
we always worked with strings and numbers
and these are super crucial values,
which we need all the time.
But there are other useful values as well.
For example,
so-called arrays,
which are lists of values.
And let me give you an example.
Let's assume we are dealing
with some user input here
and I'll actually delete all that code
and write some new code.
We are dealing with some user input
and we get an age as we did it before,
and we get a user name
which maybe is Max,
and now we also get some hobbies.
We get some hobbies entered through some form,
let's say,
and we want to store
that entered data in a variable
so that we can later,
output it, change it,
do whatever we need to do with it.
Now hobbies as the name suggests is not just a single value,
but multiple values.
Now we could, of course create multiple variables
like hobby one and hobby two,
and then store different values in different variables.
But that has a couple of disadvantages,
for one we don't know in advance,
how many hobbies a user of our website might be entering.
So we don't know as a developer,
how many variables we need to create in advance.
In addition, even if we would know it,
we have a lot of variables
which actually are kind of connected.
And that's why we have this special array value.
We create an array in JavaScript
by using square brackets,
opening and closing square brackets,
and that creates a so-called array value.
And in this array,
we can store a list of values.
So multiple values,
which are kind of connected,
you could say, stored in one variable.
For example, multiple strings here,
like sports
and cooking
and reading.
And as you can see,
you separate these different values,
these different array elements with a comma,
the white space here,
the blank is optional.
I just added it for readability purposes.
It's technically not required.
The comma is technically required.
It's part of the JavaScript array syntax,
and it tells JavaScript
where a one value ends
and a new value begins, so to say.
So now with that,
we created an array with three elements,
separated by commas.
And here I have three strings.
We could also have numbers
or numbers and strings mixed,
that's all allowed.
Depending on what you're storing,
you might need different values in here.
In this case,
I need three strings.
Now we have the convenience of having connected values
stored in one variable,
and we will also be able to dynamically add
or remove values to and from this array,
but that's a little bit more advanced,
so we're going to see
that later in this course.
What we can already do though is
output one of those array values.
Maybe again, with the alert command,
since at the moment,
that's the only command we know for outputting something.
And we can, for example,
output the entire hobbies array
by just pointing at hobbies here,
just as we before did it
with our text and our age.
If I save that
and I reload this page,
I just get this array being output here.
By the way,
if you are still seeing some old alerts from before,
just a close them by clicking okay,
and then reload the page thereafter.
And now here I see my array data
sports, cooking, reading.
So, conveniently,
alert even knows how to deal with an array
and it also outputs that array data.
But sometimes we just need a single item from an array,
no matter if it's for outputting it,
for alerting it
or for something else.
And therefore,
we also have a special syntax for pointing at a specific
single item in an array.
In the place
where we wanna access a single item,
we add square brackets after the variable name,
just like this,
directly after the variable name.
And then here,
the square brackets will not create a new array,
that would only be the case after the equal sign here.
Instead, in conjunction with that variable
that stores and array,
we can now put the so-called index number,
the identifier of one of these array items
between those square brackets to point at a specific item.
And for that it's important to know
that in JavaScript
and actually in most programming languages,
the items in such an array
automatically receive a index number behind the scenes,
and every item has its own unique number.
And that index simply starts at zero
for the first item,
though that's important,
zero not one for the first item,
one for the second,
two for the third,
and so on.
These are our index numbers.
And hence here,
if I want to output the first item from that array,
I put zero between those square brackets,
since that index starts at zero.
And the first item in the array has that index zero.
Therefore,
that's the identifier of this first item in
this array.
And if I save this now
and this page reloads,
I see sports,
which is my first array item.
And that's how we can work with arrays.
A very useful kind of value for connecting multiple values
and storing them in one at the same variable.