< Return to Video

Arrays of Objects (Video Version)

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

more » « less
Video Language:
English
Duration:
06:12

English subtitles

Revisions