1. 코드 형태

(() => {

})();

위 코드는 "즉시 실행 함수(IIFE, Immediately Invoked Function Expression)"라고 부릅니다.

2. IIFE란 무엇인가?

IIFE는 함수를 정의하자마자 즉시 실행하는 함수입니다.

  • 함수를 만들고
  • 바로 ()를 붙여 호출합니다
  • 외부와 독립된 스코프를 만들기 때문에 전역 변수 오염을 막습니다

3. 구조 설명

(   // 함수를 괄호로 감싸서 '표현식'으로 만듦
  () => {  
      // 여기가 독립된 스코프
  }
)(); // 마지막 () 가 실제 "호출"

4. 왜 사용하는가?

✔ 전역 변수 오염 방지

(() => {
  const a = 10;
})();
console.log(a); // ❌ 오류

✔ 초기 실행(초기화 코드)에 적합

(() => {
  console.log("초기화 실행!");
})();

✔ 스코프 분리로 안전한 코드 작성

5. 마지막 () 의 의미

마지막 ()의 의미는 “정의된 함수를 실행해라(호출해라)” 입니다.

(() => {})();
       ↑ 함수 호출

만약 ()를 빼면?
→ 함수 정의만 존재하고 실행되지 않습니다.

6. 일반 함수와 비교하면 쉽게 이해 가능

function test() {
  console.log("hello");
}
test(); // ← 함수 호출

IIFE도 동일한 구조입니다:

(function() {
  console.log("hello");
})();

7. 일반 함수 버전

(function() {
  console.log("일반 IIFE");
})();

또는 이름 붙인 버전:

(function init() {
  console.log("초기화");
})();

8. 실제 예시

(() => {
  const box = document.querySelector(".box");
  if (!box) return;

  [...box.children].forEach((el, idx) => {
    console.log(idx, el);
  });
})();

독립된 초기화 코드 작성 시 매우 유용한 패턴입니다.

📌 요약

요소 설명

(function(){}) 함수 정의 () 정의된 함수를 즉시 호출 목적 전역 오염 방지, 초기화 실행, 안전한 스코프 생성