다른 약어?

우리는 두문자어를 좋아합니다. 그렇지 않나요? KISS, DRY, TDD, LOL... 너무 많은 개념 뒤에 기억해야 할 것이 너무 많습니다. 그렇다면 Javascript에서 IIFE는 무엇입니까?

IIFE는 즉시 호출된 함수 표현식을 나타냅니다. 익명 함수를 만들고 괄호를 사용하여 즉시 호출합니다.

아래는 약 4000BC로 거슬러 올라가는 아름다운 함수 표현입니다. 저자: 익명


여기서는 변수에 익명 함수를 저장합니다. 나중에 해당 괄호를 추가하여 해당 함수를 호출합니다.

const myFunction = function () {
  console.log("A function has no name.");
};

//Calling the function
myFunction();
// A function has no name

IIFE는 익명 함수와 호출 단계를 결합합니다.

(function () {
  console.log("This is IIFE.");
})();

여기서 무슨 일이 일어나고 있습니까? 3가지:

익명 함수가 있습니다. 여기에는 function 키워드, 괄호, 중괄호 및 console.log 문이 포함됩니다. 이것은 함수 선언입니다.

해당 함수 선언은 괄호로 둘러싸여 있습니다. 이것이 함수 선언을 함수 표현식으로 바꾸는 것입니다. 두 개의 작은 괄호가 그렇게 큰 힘을 가질 수 있다는 것을 누가 알았습니까?

마지막으로 마지막 괄호는 해당 함수의 본문을 실행하는 함수 표현식을 호출합니다.

축하합니다. IIFE가 무엇으로 구성되어 있는지 이해했습니다! 이제 질문을 하게 됩니다. 도대체 왜 그런 것 중 하나를 사용하고 싶습니까?

IIFE의 이유

IIFE를 사용하려는 주된 이유는 전역 범위를 오염시키지 않고 함수 내부에서 선택한 내용을 비공개로 유지하기 위해서입니다.

둘러싸는 괄호 때문에 IIFE는 외부에서 접근할 수 없는 자체 범위를 갖는다. IIFE에서 반환하는 항목은 IIFE 외부에서 액세스할 수 있는 유일한 항목입니다.

(function () {
  let sayMyName = "Damien";
})();

console.log(iife.sayMyName); // sayMyName is not defined

이러한 변수에 액세스할 수 있도록 하려면 해당 IIFE에서 변수를 반환해야 합니다.

const iife = (function () {
  let sayMyName = "Damien";
  let privateVariable = "No trespassing!";

  let greeting = function () {
    console.log("Hello from the IIFE");
  };

  return {
    sayMyName,
    greeting,
  };
})();

console.log(iife.sayMyName); // Damien
iife.greeting(); // Hello from the IIFE
console.log(iife.privateVariable); // privateVariable is not defined

플러그인 방식

IIFE는 Javascript 플러그인을 작성할 때 매우 인기가 있습니다. 이를 통해 사용자는 수천 개의 변수에 의해 전역 범위가 침범되지 않고 여러 플러그인의 기능을 사용할 수 있습니다. IIFE는 작동에 필요한 것, 일반적으로 단 하나의 변수로 전역 범위를 채웁니다.

간단한 캘린더 플러그인을 작성한 this article 에서 예제를 찾을 수 있습니다.

기본적으로 플러그인은 다음과 같이 보일 수 있습니다. 조금 더 복잡하지만 여전히 IIFE입니다.

(function (globalScope, whatWePopulateTheGlobalScopeWith) {
  globalScope.myCoolPlugin = whatWePopulateTheGlobalScopeWith();
})(this, function () {
  let launchThePlugin = () => {
    document.title = "PLUGIN LAUNCHED";
  };
  return {
    launchThePlugin,
  };
});

좀 더 기술적으로 분석해 보겠습니다.

여전히 IIFE 스켈레톤이 있음을 주목하십시오. 괄호로 둘러싸이고 즉시 호출되는 함수 선언. 여러분을 당황하게 만드는 것은 함수 표현식을 호출할 때 매개변수를 제공한다는 것입니다. 첫 번째 매개변수는 전역 범위인 this입니다.

제 경우에는 플러그인이 브라우저에서 실행되기 때문에 window 개체의 전역 범위입니다. 그러나 그것은 무엇이든 될 수 있습니다. 두 번째 매개변수는 함수입니다.

IIFE의 본체에서 우리는 두 번째 매개변수에 제공된 함수가 반환할 모든 것을 globalScope에 채웁니다. 여기서는 launchThePlugin이라는 함수를 반환합니다. 즉, 이 IIFE가 실행되면 window.myCoolPlugin은 함수가 반환한 개체와 동일합니다.

IIFE의 본체는 전역 범위를 채우고 다른 기능은 플러그인의 기능을 관리합니다. 따라서 HTML에서 Javascript 파일을 가져올 때 myCoolPlugin.launchThePlugin()(또는 window.myCoolPlugin.launchThePlugin())을 실행할 수 있습니다. 이 기능은 문서의 제목을 업데이트합니다.

그 함수에 많은 것을 추가할 수 있지만, 반환하지 않는 한 이 함수 외부에서 액세스할 수 없습니다.

이것이 바로 IIFE의 힘, 유용성, 굉장함입니다.

그것이 분명했으면 좋겠다! 그렇지 않다면 알려주세요! ❤️