함수 선언

1. 함수 선언문 방식으로 함수 선언하기

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

function add(x, y) {

return x + y;

}

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

2. 함수 표현식 방식으로 함수 생성하기

함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 한다.

함수 리터럴로 함수를 생성한 다음, 이를 변수에 저장한 것이다. 

여기서 함수 리터럴로 생성한 함수는 함수명이 없으므로 익명 함수이다.

즉 익명 함수를 이용한 함수 표현식 방법(익명 함수 표현식)이라고 한다.

var add = function(x, y) {

return x + y;

};

var plus = add;

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

console.log(plus(3, 4)); // 7

함수 이름이 포함된 함수 표현식을 기명 함수 표현식이라 한다.

기명 함수 표현식을 사용할 경우는 주의해야 할 점이 있다.

기명 함수 표현식의 함수 호출 방법

var add = function sum(x, y) {

 return x + y;

};

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

console.log(sum(3, 4)); // Uncaught ReferrenceError

sum() 함수를 호출할 경우, 에러가 발생한다.

함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능하기 떄문이다.

함수 표현식에 사용된 함수 이름은 정의된 함수 내부에서 해당 함수를 재귀적으로 호출하거나, 디버거 등에서 함수를 구분할 때 사용된다.

함수 선언문 형식으로 정의된 add() 함수는 자바스크립트 엔진에 의해 다음과 같은 형태로 변경된다.

var add = function add(x, y) {

return x + y;

};

함수 표현식 방식으로 구현한 팩토리얼 함수

var factorialVal = function factorial(n) {

if(n <= 1) {

return 1;

}

return n * factorial(n-1);    // 함수 내부에서 이뤄지는 재귀 호출은 factorial() 함수이름으로 처리

};

console.log(factorialVal(3));    // 6

console.log(factorial(3));        // error

3. 함수 호이스팅

함수 생성 방법 방법에 따라 동작 방식이 차이가 있는데, 그 중 하나가 호이스팅이다.

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

add(2, 3);    // 5

function add(x, y) {

return x + y;

}

add(3, 4);    // 7

add() 함수가 정의되지 않았음에도 호출 하는 것이 가능하다.

함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다. 

이것을 함수 호이스팅이라고 한다.

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

add(2, 3);    // uncaught type error

var add = function(x, y) {

return x + y;

}

add(3, 4);    // 7

함수 표현식 형태로 정의되어 있어 호이스팅이 일어나지 않는다.

함수가 생성된 이후에 호출이 가능하다.

이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성과 초기화 작업이 분리돼서 진행되기 때문이다.

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

함수 표현식 사용을 하는 것이 좋다.