Arrays of Objects (Video Version)
-
0:01 - 0:04Let's keep exploring
what we can do with objects. -
0:04 - 0:08We're back with the program
that we used in the functions tutorial. -
0:08 - 0:12This program has this drawWinston
function which knows how to draw -
0:12 - 0:14Winston at a certain X and Y.
-
0:15 - 0:18And then down here,
we call drawWinston four times, -
0:18 - 0:21each with a different set
of X and Y coordinates. -
0:22 - 0:26Well, you know me, when I look
at those four drawWinston calls -
0:26 - 0:30that are so similar looking,
all I can think about is how much better -
0:30 - 0:36it would be if we could use a loop
and just call it one time inside the loop -
0:36 - 0:39changing the X and Y
in each iteration of the loop. -
0:40 - 0:44So, to do that, we need to find
a way to store these X and Y positions -
0:44 - 0:48in an array so we can loop through it.
-
0:48 - 0:52Well, we have two sets of values,
so what we could do is have two arrays, -
0:52 - 0:56one for X positions
and one for Y positions. -
0:56 - 1:01So, X positions we might have 99,
294, 101, and 294, -
1:02 - 1:09and Y positions
we'll have 117, 117, 316, 316. -
1:10 - 1:14Okay, and now we can loop through
those with our for-loop var i = 0; -
1:14 - 1:19i < xPositions.length; i++
-
1:19 - 1:22So we're going through each element
in xPositions and we'll say -
1:22 - 1:29drawWinston(xPositions[i],
yPositions[i]); -
1:30 - 1:35Okay, so, let's see
if that works by deleting... -
1:35 - 1:36Alright, that worked.
-
1:36 - 1:40So now we can actually just call this,
we just have this one line of code -
1:40 - 1:44that does drawWinston,
but it does it for every position -
1:44 - 1:45in the xPositions array.
-
1:46 - 1:49So, we can go and add more to this
and by saying like... 10, -
1:49 - 1:57then we add 1, and then 1,
and then 1, and then 100, and 1. -
1:59 - 2:03Now, now it's getting to look
a little bit messy and I don't like it -
2:03 - 2:08because it's really hard for me to see
which Xs relate to which Ys. -
2:08 - 2:15I want to be able to look at a glance
and know what my X and Y pairs are, -
2:15 - 2:18instead of having to make sure
that I perfectly align them up -
2:18 - 2:21above each other, like this maybe.
-
2:23 - 2:27So, I want to find a different way
of storing these positions. -
2:27 - 2:31One idea is that we could
actually store them as objects. -
2:31 - 2:35Think about it, each position is
really two bits of information: -
2:35 - 2:39the X and the Y. So, we could have
an object which has X and Y properties, -
2:39 - 2:43and then we could have an array
of objects with all these X -
2:43 - 2:46and Y positions.
So, let's do that. -
2:46 - 2:51We'll say var positions equals an array.
-
2:51 - 2:56But, each element, instead of being
a number, is going to be an object. -
2:56 - 3:00So, here we have our curly brackets
and then we're just going to say -
3:00 - 3:05X: 99, Y: 117.
-
3:06 - 3:09Okay, so now we have one
of our positions in here, -
3:09 - 3:13and then we'll go add another one here.
-
3:14 - 3:21Alright, X should be 294, 117,
the third one is going to be 101, -
3:23 - 3:30316, and the final one is 294 and 316.
-
3:32 - 3:36Okay, so now we have an array
of objects where each object has -
3:36 - 3:38X and Y properties in it.
-
3:39 - 3:43So down here, in our for loop
we'll just change this to iterate -
3:43 - 3:48through positions.length.
Then we'll pass in the object. -
3:48 - 3:53Now, right now it's passing
the entire object, but we want to pass -
3:53 - 3:59the X and the Y, so we need
positions[i].x and positions[i].y. -
3:59 - 4:01Tada!
-
4:01 - 4:04Now, we can get rid
of these old, clustered arrays. -
4:05 - 4:10Great, so this looks a lot nicer to me
and makes the code much more readable, -
4:10 - 4:13and any time we can have
more readable code, it's better. -
4:13 - 4:16It also makes it easier to add,
so if I want to add one, -
4:16 - 4:24I'll actually just add the pair together,
and then we can say X is 200, Y, 200, -
4:24 - 4:26get a little Winston in the middle there.
-
4:27 - 4:28Cool.
-
4:28 - 4:31Now I want to show you something
even fancier than this. -
4:32 - 4:36Notice how our function right now
accepts two numbers -
4:36 - 4:39and then uses those two numbers.
-
4:39 - 4:42Well, we could change our function
so that it expects an object -
4:42 - 4:45and then it gets the X
and Y from that object, -
4:45 - 4:49meaning that down here
we could just pass the object. -
4:50 - 4:51Let's try that.
-
4:51 - 4:54We pass the object, now it's broken.
-
4:54 - 4:58That's because our function
still is expecting two objects -
4:58 - 5:00and it's only getting one,
so we'll change it -
5:00 - 5:05to say it's getting facePosition,
and now we get an error -
5:05 - 5:10that faceX is not defined
because before we were passing in faceX -
5:10 - 5:13as an argument but now it doesn't exist,
we're only getting an object. -
5:13 - 5:19So, what we could do, is save
the X position from the object -
5:19 - 5:21inside the faceX variable.
-
5:21 - 5:25So we're saying that we got this object,
we know this object has an X property, -
5:25 - 5:28so we're just going to store
that into the faceX variable. -
5:28 - 5:34We can do the same thing
with Y, so faceY = facePosition.y. -
5:34 - 5:35Tada!
-
5:35 - 5:39And then, you know, the rest
of the function uses faceX and faceY. -
5:39 - 5:40Now, we have to make sure
that we spell them correctly, -
5:40 - 5:44if we did xx, it's not going to work
because that's not what it is down here -
5:44 - 5:48in our array of objects,
so it needs to match. -
5:49 - 5:52This is pretty neat because now you can
have arrays of objects, -
5:52 - 5:54you can have functions
that take in objects -
5:55 - 5:59and you'll really find that your programs
can be very powerful with the way -
5:59 - 6:01that they structure their data
-
6:01 - 6:04especially since it's so often
to want to pair X and Y together, -
6:04 - 6:05I think you'll find them
-
6:05 - 6:09especially useful in all your drawing
and animation programs here. -
6:09 - 6:11So, go to it and have fun!
- Title:
- Arrays of Objects (Video Version)
- Description:
-
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/ - Video Language:
- English
- Duration:
- 06:12
Kirstin Cosper approved English subtitles for Arrays of Objects (Video Version) | ||
Kirstin Cosper edited English subtitles for Arrays of Objects (Video Version) | ||
Kirstin Cosper edited English subtitles for Arrays of Objects (Video Version) | ||
Kirstin Cosper edited English subtitles for Arrays of Objects (Video Version) | ||
Don Wilson edited English subtitles for Arrays of Objects (Video Version) | ||
Don Wilson edited English subtitles for Arrays of Objects (Video Version) | ||
Don Wilson edited English subtitles for Arrays of Objects (Video Version) |