JavaScript IIFE란?

스코프 공부를 하다가 아래와 같은 문법을 보았다. 처음보는 구조에 신기하여 구글링 하였더니 IIFE라는 나한테는 생소했던 문법이었다.

(function(){

})()

이 문법의 의미는 무엇이고 언제 사용하는지 알아보자!

 

 

IIFE

IIFE는 Immediately Invoked Function Expression의 약자이다.

• Immediately 즉시
• Invoked 호출됨
• Function 함수
• Expression 표현

정의되자마자 즉시 실행되는 함수를 말한다.

 

 

기본 문법

첫 번째 괄호에는 익명함수를 포함하고 두 번째 함수는 그 함수를 실행시켜주는 걸로 볼 수 있다. 매개변수가 있는 함수라면 두번째 함수에 전달해주면 된다. ES6 문법에 추가된 화살표 함수와 함께 사용할 수 있다.

(function(){
 
})()

(()=>{

})()

 

표현 내부의 변수는 외부로부터의 접근이 불가능하다. IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.

var result = (function () {
    var name = "Barry";
    return name;
})();
// 즉시 결과를 생성한다.
result; // "Barry"

 

종종 IIFE 앞에 ; 세미콜론이 붙는 경우도 있다.

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

 

이는 IIFE 이전 코드의 세미콜론이 생략된 경우 에러를 발생하기 때문에 대비한 것이다. 아래 예제를 보면 이해가 될 것이다.

var name = value //변수 선언하다 세미콜론이 안써있는 경우, 바로 이전 코드에서 세미콜론이 없는 경우
(function() {
  console.log('semi')
})();

 

위 코드는 아래와 같이 해석된다.

var name = value(function() {
  console.log('semi')
})();

위의 코드는 에러를 발생시키기 때문에 종종 앞에 세미콜론이 붙는 경우가 있다. 참고하자!

 

IIFE의 목적

IIFE의 주요 이점은 다음과 같다.

• 불필요한 전역 변수와 함수를 생성하지 않는다. (전역변수 사용을 억제할 수 있다.)
• closure와 함께 private data를 사용할 수 있다.
• 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있다.
• IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있다.

IIFE는 한번 실행되고 사라진다. 최초 한 번의 실행만 요구되는 초기화 코드에 적합하다.

function init() {
  var operate = 'init';
  console.log(operate)
}
init()

 

만약 함수를 하나 만들어 사용한다면 이 함수는 전역 스코프에 선언되어 선언 충돌이 발생할수도 있으며, 개발자 의도와 달리 다른 코드에 의해 재호출 될 수도 있다. 따라서 외부 코드로부터 사용되지 않는 변수와 함수들은 IIFE를 사용하여 전역 스코프 오염을 방지하고, 다른 개발자가 실수로 호출할 수 없도록 하는게 바람직합다.

(function init() {
  var operate = 'init';
  console.log(operate)
})()

console.log(operate) // operate is not defiend

이렇게 IIFE를 활용하면 IIFE 선언된 변수와 함수는 외부에서 접근이 불가능하다.

 

 

마무리

면접 질문

Q: IIFE가 무엇이고 또 어떨 때 사용하나요?

A: IIFE는 즉시 실행하는 함수이고, 한번 실행하고 그 이후에 사용하지 않을 때 사용합니다. 불필요한 변수 사용을 줄여줍니다.

Reference

IIFE (Immediately-Invoked Function Expression) 정리