< Return to Video

Arrays of Objects (Video Version)

  • 0:01 - 0:03
    객체에 대해 뭘 할 수 있는지 더 알아봅시다
  • 0:04 - 0:08
    저번 함수에 대해 배울 때 사용했던 프로그램을 가지고 왔어요
  • 0:09 - 0:14
    이 프로그램은 XY 좌표를 입력받아서 그리는
    drawWinston 함수를 갖고 있어요
  • 0:14 - 0:21
    그리고 밑에서는 drawWinston이 네 번 호출되었네요
    각각 서로 다른 XY좌표를 가지고요
  • 0:22 - 0:28
    이제 뭘 할지 알겠죠?
    네번의 drawWinston을 불렀으니깐
  • 0:29 - 0:39
    루프를 사용해서 한 문장으로 줄이면 조금 더 편리해 질 것 같아요
    루프마다 XY 좌표만 바꾸어서 말이지요
  • 0:39 - 0:47
    그러기 위해 이 XY 좌표를 배열에 저장할 방법을 생각해야 돼요
  • 0:47 - 0:56
    2개의 값이 있으니까 2개의 배열을 준비해야 겠죠?
    하나는 X좌표 하나는 Y좌표를 위해서요
  • 0:56 - 1:09
    X좌표는 {99,294,101,294}이고
    Y좌표는 {117,117,316,316}입니다
  • 1:09 - 1:18
    이것들로 for - 루프를 돌리면
    var i=0; i
  • 1:18 - 1:30
    이제 xPositions 안에 있는 원소들에 접근할 수 있겠죠?
    drawWinston(xPositions[i], yPositions[i]);
  • 1:30 - 1:34
    앞의 코드를 지우고 실행시켜보면
  • 1:34 - 1:36
    잘 되는군요
  • 1:36 - 1:45
    한 라인의 코드로 drawWinston
    Positions 배열의 모든 원소를 대입시켰어요
  • 1:45 - 1:58
    이제 각각의 배열에 (10,1) 그리고 (1,1)
    그리고 (100,1)을 넣어 볼게요
  • 1:58 - 2:21
    약간 더러워 보이고요 뭐가 X인지 Y인지 보기도 힘드네요
    알아보려면 이렇게 띄어쓰기 해서 줄을 맞춰줘야 겠네요
  • 2:22 - 2:27
    그래서 위치를 저장하는 다른 방법을 알아봐야 겠어요
  • 2:27 - 2:31
    그들을 이제 객체로서 저장하는 거예요
  • 2:31 - 2:44
    생각해보세요 X와 Y 쌍을 하나의 객체로 생각한다면
    XY 좌표가 저장된 객체 배열을 만들 수 있을 거예요
  • 2:44 - 2:46
    이렇게 해요
  • 2:46 - 2:51
    새로운 배열 var positions
  • 2:51 - 2:56
    각각의 원소는 숫자가 아닌 객체여야 하므로
  • 2:56 - 3:05
    중괄호를 이용해 {x:99, y:117}라고 써줍시다
  • 3:05 - 3:13
    이제 한 개의 좌표를 입력했고요, 다른 것도 넣을 게요
  • 3:13 - 3:31
    {x:294, y:117}, {x:101, y:316}, {x:294, y:316}
  • 3:31 - 3:38
    이제 우리는 객체 배열을 갖게 되었으며
    각각의 객체는 XY 좌표 속성을 갖고 있어요
  • 3:38 - 3:44
    밑에 for 루프 조건에 positions.length로 바꿔주고요
  • 3:44 - 3:49
    객체로 바꿔줍니다
  • 3:49 - 3:59
    이러면 객체일 뿐이므로 X좌표 Y좌표를 알아내기 위해서
    positions[i].x 하고 positions[i].y로 쓸게요
  • 3:59 - 4:00
    짜잔!
  • 4:00 - 4:04
    전에 것들은 지워주고요
  • 4:05 - 4:13
    훨씬 더 좋아보이고요 가독성이 높아졌어요
    읽기 쉬운 코드일 수록 좋겠죠?
  • 4:13 - 4:25
    이제 항목을 추가할 때 조금 더 쉽게 할 수 있어요
    X는 200, Y는 200을 넣으면 윈스턴이 가운데 생기네요
  • 4:27 - 4:27
  • 4:27 - 4:31
    이제는 이것보다 더 세련된 방법을 알려줄게요
  • 4:31 - 4:39
    지금 우리 함수는 두 가지 숫자를 전달 받아서 쓰고 있어요
  • 4:39 - 4:45
    그럼 우리는 함수가 객체를 전달 받을 수 있도록 하고
    X와 Y를 객체로부터 뽑아쓰도록 할게요
  • 4:45 - 4:49
    다시 말해서 여기에서 객체를 전달한다는 말이예요
  • 4:49 - 4:51
    한 번 해보죠
  • 4:51 - 4:54
    객체를 보내고요
    근데 오류가 나네요
  • 4:54 - 5:00
    그건 우리 함수가 두 값을 전달받아야 하기 때문이죠
    이제 바꿀게요
  • 5:00 - 5:07
    facePosition이라고 하면 faceX가 정의되지 않으니까 오류가 나네요
  • 5:07 - 5:13
    저번엔 faceX로 전달 받으니깐 오류가 나지 않았는데
    이제는 객체를 전달 받으니 faceX가 사라졌기 때문이죠
  • 5:13 - 5:21
    그래서 이제 X 좌표를 객체로부터 뽑아서 faceX 변수에 저장할게요
  • 5:21 - 5:28
    이 객체가 X 좌표 속성을 가지고 있다는 것을 알기 때문에
    그 값을 faceX에 저장할게요
  • 5:28 - 5:33
    Y좌표에서도 똑같이 진행하고요
    faceY = facePosition.y
  • 5:34 - 5:35
    짜잔
  • 5:35 - 5:38
    아래쪽은 앞에서 정의된 변수를 사용하겠죠
  • 5:38 - 5:44
    제대로 입력하지 않을 경우, 만약
    x대신 xx라고 쓰면 오류가 납니다
  • 5:44 - 5:48
    객체의 속성이 아니기 때문이죠
  • 5:49 - 5:53
    객체 배열을 쓰면 상당히 깔끔해 집니다
    객체를 이용한 함수도 쓸 수 있고요
  • 5:56 - 6:00
    당신의 프로그램이 강력해 질 수 있다는 것을 알 수 있어요
    데이터를 구조화시킨다면 말이죠
  • 6:00 - 6:05
    특히 그림을 그리거나 애니매이션 프로그램을 만들 때
  • 6:05 - 6:09
    XY좌표를 엮어서 쓰는 경우가 많으니 편해지겠죠?
  • 6:09 - 6:11
    이제 즐겨보세요!
Title:
Arrays of Objects (Video Version)
Description:

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

Korean subtitles

Incomplete

Revisions