All language subtitles for 009 Introduction to Arrays

Welcome back.

Let's now talk about our first data structure.

And that's gonna be Arrays.

And let's say, I want it to store my friends' names

in variables so that I could use them later in my program.

And so with the knowledge that we have so far

this is how we would do it.

So const

friend one

let's say Michael,

and let's spell this correct.

Then friend two

Steven and then

friend three

let's say Peter.

Now this isn't really fun to do, right?

Because imagine that

we actually wanted to represent 10 friends

and then we would have to create 10 variables.

So that doesn't sound like fun.

Instead, wouldn't it be great

to essentially bundle all of these values together

into some bigger container?

Well, that's why we have data structures in JavaScript.

And Arrays are such a data structure.

So an Array is like a big container

into which we can throw variables

and then later reference them.

And that's super important.

Because programming is most of the time,

all about data.

So we get data from somewhere we store and process data

and then we give some data back.

And that data, it has to go somewhere.

So it has to be stored in some place.

And for that, we use data structures, just like Arrays.

So in case we have more, than just a single value.

The two most important data structures

at least in JavaScript, are Arrays and Objects.

And so now let's learn all about Arrays.

So instead of doing this

let's create a variable,

which I'm gonna call a friends

and then we use the brackets, to create a new Array.

And then in there, we can put different values,

separated by commas.

And so let's now use the exact same friends.

So Michael comma,

then Steven comma

and Peter.

And make sure that these commas here

are outside of the string.

So that's an error I see people do.

And so this needs to be one string.

So you need to start and finish it,

then the comma and then another value then another comma

and then another value.

Okay.

And now let's take a look at it in the console.

Okay.

And so this is what the Array looks like, in the console.

So basically just as we wrote it in our code.

And that is the absolute basics about Arrays.

So that's how we create one.

At least that's the way that we use the most

but there's actually another way.

So let me show that to you as well.

So let's say we wanted an Array of years.

And so instead of the brackets,

we could also write

new, Array and then parenthesis.

And in there we would then specify all our values.

Let's say 1991,

1984,

2008,

and let's say 2020.

So on the rate can hold as many values as we want.

And also values of any type that we'd like.

So it doesn't have to be strings like here,

of course, numbers work just the same.

And so here we used a different way of creating the Array,

which was using this Array function.

So you see that it's a function because we called it here

basically using these parenthesis.

And we also needed to use the new keyword

because otherwise it's not gonna work.

But anyway, it's way more usual to just use the brackets

like I did up here, which is called the a literal syntax.

Great.

So now we know how to create Arrays.

So basically how to put elements into an Array,

but of course we need to have a way to get them out.

And for that, we use the square bracket syntax again.

So let's say that we want to log to the console,

the first element of this friend's Array.

So that would be Michael.

So console.log,

and now we write friends.

So that's the name of the Array.

And then we use the square brackets

and then the number zero.

That's because Arrays are zero-based,

which means that this first element

is the element number zero.

Then this one is element number one

number two, and so on and so forth.

And so if we want the element at position zero,

so this first one,

then we write friends square bracket zero.

And that's it.

And now let's say we wanted Peter here as well.

So that would be element zero, one, two.

And so, let's just write two.

And check it out.

And indeed we get Michael and Peter.

Cool.

Now we can also get the actual number of elements

that is in the Array.

So let's also log that one to the console.

And this one works by saying,

friends.length.

Okay.

And this dot length is something called a property

which we're gonna talk about a little bit later

in the section when we talk about objects.

Anyway what matters, is that this is gonna be the exact

amount of elements that is in the Array.

And it's not zero based.

So it will not be two,

even though the last one here is element number two.

Instead it really gives us the number

of elements in the Array.

So we should expect this to log three

and yeah, here we go.

Now we can use this to

automatically get the last element of any Array.

And that is useful so that we don't have to count

how many elements are in the Array.

So let me show you how we could do that.

Friends,

and then remember to retrieve an element from the Array,

we need to square brackets.

So just like this.

And then to get the index of the last element in the Array

all we need to do, is friends.length minus one.

So friends.length

minus one.

And that's because again,

friends.length is not zero based.

So this is three I remember,

but this last element is two.

And so we always need to subtract one from this number here.

Okay.

So what this also means,

is that inside of these brackets, we can put any expression.

It doesn't just have to be a number

literally like we did here and here.

So here we have this expression

and remember that an expression

is something that produces a value.

And so this one here is gonna be calculated first.

So it will compute friends.length

which is three minus one is two,

and then it will get friends at position two.

And that's also one of the reasons

why it's important that you know

what is an expression and what is a statement.

Because once again, we could not put a statement in here.

So inside of these square brackets,

JavaScript expects an expression, not a statement.

Anyway, we got to the correct element from the Array,

which is the element number two.

And so that means that this automatic retrieval

of the last element works just fine.

All right.

And moving on, there is more stuff that we can do.

So this square bracket syntax, that we used here

is not only for retrieving elements from the Array

but we can also change it to add elements to the Array.

So let's say that for some reason,

I'm no longer friends with Peter

and that I want to replace him with some other friends.

And so now we can change or mutate the Array

in the same way.

So we can say

friends at position number two

and I'm doing it manually here again.

So we can say that this should be equal to, something else.

And let's say Jay.

And if we now log this friends Array to the console,

then we should already see the new Array.

So,

friends and let's see,

and indeed the element number two.

So this one here, is now replaced with Jay,

okay.

So in the beginning, when we first logged

the friends Array to the console,

it was still in this state.

So it still had Peter.

And that's why here in the beginning,

we still see that original state.

But then as we move on through the code,

at some point here, we changed that Array.

And so when we then log the Array again

that change is of course reflected here in the output.

But wait!

Didn't I say in the last section,

that variables declared with const, cannot be changed.

And we did in fact declare the friends variable

here with const, right?

But I was still able to change one element

of the Array here from Peter to Jay, right?

So isn't that a contradiction?

Well what I didn't tell you at the time,

is that only primitive values, are immutable.

But an Array is not a primitive value.

And so we can actually always change it so we can mutate it.

And it works this way

because of the way that JavaScript stores things in memory.

And once more we will have a whole lecture

just on that topic alone,

in a special section about how JavaScript works

behind the scenes.

So what you need to know for now

is that we can actually mutate Arrays

even though they were declared with const.

Now what we can not do

is to actually replace the entire Array.

So we cannot do this.

We cannot say that the entire friends' Array should now be

Bob and Ellis.

That would be illegal.

So let's see.

And now we get assignment to constant variable.

And so that's why

that we can not do.

But let's just keep it here anyway.

So you get this as a reference.

Next up, I want to show you that an Array

can actually hold values with different types

all at the same time.

So let's experiment with that.

So let's create an Array which holds

all kinds of information about me.

So let's say Jonas, so that would be the first name

then the last name, then the age.

And here we can actually calculate the age

from other values.

And that works because in each position,

JavaScript simply expects an expression.

And so if we do this,

then this is perfectly fine.

Okay.

So this will here produce a value.

And so that's the value that will then be stored

at position number two of the new Array.

And that also works for variables.

So we could, for example do

first name equal Jonas.

And then

here instead of literally writing that,

we could use this variable name.

And so this would then be replaced, with the actual string.

So let's put some more data

and actually we could even put other Arrays

inside of an Array.

So that's really cool.

So let's put the friends Array here,

in the Jonas Array.

And then with this,

we have all the relevant data about Jonas

in one handy data structure.

And that's really convenient because

then we don't have to create one variable

for each of the data points.

So let's,

of course, inspect is now in the console

so that you can see

that all of these expressions here basically.

So this

and this here

and this,

so all of them are gonna be replaced

with the values that they produce.

And so

indeed, we now get Jonas.

We have to calculate at age,

and here have the Array at three.

And we can expand that

by clicking on this small triangle here

and then we can see the actual Array in here.

We also have the length.

So length is five.

And so that's where JavaScript

gets this friends.length from.

Jonas.length,

would of course also work.

And it would be this five that we see here.

Okay.

So that's the one.

Great.

So these are the very fundamentals of Arrays in JavaScript.

And now just to finish this video,

let's work on a very small Array exercise.

So that we can see why Arrays are actually so useful.

And to do that, let's bring back our old calcAge function.

So

it's gotta be somewhere here.

Yes.

Let's use this one.

We've coded this so many times

that I don't want to repeat it.

So exercise.

So calcAge.

And now let's say that we have an Array of birth years.

And then we want to calculate the ages for some of them.

So,

a new Array

and let's say 1990,

1967,

2002,

2010 and 2018.

And now we will be able to use the calcAge function

and then store the results of calculating the ages

for some of these years into a new Array.

So let's see how

and let's see first how we could not do it.

Okay.

So for example, if we wanted to use the calcAge function

for all of the elements in this Array,

we could not do this.

This would be

not illegal, I would say

but it's not gonna work

because this years is an Array.

And if we pass this years' Array as an argument

to the calcAge function,

it doesn't know what to do with it.

Because this operation here expects a single value

and we cannot do a number

minus and array.

So let me actually show you what's gonna happen

if we run this,

and well that's not the error I wanted to show you.

So what we get is,

"identifier 'years' has already been declared."

So this means that somewhere in the code, we already have

an Array called years and yeah, here it is.

So that's changed the name of this one to just Y.

So that one doesn't really matter anyway

but now let's see what happens

and well

not much did happen.

So we actually need to inspect the result, of this.

So console.log,

and then the result of this.

So let's see, and now we get the result, "not a number."

And so that's the result

of attempting to subtract a whole Array

which would be this year's Array, from a number.

Okay.

So let's actually do that here as well.

Remember that we have access to all the variables

that we declare in the script,

also in the console.

So that's the years Array, that we just declared.

But years, for example, plus 10

does not work.

At least not in a way that we expected it.

So the plus operator what it does here,

is to convert everything to a string,

just like I showed you before.

And so the string here,

is then basically this Array as a string,

and then it adds the 10 here.

So that's not meaningful at all.

And if we use it with minus 10, then it's even weirder.

So we get not a number.

So all of this is to say

that we cannot do operations with Arrays.

But we can still use the calcAge function

on individual elements of the Array of course.

So let's do that.

And we will assume that I want to calculate the ages

for the first, the second and the last Array element.

So this one, this one

and this one.

So let's

calculate this

and then store the result into a variable called age one

and we need to get rid of this parenthesis.

And so, as I said

I want to calculate the age for this first element.

And so what we do,

is to take years at position zero.

And so this year will then basically be replaced with 1990.

And then calcAge is called with 1990,

and to resolve the stores to age one.

Now let's do this some more times

and say, age two age three.

And here I'm using one.

So remember I want this, this and the last one.

But I don't want to count

the number of elements in the Array.

And so I used that trick, that I just showed you

in the beginning

which is to first compute the length of the Array.

So years.length,

and then minus one to account for the fact

that the index of the Array is zero based.

And now we can quickly check out if this actually worked.

So age one, age two,

age three.

And yeah.

So we got three values here,

which are these three ages.

But we can take this even a little bit further.

So since we started with an Array,

it's usually a good idea, to also end up with a new Array.

So let's create an Array

const ages,

and now what should I put in here?

Well, remember how I said up here

that any position of the Array

simply needs to be an expression.

So something that produces a value.

And as we already know,

this here produces a value as well, right?

It is an expression.

And so I can take this

and simply put it as a position in this Array.

And so JavaScript will then go ahead

compute this value and place it in the Array.

So basically we can place function calls

into an Array just fine,

because they will produce a value.

And now here.

We need to again,

do years.length minus one.

And now finally logging it to the console

and then we're done.

And indeed we get the three same values,

that we had up here separately.

Now, all nicely placed into this Array.

And this of course works

because JavaScript will start by

running these function calls,

these three function calls here

and then place all the results in an Array afterwards.

Nice.

And I think that should be enough for one video.

I hope that you see how fun Arrays can be,

and how useful they can be.

And in the next lecture,

we will make them even more useful

by doing some operations with them.