[JavaScript] 즉시 실행 함수 (IIFE)

IIFE는 Immediately Invoked Function Expression의 약자로, 정의가 되는 순간 바로 실행이 되는 함수인 즉시 실행 함수를 뜻합니다.

 

IIFE의 구문은 다음과 같습니다.

(function (exParameter) {
  // content
})(exArgument);

((exParameter) => {
  // content
})(exArgument);

 

구문을 크게 두 부분으로 나눌 수 있는데, 1) 함수의 정의를 감싸는 소괄호와 2) 끝에 붙어 있는 소괄호입니다.

1) 첫 번째 부분은 익명인 함수의 정의가 들어가게 됩니다. 이때, function 연산자나 화살표 함수를 사용할 수 있습니다. 함수의 정의를 괄호로 묶어주는 이유는 함수 선언문이 아닌, 함수 표현식으로 만들기 위해서입니다. 함수 선언문은 즉시 실행이 안 되기 때문입니다.

2) 두 번째 부분인 소괄호는 정의된 함수를 IIFE로 만드는 역할을 합니다. 자바스크립트 엔진이 이 소괄호를 통해 함수를 즉시 해석하고 실행시킵니다.

 

IIFE의 장점은 IIFE 안에서 사용되는 변수는 private 스코프를 가지게 된다는 것입니다. 외부에서의 변수 접근을 막는 동시에, 이름이 중복되어도 충돌이 일어나지 않습니다. 그리고 불필요한 전역 변수가 추가되어 global 스코프를 오염시키는 것도 막을 수 있습니다.

 

다음의 코드 예시에서 IIFE 내부에 선언된 b 변수는 외부에서 접근이 불가능한 것을 확인할 수 있습니다. 또한, IIFE가 인수를 받아서 사용할 수 있음도 나타납니다.

(function(a) {
  var b = 10;
  console.log(a + b); // Output: 20
})(10);

console.log(b); // ReferenceError: b is not defined

 

let, const, 블록 스코프가 있는 ES6 문법이 발표되면서 IIFE의 사용 필요성이 조금 줄어들었습니다. var, 함수 스코프, 전역 스코프만 있던 상황에서는 각각 1과 2를 출력하는 버튼을 만드는 코드는 다음과 같았습니다.

for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = (function (copyOfI) {
      return function () {
      console.log(copyOfI);
  };
  })(i);
  document.body.appendChild(button);
}

 

하지만 ES6 이후로는 다음 코드로 대체할 수 있게 되었습니다.

for (let i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
      console.log(i);
  };
  document.body.appendChild(button);
}

 

이처럼 몇몇 경우에서는 IIFE가 대체될 수 있지만, 앞서 언급된 장점들로 인해 IIFE는 여전히 사용되고 있습니다.