IIFE

IIFE는 "Immediately Invoked Function Expression"의 약어로, 즉시 호출되는 함수 표현식을 나타낸다. 이것은 javascript에서 함수를 정의하고 즉시 실행하는 패턴 중 하나이다. IIFE를 사용하면 함수를 정의하자마자 바로 실행하여 지역 범위를 생성하고, 전역 범위의 오염을 피할 수 있다. 이러한 IIFE는, 함수를 즉시 실행시켜야 하는 상황 or 함수의 재사용이 필요하지 않는 상황 or 함수의 네이밍을 짓기 힘든 상황 등에 사용하면 좋다.

아래에서 IIFE의 주요 특징과 사용법에 대해 자세히 살펴보자.

특징

• 기본 구조
  IIFE는 함수 정의를 괄호로 둘러싸고, 그 뒤에 다시 괄호를 추가하여 함수를 즉시 호출하는 패턴이다.

// function 함수
(function() {
    // 코드 작성
})();          

// arrow 함수
(() => {
  	// 코드 작성
})();

• 지역 스코프 생성
  IIFE 내에서 선언된 변수들은 해당 함수의 지역 스코프에 속하게 된다. 이는 함수 외부에서 이 변수들에 접근할 수 없음을 의미한다.

(function() {
    var localVar = "IIFE Example";
    console.log(localVar);			 // 접근 가능
})();

console.log(localVar);				 // 에러: localVar는 정의되지 않음

• 전역 스코프 오염 방지
  IIFE를 사용하면 전역 스코프를 오염시키지 않고도 코드를 실행할 수 있다. IIFE 내에서 정의된 변수들은 외부에서 접근할 수 없기 때문이다. 지역 스코프 생성과 같은 원리이다.

// 전역 스코프
(function() {
    var localVar = "IIFE Example";
    console.log(localVar);				 // 접근 가능
})();

console.log(localVar);					 // 에러: localVar는 정의되지 않음

• 매개변수 전달
  물론 IIFE 내에서 함수에 매개변수 역시 전달할 수 있다. 하지만 IIFE 함수는 일회성 형식이므로 큰 의미는 없다.

// function 함수
(function(name: string) {
    console.log('Hello, ' , name);
})("John"); 					// Hello, John

// arrow 함수
((name: string) => {
 	console.log('Hello, ', name);
})()

• 모듈 패턴 구현
  IIFE는 모듈 패턴을 구현하는데 자주 사용된다. 모듈 패턴은 코드를 모듈화하여 전역 스코프를 깔끔하게 유지하고 재사용성을 높이는 데 도움이 된다. 모듈 패턴에 대해선 이곳에서 알아보자.

const myModule = (function() {
    const privateVar = 'I am private';

    function privateFunction() {
        console.log('This is a private function');
    }

    return {
        publicVar: 'I am public',
        publicFunction: function() {
            console.log('This is a public function');
        }
    };
})();

console.log(myModule.publicVar); 			// 접근 가능
myModule.publicFunction(); 					// This is a public function

console.log(myModule.privateVar); 			// undefined (접근 불가)
myModule.privateFunction(); 				// TypeError: myModule.privateFunction is not a function

단점 및 주의사항

• 재사용 불가능
  함수는 동일한 기능을 여러 곳에서 사용하기 위해 만들어진다. 하지만 IIFE로 만들어진 함수는 실행되자마자 바로 사라지기 때문에 재사용할 수 없으며 이는 함수의 의의성에 대해서 의문이 들기도 한다.

• 가독성 감소
  IIFE는 코드의 가독성을 감소시킬 수 있다. 코드가 길어지고 여러 IIFE가 중첩될 경우, 코드의 흐름을 이해하기 어려워질 수 있다.

• 디버깅 어려움
  IIFE 내부에서 선언된 변수들은 외부에서 접근할 수 없어 디버깅이 어려울 수 있다. 디버깅 시에는 IIFE를 사용하기보다는 모듈 시스템 등을 고려하는 것이 유리할 수도 있다.

• 의존성 관리
  import 및 export를 사용하지 않으므로, IIFE를 사용하면 모듈 간의 의존성을 명확히 정의하기 어려울 수 있다.

• 메모리 관리
  IIFE는 실행 후 즉시 해제되지만, 그 안에서 생성된 객체나 함수는 외부에서 참조되지 않아도 계속 메모리에 남을 수 있다. 이는 메모리 누수의 원인이 될 수 있다.