2019-02-13(JavaScript IIFE 란?)

IIFE 란?

IIFE(Immediately Invoked Function Expressions: "Iffy"라고 발음)는 즉시 호출 함수 표현식의 줄임말이다.

기본적인 형태는 아래와 같다.

(function() {
    //Do fun stuff
})()

이것은 즉시 호출되는 익명 함수 표현식이다. 이것은 JavaScript에서 때에 따라 중요하게 사용되기도 함.

즉시 호출 함수 표현식은 어떻게 동작하는가?

괄호쌍이 익명함수를 감싸서 함수 선언을 함수 표현식으로 표현할 수 있습니다.

그러므로 단순한 익명함수를 클로벌 스코프에 선언하지 않고 어디서든 익명함수 표현식을 가질 수 있습니다.

따라서, 아래와 같이 표현식이 가능합니다.

//괄호 사용 안함
function() {
    console.log('NO IIFE')
}(); // ERROR
 
//괄호 사용 (즉시호출함수 IIFE)
(function() {
    console.log('IIFE');
})()
 
//함수 표현과 즉시함수 
(showName = function() {
    console.log(name || "NO Name");
})();                    //NO Name
showName("Rich");         //Rich
showName();                //NO Name

IIFE 예제 (1)

const message = (function() {
    const secret = "I m secret!";
    return `The Secret is ${secret.length} characters long.`
})();
 
console.log(message);

변수 secret 은 IIFE의 스코프 안에서 안전하게 보호되면서 외부에서 접근할 수 없다.
IIFE는 함수 이므로 무엇이든 반환할 수 있다.

IIFE 예제 (2)

//호출된 함수를 가지고 있는 변수 f
const f = (function() {
    let count = 0;
    return function() {
        return `i have been called ${++count} time(s).`
    }
})();
 
f();// 1
f();// 2

결론 IIFE를 왜 사용하고 언제 사용하는가?

글로벌 스코프를 오염시키지 않기 위해서 사용한다.

대표적인 라이브러리들은 IIFE패턴을 사용해서 충돌을 방지한다.