1
00:00:01,246 --> 00:00:03,306
객체에 대해 뭘 할 수 있는지 더 알아봅시다
2
00:00:04,109 --> 00:00:08,001
저번 함수에 대해 배울 때 사용했던 프로그램을 가지고 왔어요
3
00:00:08,685 --> 00:00:14,273
이 프로그램은 XY 좌표를 입력받아서 그리는
drawWinston 함수를 갖고 있어요
4
00:00:14,273 --> 00:00:21,103
그리고 밑에서는 drawWinston이 네 번 호출되었네요
각각 서로 다른 XY좌표를 가지고요
5
00:00:21,886 --> 00:00:28,009
이제 뭘 할지 알겠죠?
네번의 drawWinston을 불렀으니깐
6
00:00:28,787 --> 00:00:39,194
루프를 사용해서 한 문장으로 줄이면 조금 더 편리해 질 것 같아요
루프마다 XY 좌표만 바꾸어서 말이지요
7
00:00:39,194 --> 00:00:47,036
그러기 위해 이 XY 좌표를 배열에 저장할 방법을 생각해야 돼요
8
00:00:47,036 --> 00:00:55,816
2개의 값이 있으니까 2개의 배열을 준비해야 겠죠?
하나는 X좌표 하나는 Y좌표를 위해서요
9
00:00:55,816 --> 00:01:08,648
X좌표는 {99,294,101,294}이고
Y좌표는 {117,117,316,316}입니다
10
00:01:08,648 --> 00:01:18,399
이것들로 for - 루프를 돌리면
var i=0; i
11
00:01:18,399 --> 00:01:29,727
이제 xPositions 안에 있는 원소들에 접근할 수 있겠죠?
drawWinston(xPositions[i], yPositions[i]);
12
00:01:29,727 --> 00:01:33,926
앞의 코드를 지우고 실행시켜보면
13
00:01:33,926 --> 00:01:36,200
잘 되는군요
14
00:01:36,200 --> 00:01:44,645
한 라인의 코드로 drawWinston에
Positions 배열의 모든 원소를 대입시켰어요
15
00:01:44,645 --> 00:01:57,889
이제 각각의 배열에 (10,1) 그리고 (1,1)
그리고 (100,1)을 넣어 볼게요
16
00:01:57,889 --> 00:02:20,933
약간 더러워 보이고요 뭐가 X인지 Y인지 보기도 힘드네요
알아보려면 이렇게 띄어쓰기 해서 줄을 맞춰줘야 겠네요
17
00:02:22,409 --> 00:02:26,729
그래서 위치를 저장하는 다른 방법을 알아봐야 겠어요
18
00:02:26,729 --> 00:02:30,791
그들을 이제 객체로서 저장하는 거예요
19
00:02:30,791 --> 00:02:44,058
생각해보세요 X와 Y 쌍을 하나의 객체로 생각한다면
XY 좌표가 저장된 객체 배열을 만들 수 있을 거예요
20
00:02:44,058 --> 00:02:45,758
이렇게 해요
21
00:02:45,758 --> 00:02:51,395
새로운 배열 var positions는
22
00:02:51,395 --> 00:02:55,852
각각의 원소는 숫자가 아닌 객체여야 하므로
23
00:02:55,852 --> 00:03:04,691
중괄호를 이용해 {x:99, y:117}라고 써줍시다
24
00:03:04,691 --> 00:03:13,392
이제 한 개의 좌표를 입력했고요, 다른 것도 넣을 게요
25
00:03:13,392 --> 00:03:30,897
{x:294, y:117}, {x:101, y:316}, {x:294, y:316}
26
00:03:30,897 --> 00:03:37,524
이제 우리는 객체 배열을 갖게 되었으며
각각의 객체는 XY 좌표 속성을 갖고 있어요
27
00:03:37,524 --> 00:03:44,228
밑에 for 루프 조건에 positions.length로 바꿔주고요
28
00:03:44,228 --> 00:03:48,993
객체로 바꿔줍니다
29
00:03:48,993 --> 00:03:58,851
이러면 객체일 뿐이므로 X좌표 Y좌표를 알아내기 위해서
positions[i].x 하고 positions[i].y로 쓸게요
30
00:03:58,851 --> 00:04:00,228
짜잔!
31
00:04:00,228 --> 00:04:03,969
전에 것들은 지워주고요
32
00:04:04,876 --> 00:04:12,687
훨씬 더 좋아보이고요 가독성이 높아졌어요
읽기 쉬운 코드일 수록 좋겠죠?
33
00:04:13,260 --> 00:04:24,805
이제 항목을 추가할 때 조금 더 쉽게 할 수 있어요
X는 200, Y는 200을 넣으면 윈스턴이 가운데 생기네요
34
00:04:26,526 --> 00:04:27,301
굳
35
00:04:27,301 --> 00:04:31,266
이제는 이것보다 더 세련된 방법을 알려줄게요
36
00:04:31,266 --> 00:04:38,635
지금 우리 함수는 두 가지 숫자를 전달 받아서 쓰고 있어요
37
00:04:38,635 --> 00:04:44,657
그럼 우리는 함수가 객체를 전달 받을 수 있도록 하고
X와 Y를 객체로부터 뽑아쓰도록 할게요
38
00:04:44,657 --> 00:04:49,230
다시 말해서 여기에서 객체를 전달한다는 말이예요
39
00:04:49,230 --> 00:04:50,846
한 번 해보죠
40
00:04:50,846 --> 00:04:53,596
객체를 보내고요
근데 오류가 나네요
41
00:04:53,596 --> 00:05:00,178
그건 우리 함수가 두 값을 전달받아야 하기 때문이죠
이제 바꿀게요
42
00:05:00,178 --> 00:05:07,433
facePosition이라고 하면 faceX가 정의되지 않으니까 오류가 나네요
43
00:05:07,433 --> 00:05:12,901
저번엔 faceX로 전달 받으니깐 오류가 나지 않았는데
이제는 객체를 전달 받으니 faceX가 사라졌기 때문이죠
44
00:05:12,901 --> 00:05:20,899
그래서 이제 X 좌표를 객체로부터 뽑아서 faceX 변수에 저장할게요
45
00:05:20,899 --> 00:05:27,604
이 객체가 X 좌표 속성을 가지고 있다는 것을 알기 때문에
그 값을 faceX에 저장할게요
46
00:05:27,684 --> 00:05:33,342
Y좌표에서도 똑같이 진행하고요
faceY = facePosition.y
47
00:05:33,637 --> 00:05:34,850
짜잔
48
00:05:34,850 --> 00:05:38,167
아래쪽은 앞에서 정의된 변수를 사용하겠죠
49
00:05:38,167 --> 00:05:43,968
제대로 입력하지 않을 경우, 만약
x대신 xx라고 쓰면 오류가 납니다
50
00:05:43,968 --> 00:05:48,125
객체의 속성이 아니기 때문이죠
51
00:05:48,945 --> 00:05:52,761
객체 배열을 쓰면 상당히 깔끔해 집니다
객체를 이용한 함수도 쓸 수 있고요
52
00:05:55,679 --> 00:06:00,160
당신의 프로그램이 강력해 질 수 있다는 것을 알 수 있어요
데이터를 구조화시킨다면 말이죠
53
00:06:00,160 --> 00:06:05,184
특히 그림을 그리거나 애니매이션 프로그램을 만들 때
54
00:06:05,184 --> 00:06:08,926
XY좌표를 엮어서 쓰는 경우가 많으니 편해지겠죠?
55
00:06:09,359 --> 00:06:11,369
이제 즐겨보세요!