[JavaScript] IIFE 란? 어떻게 읽을까?

IIFE(immediately invoked function expression) '이삐(iffy)' 라고 읽는다

 

function delaration: 함수 이름을 주는 '보통' 방법

function myFunction () {  }

 

function expression: 변수나 프로퍼티에 함수를 넣어주는 방법

 

// 변수에 function expression 넣어주기
var myFunction = function () { /* logic here */ };

// 프로퍼티에 function expression 넣어주기
var myObj = {
    myFunction: function () { /* logic here */ }
};

 

이런것도 function expression 이라고 부른다

// 괄호안에도 expression
(function () { /* logic here */ });

// 반대 오퍼레이터 뒤에도 expression
!function () { /* logic here */ };

 

 

function expression 메인 일은, 값을 리턴하는 것 위의 값 모두 리턴값은 '함수'다

 

바로 실행하고 싶으면 뒤에 괄호를 넣어주면 된다.

(function () {
    // logic here
})();

 

IIFE 사용하는 주목적은 데이터 보안을 위함.

IIFE 안에 선언한 변수는 바깥에서 액세스할 수 없다

이렇게 말이다

(function () {
    var foo = "bar";

    // Outputs: "bar"
    console.log(foo);
})();

// ReferenceError: foo is not defined
console.log(foo);

 

 

물론 이렇게 함수 이름을 주고, 실행해도 같은 결과가 나온다

하지만 여기에 단점이 있다,

 

• 글로벌 이름 공간을 하나 잡아먹은것
• 이름의 충돌 가능성을 증가시킨거

 

function myImmediateFunction () {
    var foo = "bar";

    // Outputs: "bar"
    console.log(foo);
}

myImmediateFunction();

// ReferenceError: foo is not defined
console.log(foo);

 

 

IIFE에 쉽게 arguments를 넣어줄 수도 있다

var foo = "foo";

(function (innerFoo) {
    // Outputs: "foo"
    console.log(innerFoo);
})(foo);

 

원문: An Introduction to IIFEs - Immediately Invoked Function Expressions - A Drip of JavaScript