JavaScript에서 자체 호출 함수(Self-Invoking Function)는 즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE)이라고 불립니다.
IIFE는 이름 그대로 함수가 정의되는 순간 곧바로 실행되는 JavaScript 함수입니다. 따라서 일반 함수처럼 별도로 호출하는 과정이 필요 없다는 것이 가장 큰 특징입니다.
IIFE의 기본 문법
IIFE는 다음과 같은 형태로 작성합니다.
(function () {
// 실행할 코드
})();함수 전체를 괄호 ()로 감싸고, 그 뒤에 또 다른 괄호 ()를 붙여주면 정의와 동시에 함수가 실행됩니다.
예제 코드
다음은 JavaScript에서 자체 호출 함수(IIFE)를 사용한 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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 = "This code is invoked immediately as soon as it is defined";
})();
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
페이지가 로드되는 즉시 IIFE 내부의 코드가 실행되어, .sample 요소에 "This code is invoked immediately as soon as it is defined"라는 문구가 자동으로 삽입됩니다.
IIFE를 사용하는 이유
IIFE는 주로 다음과 같은 목적으로 활용됩니다.
- 전역 스코프 오염 방지: IIFE 내부에서 선언된 변수는 외부에서 접근할 수 없으므로, 전역 네임스페이스를 깨끗하게 유지할 수 있습니다.
- 초기화 코드 실행: 페이지 로드 시 한 번만 실행하면 되는 초기화 로직에 적합합니다.
- 비공개 변수 생성: 클로저와 함께 사용하면 외부에서 접근할 수 없는 비공개 상태를 만들 수 있습니다.