Arrays of Objects (Video Version)

객체에 대해 뭘 할 수 있는지 더 알아봅시다

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

이 프로그램은 XY 좌표를 입력받아서 그리는
drawWinston 함수를 갖고 있어요

그리고 밑에서는 drawWinston이 네 번 호출되었네요
각각 서로 다른 XY좌표를 가지고요

이제 뭘 할지 알겠죠?
네번의 drawWinston을 불렀으니깐

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

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

2개의 값이 있으니까 2개의 배열을 준비해야 겠죠?
하나는 X좌표 하나는 Y좌표를 위해서요

X좌표는 {99,294,101,294}이고
Y좌표는 {117,117,316,316}입니다

이것들로 for - 루프를 돌리면
var i=0; i

이제 xPositions 안에 있는 원소들에 접근할 수 있겠죠?
drawWinston(xPositions[i], yPositions[i]);

앞의 코드를 지우고 실행시켜보면

잘 되는군요

한 라인의 코드로 drawWinston에
Positions 배열의 모든 원소를 대입시켰어요

이제 각각의 배열에 (10,1) 그리고 (1,1)
그리고 (100,1)을 넣어 볼게요

약간 더러워 보이고요 뭐가 X인지 Y인지 보기도 힘드네요
알아보려면 이렇게 띄어쓰기 해서 줄을 맞춰줘야 겠네요

그래서 위치를 저장하는 다른 방법을 알아봐야 겠어요

그들을 이제 객체로서 저장하는 거예요

생각해보세요 X와 Y 쌍을 하나의 객체로 생각한다면
XY 좌표가 저장된 객체 배열을 만들 수 있을 거예요

이렇게 해요

새로운 배열 var positions는

각각의 원소는 숫자가 아닌 객체여야 하므로

중괄호를 이용해 {x:99, y:117}라고 써줍시다

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

{x:294, y:117}, {x:101, y:316}, {x:294, y:316}

이제 우리는 객체 배열을 갖게 되었으며
각각의 객체는 XY 좌표 속성을 갖고 있어요

밑에 for 루프 조건에 positions.length로 바꿔주고요

객체로 바꿔줍니다

이러면 객체일 뿐이므로 X좌표 Y좌표를 알아내기 위해서
positions[i].x 하고 positions[i].y로 쓸게요

짜잔!

전에 것들은 지워주고요

훨씬 더 좋아보이고요 가독성이 높아졌어요
읽기 쉬운 코드일 수록 좋겠죠?

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

굳

이제는 이것보다 더 세련된 방법을 알려줄게요

지금 우리 함수는 두 가지 숫자를 전달 받아서 쓰고 있어요

그럼 우리는 함수가 객체를 전달 받을 수 있도록 하고
X와 Y를 객체로부터 뽑아쓰도록 할게요

다시 말해서 여기에서 객체를 전달한다는 말이예요

한 번 해보죠

객체를 보내고요
근데 오류가 나네요

그건 우리 함수가 두 값을 전달받아야 하기 때문이죠
이제 바꿀게요

facePosition이라고 하면 faceX가 정의되지 않으니까 오류가 나네요

저번엔 faceX로 전달 받으니깐 오류가 나지 않았는데
이제는 객체를 전달 받으니 faceX가 사라졌기 때문이죠

그래서 이제 X 좌표를 객체로부터 뽑아서 faceX 변수에 저장할게요

이 객체가 X 좌표 속성을 가지고 있다는 것을 알기 때문에
그 값을 faceX에 저장할게요

Y좌표에서도 똑같이 진행하고요
faceY = facePosition.y

짜잔

아래쪽은 앞에서 정의된 변수를 사용하겠죠

제대로 입력하지 않을 경우, 만약
x대신 xx라고 쓰면 오류가 납니다

객체의 속성이 아니기 때문이죠

객체 배열을 쓰면 상당히 깔끔해 집니다
객체를 이용한 함수도 쓸 수 있고요

당신의 프로그램이 강력해 질 수 있다는 것을 알 수 있어요
데이터를 구조화시킨다면 말이죠

특히 그림을 그리거나 애니매이션 프로그램을 만들 때

XY좌표를 엮어서 쓰는 경우가 많으니 편해지겠죠?

이제 즐겨보세요!