Function Parameters (Video Version)

다시 Winston을 그리는 프로그램으로 돌아왔습니다
하지만 이번에는 그림에 text 문자를 추가해 보았습니다

Winston을 text 라벨 아래에 위치할 건데요
그 라벨은 인생의 각 단계를 표시하고 있어요

하지만 지금 Winston은 엉망으로 놓여있죠

왜냐하면 faceX와 faceY값을
함수 내부에서 임의의 값으로 설정하고 있기 때문입니다

하지만 우리는 이런 것이 아닌
정확히 바로 이 장소에 Winston이 그려지기를 원하죠

그리고 특히 저는 매번 함수가 불릴때마다
그 특정 위치를 지정하는 것을 원해요

우리가 이전에 ellipse()와 rect()함수를 사용할 때 처럼요

그러므로 저는 여기, 그리고 여기
다음은 여기, 그리고 여기에 Winston이 그려지기를 바랍니다

그리고 더 이상 함수를 부를때마다 Winston이
무작위로 임의의 영역에 그려지지 않기를 원해요

그러기 위해서는 그 함수에 파라미터를 지정해 주어야 합니다

여기 맨 위에 함수 정의 부분에서도 그렇고요

그러므로 drawWinston함수에 faceX와 faceY를 전달해서
이 값을 임의의 수를 생성하는 대신에 사용하기를 바랍니다

지금부터 여기 함수를 부르는(call) 부분에서
어떻게 원하는 것을 함수로 전달할지 생각해보죠

일단 Winston에 대해 설명하는 글자들의 바로 아래의 위치가 필요합니다

아마 우리가 원하는 각 Winston 위치의 x, y값은
글자를 쓰기 위해 사용한 text함수에 전달한 값과 매우 비슷할 것입니다

대충 y값에서 10 픽셀 정도 아래가 될겁니다
그러므로 맨 처음 위치는 10, 30이고 그 다음 위치는 200, 230이고

10, 230... 200,230 이는 아마 text의 좌표와 같을 것이고
각각의 글자들보다 조금 아래에 위치 하므로 각 y좌표값에 10을 더했어요

좋아요 하지만 Winston은 움직이지 않네요

왜냐하면 위쪽의 함수 선언부에 이러한 파라미터를 넘겨준다고
이야기하지 않았기 때문에 여전히 임의의 수를 사용하고 있기 때문입니다

그러므로 우리는 함수에게 이렇게 이야기해주어야 해요
"우리가 이러한 정보를 줄테니 이것을 대신 사용해봐"

그리고 괄호들 안에 파라미터들의 이름을 건네주어야만 해요

그것을 faceX와 faceY로 부르고 콤마(,)로 구분합니다

이름을 그렇게 부른 이유는, 이미 함수안에서 그 이름을
사용하고 있기 때문에 다시 다른 이름으로 쓸 필요가 없기 때문이죠

하지만 여전히 아무일도 일어나지 않고 Winston은 온갖 곳에 가 있어요

아마 맨 위쪽에 함수부분을 보면 전달받은 faceX와 faceY를
여전히 임의의 수로 다시 설정하고 있는 것을 볼 수 있을거에요

그러면 이 코드들을 모두 삭제해보도록 합시다

그러면 함수가 우리가 전달한 faceX와 faceY를 이용하여
그림을 그리는 것을 볼 수있습니다

하지만 Winston이 우리가 원하는 정확한 위치에 있지는 않아요
왜냐하면 문자는 화면에서 좌측 상단을 기준으로 위치가 정해지고

그림은 중심으로 기준으로 하기 때문입니다
숫자들을 조금 손볼 필요가 있겠죠?

아마 x축 방향으로 조금 더 옮겨야 할 거에요
조금 옮겨서 여기 'Toddler Winston'아래로 옮겨볼게요

이런 과정을 통해서 함수에 넘겨줄 값을 바꿀 수 있어요
하지만 함수의 정의부분을 바꿀 필요가 전혀 없습니다

왜냐면 함수는 언제나 우리가 전달해주는 값만 받기 때문이죠
마치 ellipse()나 rect() 처럼요

좋아요 적당한 위치로 옮겼습니다
하지만 Winston의 얼굴이 너무 크다는 것을 알수있네요

서로 겹치고 크기가 맞지 않아요

우리는 함수에 그를 그리기 위한 코드를 넣어놨었고
타원을 그리는 한 줄을 수정해서 모든 얼굴들의 크기를 바꿀 수 있습니다

그러면 190으로 값을 바꾸어서 Winston을 다이어트시켜줘 볼까요?

아주 보기 좋네요. 조금 더 조정을 해서 저 안에
정말 넣을 수 있겠네요, 멋집니다

마지막으로 작성한 코드에 대해서 리뷰(review)해봅시다
여기에 drawWinston() 함수를 정의하였고

이 함수는 faceX와 faceY라는 두개의 값을 받습니다

그리고 이 값들은 변수(variable)처럼
함수 안의 어디에서든 사용할 수 있습니다

그러니까 이 변수들을 미리 위에서
선언(declare)했던것처럼 사용할 수 있다는 말이지요

그리고 이 함수를 선언한 후 언제든지 부를 수 있습니다

그리고 다른 값들을 전달할수도 있고요
그러면 그 새로운 값들을 사용할 겁니다

지금까지 함수의 정말로 멋진점을 살펴보았습니다
우리는 정말로 재사용이 가능하다고 생각할 수 있는 코드를 제안할 수있으며

또한 파라미터를 사용하는 것으로 이 코드에서 약간씩 바꾸어야 하는 부분은
이것을 사용해서 개인에 맞도록 수정(customize)하라고 할 수도 있어요

이것은 마치 레시피(recipe)와 같습니다. 일반적인 명령어들을 작성해 놓았고
갑자기 Winston을 하나가 아닌 넷을 먹여야 하게 되었다면

처음부터 다시 할 필요가 없이 원래의 명령어를
조금 수정하여 모든 것에 4를 곱해주면 되는 것이지요

그러면 지금부터는 여러분의 코드의 레시피에 대해서 생각해보도록 해봅시다!