0:00:01.246,0:00:03.306
객체에 대해 뭘 할 수 있는지 더 알아봅시다

0:00:04.109,0:00:08.001
저번 함수에 대해 배울 때 사용했던 프로그램을 가지고 왔어요

0:00:08.685,0:00:14.273
이 프로그램은 XY 좌표를 입력받아서 그리는[br]drawWinston 함수를 갖고 있어요

0:00:14.273,0:00:21.103
그리고 밑에서는 drawWinston이 네 번 호출되었네요[br]각각 서로 다른 XY좌표를 가지고요

0:00:21.886,0:00:28.009
이제 뭘 할지 알겠죠?[br]네번의 drawWinston을 불렀으니깐

0:00:28.787,0:00:39.194
루프를 사용해서 한 문장으로 줄이면 조금 더 편리해 질 것 같아요[br]루프마다 XY 좌표만 바꾸어서 말이지요

0:00:39.194,0:00:47.036
그러기 위해 이 XY 좌표를 배열에 저장할 방법을 생각해야 돼요

0:00:47.036,0:00:55.816
2개의 값이 있으니까 2개의 배열을 준비해야 겠죠?[br]하나는 X좌표 하나는 Y좌표를 위해서요

0:00:55.816,0:01:08.648
X좌표는 {99,294,101,294}이고[br]Y좌표는 {117,117,316,316}입니다

0:01:08.648,0:01:18.399
이것들로 for - 루프를 돌리면[br]<i>var i=0; i</i>

0:01:18.399,0:01:29.727
이제 xPositions 안에 있는 원소들에 접근할 수 있겠죠?[br]<i>drawWinston(xPositions[i], yPositions[i]);</i>

0:01:29.727,0:01:33.926
앞의 코드를 지우고 실행시켜보면

0:01:33.926,0:01:36.200
잘 되는군요

0:01:36.200,0:01:44.645
한 라인의 코드로 <i>drawWinston</i>에[br]<i>Positions</i> 배열의 모든 원소를 대입시켰어요

0:01:44.645,0:01:57.889
이제 각각의 배열에 (10,1) 그리고 (1,1)[br]그리고 (100,1)을 넣어 볼게요

0:01:57.889,0:02:20.933
약간 더러워 보이고요 뭐가 X인지 Y인지 보기도 힘드네요[br]알아보려면 이렇게 띄어쓰기 해서 줄을 맞춰줘야 겠네요

0:02:22.409,0:02:26.729
그래서 위치를 저장하는 다른 방법을 알아봐야 겠어요

0:02:26.729,0:02:30.791
그들을 이제 객체로서 저장하는 거예요

0:02:30.791,0:02:44.058
생각해보세요 X와 Y 쌍을 하나의 객체로 생각한다면[br]XY 좌표가 저장된 객체 배열을 만들 수 있을 거예요

0:02:44.058,0:02:45.758
이렇게 해요

0:02:45.758,0:02:51.395
새로운 배열 <i>var positions</i>는

0:02:51.395,0:02:55.852
각각의 원소는 숫자가 아닌 객체여야 하므로

0:02:55.852,0:03:04.691
중괄호를 이용해 <i>{x:99, y:117}</i>라고 써줍시다

0:03:04.691,0:03:13.392
이제 한 개의 좌표를 입력했고요, 다른 것도 넣을 게요

0:03:13.392,0:03:30.897
<i>{x:294, y:117}, {x:101, y:316}, {x:294, y:316}</i>

0:03:30.897,0:03:37.524
이제 우리는 객체 배열을 갖게 되었으며[br]각각의 객체는 XY 좌표 속성을 갖고 있어요

0:03:37.524,0:03:44.228
밑에 for 루프 조건에 <i>positions.length</i>로 바꿔주고요

0:03:44.228,0:03:48.993
객체로 바꿔줍니다

0:03:48.993,0:03:58.851
이러면 객체일 뿐이므로 X좌표 Y좌표를 알아내기 위해서[br]<i>positions[i].x</i> 하고 <i>positions[i].y</i>로 쓸게요

0:03:58.851,0:04:00.228
짜잔!

0:04:00.228,0:04:03.969
전에 것들은 지워주고요

0:04:04.876,0:04:12.687
훨씬 더 좋아보이고요 가독성이 높아졌어요[br]읽기 쉬운 코드일 수록 좋겠죠?

0:04:13.260,0:04:24.805
이제 항목을 추가할 때 조금 더 쉽게 할 수 있어요[br]X는 200, Y는 200을 넣으면 윈스턴이 가운데 생기네요

0:04:26.526,0:04:27.301
굳

0:04:27.301,0:04:31.266
이제는 이것보다 더 세련된 방법을 알려줄게요

0:04:31.266,0:04:38.635
지금 우리 함수는 두 가지 숫자를 전달 받아서 쓰고 있어요

0:04:38.635,0:04:44.657
그럼 우리는 함수가 객체를 전달 받을 수 있도록 하고[br]X와 Y를 객체로부터 뽑아쓰도록 할게요

0:04:44.657,0:04:49.230
다시 말해서 여기에서 객체를 전달한다는 말이예요

0:04:49.230,0:04:50.846
한 번 해보죠

0:04:50.846,0:04:53.596
객체를 보내고요[br]근데 오류가 나네요

0:04:53.596,0:05:00.178
그건 우리 함수가 두 값을 전달받아야 하기 때문이죠[br]이제 바꿀게요

0:05:00.178,0:05:07.433
<i>facePosition</i>이라고 하면 <i>faceX</i>가 정의되지 않으니까 오류가 나네요

0:05:07.433,0:05:12.901
저번엔 <i>faceX</i>로 전달 받으니깐 오류가 나지 않았는데[br]이제는 객체를 전달 받으니 <i>faceX</i>가 사라졌기 때문이죠

0:05:12.901,0:05:20.899
그래서 이제 X 좌표를 객체로부터 뽑아서 <i>faceX</i> 변수에 저장할게요

0:05:20.899,0:05:27.604
이 객체가 X 좌표 속성을 가지고 있다는 것을 알기 때문에[br]그 값을 <i>faceX</i>에 저장할게요

0:05:27.684,0:05:33.342
Y좌표에서도 똑같이 진행하고요[br]<i>faceY = facePosition.y</i>

0:05:33.637,0:05:34.850
짜잔

0:05:34.850,0:05:38.167
아래쪽은 앞에서 정의된 변수를 사용하겠죠

0:05:38.167,0:05:43.968
제대로 입력하지 않을 경우, 만약[br]<i>x</i>대신 <i>xx</i>라고 쓰면 오류가 납니다

0:05:43.968,0:05:48.125
객체의 속성이 아니기 때문이죠

0:05:48.945,0:05:52.761
객체 배열을 쓰면 상당히 깔끔해 집니다[br]객체를 이용한 함수도 쓸 수 있고요

0:05:55.679,0:06:00.160
당신의 프로그램이 강력해 질 수 있다는 것을 알 수 있어요[br]데이터를 구조화시킨다면 말이죠

0:06:00.160,0:06:05.184
특히 그림을 그리거나 애니매이션 프로그램을 만들 때

0:06:05.184,0:06:08.926
XY좌표를 엮어서 쓰는 경우가 많으니 편해지겠죠?

0:06:09.359,0:06:11.369
이제 즐겨보세요!