자바스크립트 - 함수

자바스크립트에서 함수는 코드의 집합입니다. 지금까지는 함수를 사용하는 방법만 살펴보았습니다.

이제 이 함수를 직접 만드는 방법을 알아보겠습니다.

7.1 선언과 호출, 실행 우선순위

선언과 호출

함수는 코드의 집합을 나타내는 자료형입니다. ①처럼 함수 이름을 입력하지 않고 만드는 익명 함수 생성 방법과 ②처럼 함수 이름을 입력해서 만드는 선언적 함수 생성 방법이 있습니다.

[표 9-12] 함수 생성 방법

방법	표현
① 익명 함수	function () { };
② 선언적 함수	function 함수 () { };

익명 함수와 선언적 함수를 선언하는 방법을 살펴보겠습니다.

기본 예제 9-12 함수 선언

1. 익명 함수 선언하기 다음 코드는 두 문장을 포함하는 함수를 생성하고 출력합니다.

[코드 9-32] 익명 함수 선언

<script>

// 함수를 선언합니다.

var 함수 = function () {

alert('함수_01');

alert('함수_02');

};

// 출력합니다.

alert(typeof (함수) + ' : ' + 함수);

</script>

2. 선언적 함수 선언하기 다음 코드는 [코드 9-32]의 익명 함수를 선언적 함수로 바꾼 것입니다.

[코드 9-33] 선언적 함수 선언

<script>

// 함수를 선언합니다.

function 함수 () {

alert('함수_01');

alert('함수_02');

}

// 출력합니다.

alert(typeof (함수) + ' : ' + 함수);

</script>

익명 함수와 선언적 함수 모두 많이 사용하므로 용어와 생성 방법을 꼭 기억해 두세요. 이렇게 만든 함수는 alert() 함수를 사용했던 것처럼 함수 이름 뒤에 괄호를 사용해 실행할 수 있습니다. 이렇게 함수를 실행하는 것을 '함수를 호출한다'고 표현합니다.

//함수를 호출합니다.

함수();

실행 우선순위

함수 변수이므로 [코드 9-34]처럼 사용하면 가장 마지막에 입력된 값이 저장됩니다. 따라서 코드를 실행하면 [그림 9-11]처럼 문자열 '함수_B'를 출력합니다.

[코드 9-34]처럼 사용하면 가장 마지막에 입력된 값이 저장됩니다. 따라서 코드를 실행하면 [그림 9-11]처럼 문자열 '함수_B'를 출력합니다.

[코드 9-34] 익명 함수 간의 우선순위

<script>

// 함수를 선언합니다.

var 함수 = function () { alert('함수_A'); };

var 함수 = function () { alert('함수_B'); };

// 함수를 호출합니다.

함수();

</script>

하지만 선언적 함수와 익명 함수를 함께 사용할 때 실행 순서가 다릅니다. 자바스크립트는 모든 코드를 읽기 전에 선언적 함수를 먼저 읽습니다. 따라서 선언적 함수가 익명 함수 뒤에 있지만 먼저 읽기 때문에 [코드 9-35]를 실행하면 [그림9-12]처럼 나중에 읽은 익명 함수를 실행합니다.

[코드 9-35] 선언적 함수와 익명 함수의 우선순위

<script>

// 함수를 선언합니다.

var 함수 = function () { alert('함수_A'); };

function 함수() { alert('함수_B'); };

// 함수를 호출합니다.

함수();

</script>

간단한 내용이지만 프로그램 실행에 문제를 일으킬 수 있는 부분이므로 주의합니다.

7.2 매개 변수와 반환 값

지금까지 예제를 따라 하면서 alert() 하뭇의 괄호 안에 문자열 또는 숫자 등을 집어 넣었습니다. 이렇게 함수의 괄호 안에 집어 넣는 것을 매개 변수라고 합니다.

// 함수를 호출합니다.

alert('매개 변수');

시간 정보를 추출할 때는 다음과 같이 함수의 실행 결과를 변수에 입력했습닏. 이렇게 함수를 실행한 결과를 반환 값(리턴 값)이라고 합니다.

var minutes = date.getMinutes();

var seconds = date.getSeconds();

매개 변수와 반환 값을 가지는 함수는 다음 형식으로 작성합니다. 단, 모든 함수에 매개 변수와 반환 값을 사용해야 하는 것이 아니라 필요할 때만 선택적으로 사용합니다.

function 함수 이름(매개 변수, 매개 변수, 매개 변수) {

// 함수 코드

// 함수 코드

// 함수 코드

return 반환 값;

}

매개 변수와 반환 값은 [그림 9-13]과 같은 관점으로 생각할 수 있습니다. 함수 상자 안에 넣는 3이 매개 변수이고, 함수의 결과 9는 반환 값이라고 할 수 있습니다.

[그림 9-13] 함수

기본 예제 9-13 함수의 매개 변수와 반환 값

[그림 9-13]에 표현된 함수를 자바사크립트로 만들어 보겠습니다. 매개 변수로 x를 넣으면 x(2제곱)을 반환하는 함수입니다.

[코드 9-36] 매개 변수와 반환 값 사용

<script>

// 함수를 선언합니다.

function f(x) {

return x * x;

}

// 함수를 호출합니다.

alert(f(3));

</script>

쉽지요?ㅣ 연습 삼아 다음 수식을 함수로 만들어 보세요.

f(x) = 2x + 1

f(x) = 3x(제곱) + 52x + 273

이 함수를 만들 수 있다면 함수를 만드는 기본적은 방법을 알고 있다고 말할 수 있습니다. 프로그래밍 언어에서 함수는 수식을 계산하는 것 이외에도 단순한 작업을 묶어서 처리한다는 의미도 있습니다. 이러한 내용은 앞으로 공부하면서 차근차근 알아보겠습니다.

7.3 콜백 함수

매개 변수로 전달되는 함수를 콜백 함수라고 합니다. 다른 프로그래밍 언어에서 잘 사용하지 않는 개념이므로 처음 접한다면 어렵게 느낄 수 있습니다. 바로 예제를 살펴보겠습니다.

기본 예제 9-14 콜백 함수

다음 코드에서는 callTenTimes ()와 callback() 함수를 선언했습니다. callback()은 간단하게 문자열 '함수 호출'을 출력할 수 있는 함수 입니다. callTenTimes()는 매개 변수로 전달된 함수를 열 번 호출하는 함수입니다. 코드의 실행 결과를 예측할 수 있나요?

[코드 9-37] 콜백 함수 사용

<script>

// 함수를 선언합니다.

function callTenTimes(callback) {

// 10회 반복합니다.

for (var i = 0; i < 10; i++) {

callback(); // 매개 변수로 전달된 함수를 호출합니다.

}

}

// 변수를 선언합니다.

var callback = function () {

alert('함수 호출');

};

callTenTimes(callback); // 함수를 호출합니다.

</script>

다음 장 부터 많이 다루는 내용이므로 반드시 어떠한 방식으로 실행되는지 이해하고 넘어갑니다.

콜백 함수는 익명 함수로 사용할 때가 많습니다. [코드 9-38]은 앞에서 실행한 [코드 9-37]과 같은 코드입니다. 매개 변수에 익명 함수를 곧바로 입력할 수도 있다는 것을 기억하기 바랍니다.

[코드 9-38] 익명 콜백 함수

<script>

// 함수를 선언합니다.

function calltentimes(callback) {

for (var i = 0; i < 10; i++ {

callback();

}

}

// 함수를 호출합니다.

calltenTimes(function () {

alert('함수 호출');

});

</script>