JavaScript 즉시 실행 함수 표현식(IIFE)이란?
즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE)은 정의되는 순간 곧바로 실행되는 자바스크립트 함수입니다. 일반적인 함수와 달리 별도의 호출 과정 없이 선언과 동시에 자동으로 실행되기 때문에, 초기화 작업이나 한 번만 수행하면 되는 로직을 처리할 때 유용하게 사용됩니다.
IIFE의 기본 문법
IIFE는 함수 표현식을 괄호 ()로 감싸고, 그 뒤에 또 다른 괄호를 붙여 즉시 호출하는 형태로 작성합니다.
(function () {
// 정의되자마자 즉시 실행되는 코드
})();괄호로 감싸는 이유는 자바스크립트 엔진이 function 키워드로 시작하는 구문을 '함수 선언문'으로 해석하는 것을 방지하기 위해서입니다. 함수가 표현식으로 평가되어야만 즉시 호출이 가능합니다.
예제 코드
다음은 자바스크립트에서 IIFE를 활용한 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Immediately Invoked Function Expressions (IIFE)</h1>
<div class="sample"></div>
<script>
let sampleEle = document.querySelector(".sample");
(function () {
sampleEle.innerHTML = "이 코드는 정의되자마자 즉시 실행됩니다";
})();
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 화면에 다음과 같은 문구가 출력됩니다.
IIFE를 사용하는 이유
- 전역 네임스페이스 오염 방지: IIFE 내부에서 선언된 변수와 함수는 외부 스코프에 노출되지 않으므로, 전역 변수 충돌을 예방할 수 있습니다.
- 캡슐화: 비공개(private) 상태를 만들어 모듈 패턴을 구현하는 기반이 됩니다.
- 비동기 반복문 처리: ES6의
let등장 이전에는var의 스코프 문제를 해결하기 위해 반복문 안에서 IIFE가 자주 활용되었습니다.
이처럼 IIFE는 간단한 문법이지만, 자바스크립트의 스코프와 클로저 개념을 이해하는 데 중요한 역할을 하는 핵심 패턴입니다.