[study]이론정리/HTML & CSS & JavaScript

IIFE(Immediately Invoked Function Expression)

yoon9i 2023. 12. 12. 09:59

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 로 이동.