자바스크립트의 함수의 생성

함수 생성 방법 

함수를 생성하는 3가지 방법.

각각의 방식에 따라 함수 동작 방식이 미묘하게 차이가 난다. 

 

 1. 함수 선언문 

 2. 함수 표현식 

 3. Function() 생성자 함수 

 

---

1. 함수 선언문 방식

 함수 선언문 방식으로 정의된 함수의 경우는 반드시 함수명이 정의 되어 있어야 한다.

 

function add(x,y){
	return x+y;
 }
 
 console.log(add(3,4));

---

2. 함수 표현식 방식

 함수도 하나의 값처럼 취급된다. 따라서 함수도 변수에 할당하는 것이 가능하다. 

이런 방식으로 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 말한다.

 

- 익명함수 

var add = function(x,y){
	return x+y;
}; 
// add는 함수 리터럴로 생성한 함수를 참조하는 변수일뿐, 함수 이름이 아니다. 


var plus = add; 
// 함수 변수 add는 함수의 참조값을 가지므로 또 다른 변수 plus도 그 값을 그대로 할당할 수 있다. 

console.log(add(3,4)); 
// 함수 표현식으로 생성된 함수를 호출하려면 함수 변수를 사용해야 한다. 

console.log(plus(5,6)); 
// plus 또한 add 함수와 같은 함수를 참조하는 변수이다.

- 기명함수

var add = function sum(x,y){
	return x+y;
};
// 함수 이름이 포함된 함수 표현식이다. 
// 함수 표현식의 함수 이름으로는 외부에서 접근이 불가능하다 


console.log(add(3,4));
console.log(sum(x,y)); // sum is not defined

함수 이름을 이용하면 함수 코드 내부에서 함수 이름으로 재귀적인 호출 처리가 가능하다.

var factorialVar = function factorial(n){
	if(n <= 1){
    	return 1; 
        }
    	return n * factorial(n-1);
 }; 
 
 
 console.log(factorialVar(3));
 console.log(factorial(3)); // factorial is not defined

함수 외부에서는 함수 변수로 호출했으며, 함수 내부에서 이뤄지는 재귀 호출은 함수 이름으로 처리한다. 

 

- 함수 표현식에선 중괄호 뒤에 세미콜론을 붙이도록 하여야 한다.

 

---

3. Function() 생성자 함수를 통한 함수 생성하기 

 

자바스크립트의 함수는 Function() 이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다. 

함수 선언문이나 함수 표현식 방식도 생성자 함수가 아닌 리터럴 방식으로 함수를 생성하지만, 내부적으로는 Function() 생성자 함수로 함수가 생성된다고 볼 수 있다. 

 

- 생성자 문법 

new Function (arg1, arg2, .... ,argN, functionBody)


// arg1, arg2, .... , argN 함수의 매개변수
// functionBody 함수가 호출될 때 실행될 코드를 포함한 문자열 

var add = new Function('x','y','return x + y');

console.log(add(3,4));

생성자 함수는 자주 사용되지 않지만, 상식 수준으로 알아두는게 좋다.

 

---

* 함수 호이스팅

 

함수를 생성하는 3가지 방법의 차이는 동작 방식에 있다고 했다. 그 중 하나가 함수 호이스팅이다. 

함수 호이스팅 때문에 함수 표현식만을 사용할 것을 권하기도 한다.

 

함수 선언문 방식과 함수 호이스팅 

add(2,3); // 5
// 아직 이 시점에서는 add() 함수가 정의되지 않았음에도 add()함수를 호출하는것이 가능하다. 
// 함수의 위치와 상관 없이 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다. 

function add(x,y){
	return x+y; 
 }
 
 add(3,4); // 7 

함수 호이스팅은 함수를 사용하기 전에 반드시 선언해야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수도 있다. 

 

함수 표현식 방식과 함수 호이스팅

add(2,3); // uncaught type error 
// 함수 표현식 형태로 정의되어 있어 호이스팅이 일어나지 않는다. add() 함수가 정의되기 전이라서 에러 발생


// 함수 표현식 형태로 add()정의 
var add = function (x,y){
	return x+y;
}; 

add(3,4) // 7