WEBVTT

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

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

00:00:10.533 --> 00:00:14.096
그리고 그 함수들은 여러분이 하라고 한 것들을 그려주었습니다

00:00:14.096 --> 00:00:16.268
그럼 함수라는 것은 무엇일까요?


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


00:00:23.590 --> 00:00:26.460
예를 들어 rect()에 대해서 생각해볼까요?
rect()는 무엇을 하나요?

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

00:00:31.485 --> 00:00:34.112
이렇게 하면 사각형을 그린 것처럼 보이겠지요?

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

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


00:00:43.548 --> 00:00:47.588
한쪽 모퉁이에서 다음 것으로 선을 그리고 그 다음 것으로 다시 선을 그리고

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


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

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

00:01:07.531 --> 00:01:14.020
예를 들어 우리가 프로그램을 만들고 있고
Winston을 여러 번 그리려고 합니다


00:01:14.020 --> 00:01:20.230
아마도 Winston의 인생 이야기를 하려는데 
각 나이에서의 그를 보여주기 위해서겠죠

00:01:20.230 --> 00:01:24.243
우선 Winston을 그리는 코드는 이렇게 시작했죠

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

00:01:28.627 --> 00:01:32.711
눈이나 입도 이 변수를 가지고 
상대적으로 위치를 구하여 그리고 있어요

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

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

00:01:49.336 --> 00:01:54.532
우선 'var drawWinston'라는 멋지고 알기쉬운 이름을 적습니다

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

00:02:02.958 --> 00:02:11.259
그리고 빈 괄호( )를 적고 그 다음에 중괄호 { } 
그리고 세미콜론 ';'을 적어줍니다

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

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

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

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

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

00:02:43.757 --> 00:02:49.217
하지만 지금 화면을 보면 Winston이 더 이상 보이지 않아요
Winston을 잃어버렸어요 어디로 갔을까요?

00:02:49.217 --> 00:02:52.995
이는 코드를 함수 안에 넣었기 때문이며

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

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

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

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

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

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

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

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

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

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

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

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

00:04:45.938 --> 00:04:50.198
그러므로 우리는 다음시간에 함수들에게 매개변수(parameter)를


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