Arrays of Objects (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Let's keep exploring
what we can do with objects.

We're back with the program
that we used in the functions tutorial.

This program has this drawWinston
function which knows how to draw

Winston at a certain X and Y.

And then down here,
we call drawWinston four times,

each with a different set
of X and Y coordinates.

Well, you know me, when I look
at those four drawWinston calls

that are so similar looking,
all I can think about is how much better

it would be if we could use a loop
and just call it one time inside the loop

changing the X and Y
in each iteration of the loop.

So, to do that, we need to find
a way to store these X and Y positions

in an array so we can loop through it.

Well, we have two sets of values,
so what we could do is have two arrays,

one for X positions
and one for Y positions.

So, X positions we might have 99,
294, 101, and 294,

and Y positions
we'll have 117, 117, 316, 316.

Okay, and now we can loop through
those with our for-loop var i = 0;

i < xPositions.length; i++

So we're going through each element
in xPositions and we'll say

drawWinston(xPositions[i],
yPositions[i]);

Okay, so, let's see
if that works by deleting...

Alright, that worked.

So now we can actually just call this,
we just have this one line of code

that does drawWinston,
but it does it for every position

in the xPositions array.

So, we can go and add more to this
and by saying like... 10,

then we add 1, and then 1,
and then 1, and then 100, and 1.

Now, now it's getting to look
a little bit messy and I don't like it

because it's really hard for me to see
which Xs relate to which Ys.

I want to be able to look at a glance
and know what my X and Y pairs are,

instead of having to make sure
that I perfectly align them up

above each other, like this maybe.

So, I want to find a different way
of storing these positions.

One idea is that we could
actually store them as objects.

Think about it, each position is
really two bits of information:

the X and the Y. So, we could have
an object which has X and Y properties,

and then we could have an array
of objects with all these X

and Y positions.
So, let's do that.

We'll say var positions equals an array.

But, each element, instead of being
a number, is going to be an object.

So, here we have our curly brackets
and then we're just going to say

X: 99, Y: 117.

Okay, so now we have one
of our positions in here,

and then we'll go add another one here.

Alright, X should be 294, 117,
the third one is going to be 101,

316, and the final one is 294 and 316.

Okay, so now we have an array
of objects where each object has

X and Y properties in it.

So down here, in our for loop
we'll just change this to iterate

through positions.length.
Then we'll pass in the object.

Now, right now it's passing
the entire object, but we want to pass

the X and the Y, so we need
positions[i].x and positions[i].y.

Tada!

Now, we can get rid
of these old, clustered arrays.

Great, so this looks a lot nicer to me
and makes the code much more readable,

and any time we can have
more readable code, it's better.

It also makes it easier to add,
so if I want to add one,

I'll actually just add the pair together,
and then we can say X is 200, Y, 200,

get a little Winston in the middle there.

Cool.

Now I want to show you something
even fancier than this.

Notice how our function right now
accepts two numbers

and then uses those two numbers.

Well, we could change our function
so that it expects an object

and then it gets the X
and Y from that object,

meaning that down here
we could just pass the object.

Let's try that.

We pass the object, now it's broken.

That's because our function
still is expecting two objects

and it's only getting one,
so we'll change it

to say it's getting facePosition,
and now we get an error

that faceX is not defined
because before we were passing in faceX

as an argument but now it doesn't exist,
we're only getting an object.

So, what we could do, is save
the X position from the object

inside the faceX variable.

So we're saying that we got this object,
we know this object has an X property,

so we're just going to store
that into the faceX variable.

We can do the same thing
with Y, so faceY = facePosition.y.

Tada!

And then, you know, the rest
of the function uses faceX and faceY.

Now, we have to make sure
that we spell them correctly,

if we did xx, it's not going to work
because that's not what it is down here

in our array of objects,
so it needs to match.

This is pretty neat because now you can
have arrays of objects,

you can have functions
that take in objects

and you'll really find that your programs
can be very powerful with the way

that they structure their data

especially since it's so often
to want to pair X and Y together,

I think you'll find them

especially useful in all your drawing
and animation programs here.

So, go to it and have fun!