함수(Functions)

이번 시간에는 이전 강의들에서 계속 사용해왔던 것을
이야기해보려고 합니다. 바로 함수(Function)를 말이죠

rect()나 fill() 또는 text()같은 명령어를 사용할 때마다
사실은 함수를 부르고있던겁니다

그리고 그 함수들은 여러분이 하라고 한 것들을 그려주었습니다

그럼 함수라는 것은 무엇일까요?

코드들을 그룹지어 모은 집합이라고 할 수 있는데, 함수(function)라고 이름을 지은 것은
그 함수적 기능(functionality)를 여러 번 사용할 수 있게 하기 위해서 입니다

예를 들어 rect()에 대해서 생각해볼까요?
rect()는 무엇을 하나요?

단순히 네 개의 선을 그려줄 뿐이에요 맞나요?
line() 함수를 이용해서도 만들 수 있어요

이렇게 하면 사각형을 그린 것처럼 보이겠지요?

하지만 사각형을 아주 많이 그리기를 원한다면
매우 짜증이 날겁니다

매번 계산을 하는 것도 그렇고요
이리저리 시도를 해봐야 하는 것도 그렇습니다

한쪽 모퉁이에서 다음 것으로 선을 그리고 그 다음 것으로 다시 선을 그리고

그래서 그대신에 rect()함수를 만들었고, 이 함수는 같은 일을 똑같이 해줍니다
네 줄의 코드가 한 것을 훨씬 적은 코드로 해줍니다

게다가 멋지게도 rect()는 Khan Academy의
모든 프로그램에서 사용할 수 있는 함수 중에 하나입니다

하지만 나만의 함수들을 만들어서
내 프로그램들 안에서 사용하는 것도 가능합니다

예를 들어 우리가 프로그램을 만들고 있고
Winston을 여러 번 그리려고 합니다

아마도 Winston의 인생 이야기를 하려는데
각 나이에서의 그를 보여주기 위해서겠죠

우선 Winston을 그리는 코드는 이렇게 시작했죠

우선 얼굴의 중심 위치를 저장하기 위한
faceX와 faceY라는 변수(variable)을 가지고 있고

눈이나 입도 이 변수를 가지고
상대적으로 위치를 구하여 그리고 있어요

이 프로그램의 코드를 보면, 이것은 어떤 함수에도 들어가 있지 않아요
그래서 이것을 실행하면 단순하게 딱 한 번만 실행될 거에요

그럼 이것을 함수로 바꾸어보죠 그 방법은 변수를 선언하는 방식과
매우 비슷해요 왜나하면 정말로 해야줘야 할 것이 비슷하거든요

우선 'var drawWinston'라는 멋지고 알기쉬운 이름을 적습니다

그 다음 '='를 입력합니다 하지만 그 뒤에는 숫자나
문자열(string)을 쓰지 않고 'function'이라는 단어를 써줍니다

그리고 빈 괄호( )를 적고 그 다음에 중괄호 { }
그리고 세미콜론 ';'을 적어줍니다

그러고 나서 함수에서 하고 싶은 작업을 모두 중괄호들 사이에 넣어줍니다.

여기있는 코드들을 우리의 함수 안에 넣어주면 되겠네요
보기 쉽게 들여쓰기(indent)도 해줍시다

우리는 지금 함수를 저장하고 있는 변수를 가지게 되었습니다
간단하게 말하면 우리는 이 코드 덩어리에 이름을 지어준 것이지요

그리고 이것을 가지고 우리의 프로그램에서
언제든지 다음과 같이 말할 수 있습니다

'이 이름을 가지고 코드 덩어리를 찾아서 그것을 실행해'와 같이 말이죠
그러므로 우리는 이 코드들을 언제든지 다시 재사용할 수 있습니다

하지만 지금 화면을 보면 Winston이 더 이상 보이지 않아요
Winston을 잃어버렸어요 어디로 갔을까요?

이는 코드를 함수 안에 넣었기 때문이며

이것은 프로그램에게 "이 코드들을 나중에 실행 할 수 있게 해줘,
오직 내가 '말 할때' 실행해야해"라고 말한 것이거든요

그러므로 코드를 실행해달라고 말해야 하고 이것은 함수를 호출(call)한다는
것을 의미합니다 ellipse()나 rect() 그리고 line()같이말이죠

그러므로 단순히 그 함수의 이름을 쓰고 그 뒤에 괄호를 붙인다음
세미콜론으로 마무리를 하면... Winston이 돌아왔어요!

제 생각에는 이것이 멋지지만, 여러분들이 생각하기에는 멋지지 않을수도 있어요
왜냐하면 우리가 예전에 만든 프로그램과 다르지 않기 때문이죠 웃기지않나요?

함수에서 가장 중요한 점은 우리가 함수를 다시 재사용할수 있다는 것이에요
단순히 함수를 호출하는 부분을 복사해서 붙여넣고 붙여넣고 실행하면...

음... 똑같아 보이는데요? 하지만 정상적으로 작동한 것입니다
Winston을 똑같은 위치에 계속 그렸기때문에 이렇게 보이는 것이지요

만일 X-ray같은 눈을 가졌다면 3명의 Winston들을 볼 수 있을거에요
하지만 우린 그런 눈을 가지고 있지 않으므로 알 수 없는것입니다

하지만 함수에 작은 변화를 주는 것으로
여러개를 그리고 있다는 것을 분명하게 확인할 수 있을거에요

우선 faceX와 faceY를 보세요항상 202와 208으로 설정되지요?
이를 함수가 불릴때마다 random()을 이용하여

50과 350사이의 임의의 수로 바꾸어 실행되도록하면 'restart'버튼을
누를때마다 랜덤한 위치에 그러지는 Winston들을 볼 수 있어요

제 생각에 이것은 매우 멋지네요. 함수를 사용하지 않고 윈스턴을
세번이나 그리려했다면 더욱 많은 코드를 입력했었어야 했을테니까요

하지만 이것은 항상 유용하다고는 할 수 없어요. 왜냐하면 만일 임의의 위치에
윈스턴들이 그려지는 것을 원치 않고 특정한 위치에 윈스턴을 그리고 싶을수도 있어요

그러므로 우리는 다음시간에 함수들에게 매개변수(parameter)를

어떻게 전달하는지 알아볼겁니다 그러고 나면
특정 위치에 그릴 수 있을 거에요