함수 호이스팅과 다양한 형태 - JavaScript

함수 생성 시점과 함수 호이스팅

console.dir(add); // f add(x, y)
console.dir(sub); // undefiend 

console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a funciton

function add(x, y) {
    return x + y;
}

var sub = function {
    return x + y;
};

• 함수 선언문, 함수 표현식으로 생성한 함수의 생성 시점이 다름
• 모든 선언문과 동일하게 함수 선언문도 런타임 이전에 자바스크립트 엔진에 의해 함수 객체가 먼저 생성되고, 동일한 이름의 식별자를 암묵적으로 생성한 후 생성된 함수 객체 할당하는 과정을 먼저 수행함
  ⇒ 함수의 호이스팅
• 함수 표현식은 변수 선언은 런타임 이전에 실행되어 생성된 후 undefined로 초기화 됨
  변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 됨
  ⇒ 변수의 호이스팅

💡 JSON을 창안한 더글라스 크락포드는 함수 선언문대신 함수 표현식을 사용할 것을 권장함

---

다양한 함수의 형태

1. 즉시 실행 함수: 정의와 함께 즉시 호출됨, 재사용 불가

• ( function () { ... } () ); 형태로 사용함
• 그룹 연산자 ( … ) 내의 기명 또는 무명 함수를 함수 리터럴로 평가됨
• 값을 반환하거나, 일반 함수처럼 인수를 전달 할 수 있음

1. 재귀 함수: 함수가 자기 자신을 호출하는 것

• 함수 이름은 함수 몸체 내부에서만 유효하여 자기 자신 호출 가능
• 탈출 조건을 반드시 만들어야 함
• 사용 예시

function countdown(n) {
    if(n < 0) return;
    console.log(n);
    countdown(n - 1);
}
countdown(10);

// 팩토리얼
function factorial(n) {
    // 탈출 조건: n이 1 이하일 때 멈춘다
    if(n <= 1) return 1;
    // 재귀 호출
    return n * factorial(n - 1);
}

1. 중첩 함수: 함수 내부에 정의된 함수, 내부 함수 라고도함

• 외부 함수 내부에서만 호출 가능, 외부 함수를 돕는 헬퍼 함수의 역할

1. 콜백 함수: 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

• 매개변수를 통해 함수의 회부에서 콜백 함수를 전달받은 함수를 고차 함수라고 함
• 함수의 변하지 않는 공통 로직은 미리 정의해두고, 경우에 따라 변경되는 로직은 추상화하여 함수 외부에서 내부로 전달하는 것
• 중첩 함수와 달리 외부에서 고차 함수 내부로 주입하기 때문에 자유롭게 교체 가능
• 헬퍼 함수의 역할

// 외부에서 전달받은 f를 n만큼 반복 호출한다.
function repeat(n, f) {
    for(var i = 0; i < n; i++) {
        f(i);
    }
}

var logAll = function(i) {
    console.log(i);
}

// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4

var logOdds = function(i) { 
    if(i % 2) console.log(i);
}

// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3

// ===========================
// 일반적으로 익명 함수 리터럴로 곧바로 고차 함수에 전달함
// 전달된 함수 리터럴은 고차 함수가 호출될 때마다 평가되어 함수 객체를 생성함
// 콜백 함수 외에도 자주 호출된다면 정의한 후 참조해야함
repeat(5, function(i) {
    if(i % 2) console.log(i);
});

1. 순수 함수와 비순수 함수
   1. 순수 함수: 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수
   2. var count = 0; function increase(n) { return ++n; }
   3. 비순수 함수: 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수
   4. function increase(){ return ++count; }

- 외부 상태를 변경하면 상태 변화 추적이 어려우므로 순수 함수를 사용하는 것이 좋음
- 함수형 프로그래밍은 부수 효과를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이려는 것임

함수 호이스팅과 다양한 형태 - JavaScript