주요 내용
코스: 컴퓨터 프로그래밍 > 단원 1
단원 9: 함수검토하기: 함수
이제 수업에서 살펴본 함수에 관한 내용을 복습해 봅시다.
프로그램을 작성할 때, 같은 코드 뭉치를 다시 작성하는 일 없이 반복해서 실행하고 싶은 경우가 있습니다. 코드를 그룹화하고 그 코드 뭉치에 이름을 부여하면 나중에 그 이름으로 코드 뭉치를 호출할 수 있습니다. 이를 함수라고 부릅니다.
함수를 만들기 위해서는 함수를 선언한 후 이름을 부여해야 합니다. 변수를 만드는 과정과 동일합니다. 다음과 같이 함수를 정의합니다.
var sayHello = function() {
};수행하는 것에 따라 해당 함수에 한 개의 작업 명령 또는 여러 개의 작업 명령으로 구성된 임의의 코드를 넣습니다. 다음의 함수를 이용해서 임의의 위치에 단순한 메시지가 출력되도록 할 수 있습니다.
var sayHello = function() {
text("Halllllllo!", random(200), random(200));
};함수를 선언하기만 해서는 아무 일도 일어나지 않습니다. 함수 안의 코드가 실행되기 위해서는 함수를 "호출" 해야 하는데, 함수 이름 뒤에 소괄호를 붙여줍니다.
sayHello();이렇게 하고 나면 필요할 때, 원하는 만큼 함수를 호출할 수 있습니다.
sayHello();
sayHello();
sayHello();함수를 사용하다 보면, 함수의 대부분은 유지하고 일부분만 바꾸고 싶은 경우가 있습니다. 이렇게 하면 코드는 더 융통성 있고 재사용 가능해질 것입니다. 함수에 "인수" 를 지정한다면 이렇게 할 수 있습니다. 함수를 호출할 때 인수를 전달해서 함수가 어떻게 실행될지 변경할 수 있습니다.
예를 들어, 사각형이나 타원을 그릴 때처럼 메시지를 출력하는 위치를 정확하게 지정할 수 있다면 어떨까요? 정확한 좌표값을 넘겨주면서 함수를 호출하는 것을 상상해 봅시다.
sayHello(50, 100);
sayHello(150, 200);그렇게 하려면
sayHello 함수의 정의를 변경하여 함수가 두 개의 인수를 받으며 해당 함수 내에서 사용될 수 있게 정해줍니다.var sayHello = function(xPos, yPos) {
text("Halllllllo!", xPos, yPos);
};입력되는 인수는 기본적으로 함수의 정의 내의 변수와 같아집니다. 그 이름은 괄호 안에서 인수를 어떻게 호출했는지에 따라 정해집니다. 더 짧은 이름으로 바꿀 수도 있습니다.
var sayHello = function(x, y) {
text("Halllllllo!", x, y);
};함수는 인수가 아예 없을 수도 있으며 한 개, 두 개 또는 그 이상의 인수들을 입력 받을 수도 있습니다. 또한 인사를 받을 사람의 이름을 입력받도록 함수를 변경할 수도 있습니다.
var sayHello = function(name) {
text("Halllllllo, " + name, random(200), random(200));
};그 후 다음과 같이 함수를 호출할 수 있습니다.
sayHello("Winston");
sayHello("Pamela");이를 합쳐서 이름과 위치에 대한 세 개의 인수를 입력 받을 수 있도록 만들 수 있습니다.
var sayHello = function(name, x, y) {
text("Halllllllo " + name, x, y);
};그 후 다음과 같이 함수를 호출합니다.
sayHello("Winston", 10, 100);인수를 얼마나 설정할지는 함수로 어떤 일을 하고 싶은지에 달려 있습니다. 일단은 인수 없이 시작해서, 필요하다고 생각할 때 추가할 수 있습니다.
사실 지금까지
사각형이나 타원, 삼각형을 그리고 애니메이션을 그리면서 많은 함수를 사용해 왔습니다. 이런 함수는 ProcessingJS 라이브러리에 있는 것으로, 생성하는 모든 프로그램에서 항상 사용할 수 있도록 준비되어 있습니다. 이 함수들이 유용할 것이라 생각해서 미리 정의해 놓았지만, 앞으로는 자신의 프로그램에 필요한 함수를 직접 만들어야 합니다. 예를 들어 ellipse 함수는 제공하지만 여러 종류의 고양이를 호출하는 어떤 cat 함수는 존재하지 않기 때문에 직접 만들어야 합니다!함수의 또 다른 유용한 기능은, 어떤 값을 받아와서 계산하고 다시 새로운 값을 넘겨줄 수 있다는 것입니다. 계산기로 할 수 있는 일들을 생각해 봅시다. 덧셈, 뺄셈, 제곱 근, 곱셈 등등. 이 모든 것들을 입력과 결과의 출력을 이용해서 수행할 수 있습니다. 함수는 인수로 입력을 받아서 return 으로 결과를 출력할 수 있습니다. 다음은 두 수를 더해서 결과를 출력하는 함수입니다.
var addNumbers = function(num1, num2) {
var result = num1 + num2;
return result;
};
var sum = addNumbers(5, 2);
text(sum, 200, 200); // Displays "7"return 은 두 가지 일을 하는데, 이 함수를 호출한 곳에 어떤 값을 반환해 줍니다. (따라서 변수
sum에 값을 저장할 수 있습니다.) 그리고 즉시 함수를 종료합니다. 다시 말해 다음과 같이 함수를 구성한다면, 마지막 줄은 절대 실행되지 않기 때문에 어리석은 일입니다.var addNumbers = function(num1, num2) {
var result = num1 + num2;
return result;
result = result * 2; // silly!
};반환값(return value)을 가지는 함수는 프로그램에서 데이터를 처리할 때 유용합니다. 해당 함수들은 결합되어 사용될 수 있습니다.
var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);알아보기 힘들 수도 있지만 함수 내에 함수를 호출할 수 있습니다.
var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));코드 일부를 지속적으로 묶는 함수를 생성하는 방법을 알게 되었습니다. 이제는 지역변수(local variables)와 전역변수(global variables)라는 중요한 개념을 알아야 합니다.
어떤 함수 내부에서 새로운 변수를 선언하면, 이 변수는 그 함수에만 국한된 변수가 됩니다. 그 함수만 이 변수를 볼 수 있고 함수 외부의 나머지 프로그램에서는 볼 수 없습니다. 함수 밖으로 나오면 그 변수는 더 이상 존재하지 않게 됩니다. 다음의 함수에서 지역변수는
localResult 입니다.var addNumbers = function(num1, num2) {
var localResult = num1 + num2;
println("The local result is: " + localResult);
return localResult;
};
addNumbers(5, 7);
println(localResult); // oh noes!위의 코드를 실행하면 마지막 줄에서 "localResult가 정의되지 않았습니다." 라는 오류가 발생합니다. 변수를
'var localResult =' 줄에 선언했기 때문에 이 변수는 오직 함수 내에서만 정의되고 함수 외부에서는 정의되지 않습니다.함수 외부에 변수를 선언하면 전역변수가 됩니다. 이제 모든 함수가 이 변수에 접근할 수 있기 때문에 변수를 이용하여 하고자 하는 일을 수행하면 됩니다.
var globalResult;
var addNumbers = function(num1, num2) {
globalResult = num1 + num2;
println("The global result is: " + globalResult);
};
addNumbers(5, 7);
println(globalResult);위의 코드를 실행하면 오류가 발생하지 않습니다.
'globalResult'를 함수 외부에서 선언해 어디에서나 접근할 수 있기 때문입니다.모든 프로그래밍 언어가 다르지만 JavaScript에서는 함수에 대한 "함수의 유효 범위(function scope)" 를 아는 것이 중요합니다. 특정 함수는 그 내부에 선언된 지역변수와 외부에 선언된 전역변수를 알 수 있지만 그와 다른 함수의 지역변수를 알 수 없습니다.