반응형
자바스크립트의 IIFE(Immediately Invoked Function Expression)는 과거부터 변수 스코프를 보호하거나 초기화 코드를 실행할 때 자주 사용되던 패턴입니다. 최근에는 ES6 이후의 모듈 시스템과 블록 스코프 변수(let, const)로 인해 덜 사용되긴 했지만, 여전히 유용한 구조로 여겨지며 이해하고 있어야 할 중요한 문법입니다.
✨ IIFE란?
정의하자마자 즉시 실행되는 함수 표현식을 의미합니다.
형식:
(function() {
// 코드 실행
})();
또는
(() => {
// 코드 실행
})();
✅ 왜 사용했을까?
ES6 이전에는 var만 존재해 **함수 스코프(function scope)**를 만들기 위해 IIFE가 널리 사용되었습니다.
예시 1: 변수 보호
(function() {
var secret = 'hidden';
console.log(secret); // hidden
})();
console.log(secret); // ReferenceError
- 내부 변수는 외부에서 접근 불가 (은닉)
예시 2: 초기화 코드 실행
const result = (function(a, b) {
return a + b;
})(2, 3);
console.log(result); // 5
🔍 IIFE의 특징 요약
- **이름 없는 함수(익명 함수)**를 괄호로 감싸고 즉시 호출
- 지역 스코프를 만들어 전역 변수 오염 방지
- 즉시 실행되어 초기화 작업에 적합
🚀 모던 자바스크립트에서의 대안
- 블록 스코프 (let, const)
{
let hidden = 'block scope';
console.log(hidden);
}
// console.log(hidden); → 에러
- ES6 모듈 시스템 (import/export)
- 모듈 단위로 스코프가 분리되므로 전역 변수 충돌 없이 코드 작성 가능
- 즉시 실행 함수 대신 화살표 함수로도 표현 가능
(() => {
console.log("즉시 실행됨");
})();
✨ 결론
IIFE는 과거 자바스크립트에서 스코프 보호와 초기 실행을 위해 많이 사용되었지만, 현재는 let, const, 모듈 시스템 등으로 그 필요성이 줄어들었습니다. 하지만 레거시 코드나 즉시 실행이 필요한 경우 여전히 쓰일 수 있으므로 이해해두는 것이 중요합니다.
반응형
'Programing > javascript' 카테고리의 다른 글
자바스크립트 날짜 다루기: Date vs dayjs vs date-fns (0) | 2025.04.24 |
---|---|
브라우저 저장소 정리: localStorage vs sessionStorage vs cookie (0) | 2025.04.24 |
자바스크립트 이벤트 위임(Event Delegation)과 성능 최적화 (0) | 2025.04.24 |
자바스크립트 debounce와 throttle 차이 및 성능 최적화 예제 (0) | 2025.04.24 |
자바스크립트 클로저(Closure)의 개념과 실전 활용 예제 (0) | 2025.04.24 |
자바스크립트 비동기 처리 개념 정리(setTimeout, Promise, async/await) (0) | 2025.04.23 |
자바스크립트 this 키워드 제대로 이해하기 (함수 / 객체 / 클래스에서) (0) | 2025.04.23 |
자바스크립트 == vs === 비교 연산자의 차이와 올바른 사용법 (0) | 2025.04.23 |