JavaScript 튜토리얼

함수

3.7) 함수

JS에서 함수를 정의하고 사용할 수 있다방법은 다음과 같다.

function.htm

// hello 함수를 정의합니다.

function hello() {

alert("hello, world!");

}

 

// hello 함수를 호출합니다.

hello();

함수의 정의가 호출과 같은 영역에 있는 것을 이상하게 생각할 수 있으나이는 적법한 코드다. JS에서는 함수 내에 함수를 정의하고 호출하는 것이 가능하다놀라운 점은함수를 호출하기 전에 선언이나 정의가 반드시 앞에 있어야 할 필요가 없다는 것이다이에 대한 예제를 보이겠다.

function2.htm

// 1을 반환하는 one 함수를 정의합니다.

function one() { return 1; }

 

// num1과 num2를 더한 값을 출력합니다.

var num1 = one();

var num2 = two();

alert(num1 + num2);

 

// 2를 반환하는 two 함수를 정의합니다.

function two() { return 2; }

함수가 사용할 인자를 함수 정의에 넣을 수 있다.

function_param.htm

// a + b의 결과를 반환하는 sum 함수를 정의합니다.

function sum(a, b) { // JS의 변수가 모두 var 형식이므로 형식을 따로 정의하지 않습니다.

return a + b;

}

 

alert(sum(1, 2)); // 두 정수를 연산자로 연산한 결과를 출력합니다.

alert(sum('hello, ', 'world!')); // 두 문자열을 연산자로 연산한 결과를 출력합니다.

alert(sum('hello', 1));

참고로 JS의 함수 정의에 인자의 형식을 넣을 수 없어 불편한 경우가 종종 있다다른 사람이 작성한 코드를 보는데 정수를 넘겨야 할지 문자열을 넘겨야 할지를 고민해야 하는 상황을 말하는데만약 형식을 표시하고 싶다면 정의한 함수 앞에 다음과 같은 형식으로 주석을 써주면 된다.2

function_codehint.htm

/** 주석을 만들 때 '*' 문자 2개를 써서 주석을 만듭니다.

 

함수 설명을 여기에 기록합니다.

 

- @param {<type>} <param_name>의 형식으로 기록합니다.

@param {number} a

@param {number} b

@return {number}

 

*/

function sum(a, b) {

return a + b;

}

결과

 

 

이와 같이 코드 힌트가 잘 나타나는 것을 볼 수 있다.

JS에서는 함수도 일종의 객체로 본다그래서 JS에서는 선언된 변수에 함수를 대입할 수 있다.

function_delegate.htm

function sum(a, b) { return a + b; }

function mul(a, b) { return a * b; }

 

var f = sum; // 변수 f에 sum을 대입합니다.

alert(f(3, 5)); // 변수 f가 가리키는 함수를 호출합니다.

f = mul; // 변수 f에 mul을 대입합니다.

alert(f(3, 5)); // 변수 f가 가리키는 함수를 호출합니다.

실행 결과

8

15

함수를 만들면서 변수에 대입하는 놀라운 방법도 있다.

function3.htm

var f = function sum(a, b) { return a + b; }; // 변수 f에 sum을 대입합니다.

alert(f(3, 5)); // 변수 f가 가리키는 함수를 호출합니다.

f = function mul(a, b) { return a * b; }; // 변수 f에 mul을 대입합니다.

alert(f(3, 5)); // 변수 f가 가리키는 함수를 호출합니다.

그리고 이름 없이 함수를 정의하는 무명 함수(anonymous function)라는 문법도 있다.

function3.htm

var f = function (a, b) { return a + b; }; // 변수 f에 sum을 대입합니다.

alert(f(3, 5)); // 변수 f가 가리키는 함수를 호출합니다.

f = function (a, b) { return a * b; }; // 변수 f에 mul을 대입합니다.

alert(f(3, 5)); // 변수 f가 가리키는 함수를 호출합니다.

마지막으로함숫값을 반환하지 않는 함수의 반환 값은 undefined.

function_noretval.htm

function hello() {

var num = 1 + 2; // 값을 반환하지 않는 함수를 정의합니다.

}

alert(hello()); // hello() 함수를 호출하고 그 결과를 출력합니다.

이와 같이 JS의 함수에 대해 간단히 알아볼 수 있었다.

댓글

댓글 본문
graphittie 자세히 보기