JavaScript 익명 래퍼 함수와 IIFE 완벽 이해하기

익명 래퍼 함수란 무엇인가?

익명 래퍼 함수(Anonymous Wrapper Function)는 이름이 없는 함수로 특정 코드 조각, JavaScript 라이브러리 또는 함수 전체를 감싸는 기법입니다. 이를 통해 코드의 가시성(visibility)과 네임스페이스(namespace)를 효과적으로 제어할 수 있으며, 전역 스코프의 오염을 막고 다른 라이브러리나 스크립트와의 변수·함수 이름 충돌을 방지할 수 있습니다.

이러한 목적으로 가장 널리 사용되는 패턴이 바로 IIFE(Immediately Invoked Function Expression, 즉시 실행 함수 표현식)입니다. IIFE는 함수가 정의되는 순간 곧바로 실행되기 때문에, 별도의 호출 과정 없이 내부 코드가 단 한 번만 실행됩니다.

IIFE의 기본 문법

(function () {
  // 이 안에 작성된 코드는 외부에서 접근할 수 없습니다.
})();

함수 표현식을 괄호 ()로 묶고 뒤에 ()를 붙이면, 함수가 정의되는 즉시 실행됩니다. 이렇게 하면 함수 내부에서 선언된 모든 변수와 함수가 전역 객체(window)에 노출되지 않아 안전하게 캡슐화됩니다.

구현 예제

다음은 JavaScript에서 익명 래퍼 함수를 구현한 전체 예제 코드입니다.

<!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;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScript 익명 래퍼 함수</h1>
<div class="result">0</div>
<br />
<script>
    let resEle = document.querySelector(".result");
    (function () {
        resEle.innerHTML =
        "이 코드는 IIFE 내부에 있으므로 자동으로 실행됩니다";
    })();
</script>
</body>
</html>

실행 결과

JavaScript 익명 래퍼 함수와 IIFE 완벽 이해하기

동작 원리 정리

익명 함수가 괄호 ()로 감싸지면서 하나의 함수 표현식이 됩니다.
뒤에 붙은 ()에 의해 함수가 정의와 동시에 즉시 실행됩니다.
함수 내부에서 선언된 변수와 함수는 외부 전역 스코프에 노출되지 않습니다.
따라서 여러 라이브러리를 함께 사용하는 환경에서도 이름 충돌 없이 코드를 안전하게 보호할 수 있습니다.

이처럼 익명 래퍼 함수와 IIFE는 JavaScript에서 모듈 패턴의 기초가 되는 핵심 개념이며, 대규모 애플리케이션에서 코드 충돌을 예방하는 필수적인 도구입니다.