IIFE의 현대적 활용 사례
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript/TypeScript 개발자, React/Angular 프레임워크 사용자
난이도: 중급 이상 (IIFE 패턴, 비동기 처리, 상태 관리 이해 필요)
핵심 요약
- IIFE는
let
/const
가 없던 시대의 변수 스코핑 문제를 해결하는 패턴으로, 현대에는async
/await
및 상태 관리에 활용됨 - React의
useEffect
에서async
함수를 즉시 실행하는 IIFE 패턴으로 비동기 처리 가능 switch
/if
문 내에서let
사용을 피하고const
로 선언하여 재할당 방지 가능- 복잡한
ternary
연산자 체인을IIFE
로 간결하게 재구성 가능
섹션별 세부 요약
1. React의 `useEffect`에서 IIFE 활용
useEffect
내부에서async
/await
사용 시 에러 발생- IIFE 패턴을 통해 즉시 실행하는
async
함수 정의
```javascript
useEffect(() => {
(async () => {
const response = await MyAPI.getData(someId);
})();
});
```
2. `switch` 문에서 `const` 사용
switch
내부에서let
사용 강제- IIFE로
switch
내부 로직을const
로 선언
```javascript
const postTaskPriority = (() => {
switch (priorityLevel) {
case ImmediatePriority: return 'user-blocking';
// ...
}
})();
```
3. `if` 문에서 `const` 사용
if
문 내부에서let
사용 강제- IIFE로
if
조건문을const
로 선언
```javascript
const kind = (() => {
if (symbol.kind === SymbolKind.Reference) return DisplayInfoKind.REFERENCE;
// ...
})();
```
4. `ternary` 연산자 체인 간결화
- 복잡한
ternary
체인 대신 IIFE 사용
```javascript
const defer = (() => {
if (typeof process !== 'undefined' && process.nextTick) return process.nextTick;
// ...
})();
```
5. 상태 추적의 완전한 캡슐화
- 외부에서 접근 가능한 상태 변수 대신 IIFE로 캡슐화된 클로저 생성
```javascript
const getNextCount = (() => {
let nextCount = 0;
return () => nextCount++;
})();
```
6. 객체 생성 패턴의 캡슐화
- Angular에서 IIFE를 활용한 캡슐화된 객체 생성
```javascript
const metadata = (() => {
// 복잡한 로직
return {
title: '...',
content: '...'
};
})();
```
결론
IIFE는 let
/const
가 아닌 경우에도 async
/await
, 상태 캡슐화, 조건문 간결화 등 현대 웹 개발에서 여전히 유용한 패턴입니다. 예시로 React의 useEffect
, switch
/if
문, ternary
연산자 체인에서의 활용이 있으며, 코드 가독성과 유지보수성 향상에 기여합니다.