함수 선언식 (Function Declaration)

함수 선언식(Function Declaration)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩 되어 있으므로 언제든지 호출할 수 있다.

function f() {
  // ...
};

함수 표현식 (Function Expression)

함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할당할 수도 있고 즉시 호출(IIFE)할 수도 있다.

함수 표현식은 함수 이름을 생략할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다.

const f = function() {
  // ...
};

const f = () => {
 // ...
};

즉시 호출 함수 표현식 (IIFE)

• IIFE(Immediately Invoked Function Expression)은 함수 표현식으로 익명 함수를 만들고 그함수를 즉시 실행한다.(즉시실행익명함수)

(function() {
  // IIFE body
})();
(() => {
  // IIFE body
})()

IIFE 사용 하는 이유

1. 필요없는 전역 변수의 생성을 줄일 수 있다.
   함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다.
   즉시실행함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다.
2. private한 변수를 만들 수 있다.
   즉시실행함수는 외부에서 접근 할 수 없는 자체적인 스코프를 가지게된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호 할 수 있다는 장점이 있다.

 // All the code is wrapped in the IIFE
(function () {
    var private = "Private";
    function init () {
        start (private);
        // code to start the application
    }
    function start () {
        // ...
    }
    function end () {
        // ...
    }
    
    init ();
}) ();

IIFE 활용 방법

1. 단 한 번의 사용이 필요한 함수
   즉시실행함수는 한 번의 실행 이후 없어지기 때문에 단 한번의 사용한 필요한 함수에 사용된다. 대표적인 예시로는 변수를 초기화 하는 함수가 있다.

let isAdult;

(function init(age) {
    let currentAge = age;
    if (age >= 20) {
        isAdult = true;
    } else {
        isAdult = false;
    }
})(20);

console.log(isAdult); //  true
console.log(currentAge); //  Uncaught ReferenceError: currentAge is not defined

2. 자바스크립트 모듈
   자바스크립트 모듈을 만들때에도 즉시실행함수가 많이 활용된다.

const Counter = (function counterIIFE() {
  // 현재 counter 값을 저장하기 위한 변수
  let current = 0;

  return {
      getCurrentValue: function () {
          return current;
      },

      increaseValue: function () {
          current = current + 1;
          return current;
      },

      decreaseValue: function () {
          current = current - 1;
          return current;
      },
  };
})();

console.log(Counter.getCurrentValue()); // 0
console.log(Counter.increaseValue()); // 1
console.log(Counter.decreaseValue()); // 0