[Inside Javascript] 7. 함수 생성

자바스크립트의 함수는 다른 언어의 함수와 마찬가지로 코드의 묶음으로도 역할을 하지만,

모듈화 / 클로저 / 객체 생성 등의 역할을 하기도 한다.

 

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다.

 

1. 함수 선언문

함수 리터럴 형태로 함수를 선언한다.

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

// use function
var result = func(1,2); // result = 3

function 키워드, 함수 이름, 매개변수와 함수 몸체로 구성된다.

함수 이름은 원래 생략하여 익명함수로도 리터럴 함수를 생성할 수 있지만,

함수 선언문 방식으로 함수를 선언할 때는 함수 이름을 반드시 입력해야한다.

 

( 보통 익명함수는 콜백함수를 인자로 넘길 때 많이 사용한다. )

// 함수 리터럴로 생성한 익명 함수를 콜백함수로 넘긴다.
...
element.addEventListener("click", function () {
	callback function
});

2. 함수 표현식

표현식, 말 그대로 변수를 선언하듯 var f = function 형태로 함수를 생성한다.

자바스크립트에서는 함수도 하나의 값으로 취급되기 때문에 변수에 할당이 가능하며,

이렇게 변수에 할당하여 함수를 생성하는 방식이 함수 표현식이다.

var func = function (a, b) {
	return a + b;
}

var result = func(1,2) // result = 3

변수에 익명 함수 리터럴을 담아두고, 해당 변수와 () 연산자를 이용해 함수를 호출하는 방식이다.

각각의 변수는 함수 리터럴을 가리키고 있을 뿐이므로, 변수에 계속 할당을 반복해도 같은 함수를 참조한다.

var f = function () {
	console.log("test");
}

var a = f;
var b = f;

// 아래 3개는 모두 같은 함수를 호출한 것이다.
f();
a();
b();

물론 익명함수가 아닌 함수 리터럴을 변수에 담을 수도 있다. 이런 경우를 '기명 함수 표현식' 이라고 한다.

이 경우, 함수 리터럴에서 사용된 이름은 외부에서 접근할 수 없으므로 오류가 발생한다.

 

var f = function func() {
	console.log("test");
}

f(); // print 'test'
func(); // func is not defined error is occured

함수 리터럴에서 사용도니 이름이 외부에서 접근할 수 없다면,

함수 선언문 방식으로 선언된 함수를 외부에서 사용할 수 있는 이유가 무엇일까?

 

그 이유으는 함수 선언문 방식으로 함수를 선언하고 코드를 실행하면,

자바스크립트 엔진에 의해 함수 표현식으로 코드가 바뀌기 때문이다.

function add(a,b) {
	return a + b；
}

/// it will be changed like following code.

var add = function add(a,b) {
	return a + b；
}

즉 add  함수를 add 변수에 담아서 사용하게 된 것이다.

 

함수 리터럴에서 사용된 함수이름은 함수 내부에서는 접근할 수 있다. (재귀 호출에 사용 가능)

var funcVar = function func(n) {
	if (n == 1) return 1;
    return n*func(n-1);
    // return n*funcVar(n-1) 도 가능하다
}

3. Function() 생성자 함수를 이용한 생성

자바스크립트의 함수도 하나의 객체로서 Function 생성자 함수를 이용해 생성된 객체이다.

앞서 적은 2가지 방식도 모두 내부적으로는 Function 생성자 함수를 사용한다.

하지만 이 방식은 자주 사용하지 않는다.

생성 방법은 다음과 같다.

var func = new Function(arg1, arg2, arg3, 'console.log(arg1); return;');
// 마지막 인자는 함수 몸체에 들어갈 코드 문자열이고, 그 앞까지는 모두 함수 매개변수이다.

---

지금까지 함수 생성 방법 3가지를 알아보았다.

마지막 방법은 자주 사용하는 방법도 아닐 뿐더러 함수 몸체를 문자열로 선언하는 것은 코드를 작성하는데 큰 불편함이 있으므로 사용하기 쉽지 않다.

 

결국 함수 선언문과 함수 표현식으로 함수를 생성하게 될 텐데, 이 두가지 방식에는 '함수 호이스팅' 이라는 큰 차이가 존재한다.

함수 호이스팅은 아래에서 선언된 함수가 위에서 선언된 것처럼 코드가 자동으로 옮겨져,

코드 순서상으로는 함수를 선언하기 전에 함수를 호출해도 호출이 가능한 현상이다.

 

이 함수 호이스팅 현상은 '함수 선언문' 방식에서만 발생한다.

그래서 디버깅의 용이를 위해 '함수 표현식' 만을 함수 선언에 사용하도록 권장하기도 한다.

함수 표현식으로 함수를 선언할 경우, 함수를 선언 하기 전에 함수를 호출하면 에러가 발생한다.