용어

• 함수 선언식(function declaration) : 호이스팅에 영향 받음

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

• 함수 표현식(function expression) : 호이스팅에 영향 받지 않음
• 익명 함수 : 이름이 없는 함수, 변수에 익명함수를 할당하거나 다른 함수의 매개변수로 사용가능하다. 코드를 보면 sum변수에 익명함수가 할당 되어 있다.

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

• 스코프(scope) : 어떠한 식별자(변수)에 접근 할 수 있는 범위
• 클로저(closur)
  • 어떤 함수(외부함수)에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상
  • 외부 함수의 LexicalEnvironment가 가비지 컬렉팅되지 않는 현상
• 1급 시민(first-class citizen)
  : 1급 시민의 조건
  • 변수(variable)에 담을 수 있다
  • 인자(parameter)로 전달할 수 있다
  • 반환값(return value)으로 전달할 수 있다
• 1급 객체(first-class object) : 1급 시민의 조건을 가진 객체
• 1급 함수(first-class function) : 1급 시민의 조건을 갖춘 함수, JavaScript에서는 함수도 객체이기 때문에 JavaScript의 함수는 1급 객체이자 1급 함수이다.
• 함수의 실행 : 함수뒤에 ()가 있으면 실행의 의미이다.

1. IIFE 즉시 실행 함수

IIFE(Imemediately-invoked function expression)는 정의된 즉시 실행되는 자바스크립트 함수이다.

목적

• 로컬 블록 내에서 지역 변수 호이스팅을 방지
• 글로벌 네임스페이스의 오염을 방지 : IIFE는 익명함수를 사용할 수 있기 때문
• 함수 내 정의된 변수에 대한 프라이버시를 유지하면서 동시에 메서드에 대한 공개 액세스를 허용
  (from Wiki)

간단하게 말하면 주로 private scope를 만들기 위해 IIFE를 사용한다.

즉, 함수 내에서 변수를 선언해 함수의 스코프를 함수 내로 제한하고 즉시 함수를 실행시키면서 함수명에 의한 호이스팅(함수 선언식 사용 시)이나 전역 변수 오염을 막음으로서 예상치 못한 버그, 에러 등을 예방할 수 있다.
ES6 이전에는 모듈화를 할 때 IIFE 패턴을 많이 사용했다고 한다.

코드 예시

1번

• ()안에 익명함수를 선언하고 ()를 밖에 사용해 즉시 실행한다.

(function() {
  console.log('IIFE');
})();

(()=> {
  console.log('IIFE arrow function')
})()

• 에러 : 익명함수를 반드시 ()로 감싸야한다.

function() {
  console.log('no wrapping parentheses')
}() // error

2번

• 함수 실행을 의미하는 ()가 내부에 있다.

(function() {
  console.log('IIFE');
});

(()=> {
  console.log('IIFE arrow function')
}())

3번

• 이름이 있는 IIFE

(function callIIFE() {
  console.log('named IIFE');
})();

2. IIFE 꼭 알아야하나?

이 부분이 가장 의문이었다. 이전에 IIFE에 대해 처음 알게되었을 때 ES6의 등장으로 잘 사용할 일이 없다는 글을 보았었다.
하지만 어디에나 레거시 코드가 있고 괄호()로 감싸져있는 함수를 볼 때마다 낯설게만 느껴졌다.
현 직장의 코드에서는 IIFE를 본 적이 없으나 비슷한 개념으로 사용하고 있는 부분들이 있어서 처음 해당 코드를 볼 때 IIFE가 생각나지 않아 한참이나 헤맸었다.
게다가 검색을 하다보면 IIFE를 사용한 코드 예시가 아주 드물지만 있어서 뭔지는 알아야겠다고 생각했다.
과거와 항상 함께하는 한 알아야할 지식이라고 생각한다.