본문 바로가기
Programming/HTML & CSS & JavaScript

IIFE(Immediately Invoked Function Expression)

by yoon9i 2023. 12. 12.

IIFE(Immediately Invoked Function Expression)는 즉시 실행되는 함수 표현식을 나타냅니다. 이는 함수를 정의함과 동시에 즉시 실행하는 패턴을 말합니다. IIFE는 주로 스코프를 생성하거나 모듈 패턴을 구현하고 전역 네임스페이스를 깨끗하게 유지하는 데 사용됩니다.

간단한 IIFE의 구문은 다음과 같습니다:

``

(function() {
    // 코드 작성
})();

``

여기서 함수는 괄호로 둘러싸여 있고, 바로 뒤에 또 다른 쌍의 괄호가 있습니다. 이것에 의해 함수가 정의되자마자 즉시 호출되게 됩니다.

IIFE의 몇 가지 특징은 다음과 같습니다:

1. 캡슐화(Closure): IIFE 내에서 정의된 변수는 IIFE 내부에서만 유효합니다. 이는 함수가 자체적인 스코프를 가지기 때문에 외부에서 이 함수 내의 변수에 접근할 수 없습니다.
2. 전역 스코프 오염 방지: IIFE를 사용하면 함수 내에서 정의된 변수들이 전역 스코프에 노출되지 않기 때문에, 전역 네임스페이스의 오염을 방지할 수 있습니다.
3. 모듈 패턴: IIFE는 모듈 패턴을 구현하는 데 사용됩니다. 모듈 패턴은 프라이빗 및 퍼블릭 멤버를 가진 모듈을 생성할 수 있는 디자인 패턴 중 하나입니다.

예를 들어:
``
var result = (function() {
    var x = 10;
    var y = 20;

    function add() {
        return x + y;
    }

    return add();
})();

console.log(result); // 30


``


이 예제에서는 IIFE를 사용하여 x와 y라는 프라이빗 변수를 가진 모듈을 생성하고, add 함수를 퍼블릭으로 노출시켜 result 변수에 할당합니다. 이렇게 하면 전역 스코프에는 오직 result 변수만 노출되고, x, y, add는 외부에서 접근할 수 없습니다.

IIFE 사용한 Graph API 탐색기를 이용하여 페이스북 게시물을 가져왔을때 그 게시물에 맞는 post.id 로 이동.