JavaScript에서 즉시 호출 된 기능 표현식 (IIFE)을 작성하고 사용하는 방법

iife (즉시 호출 된 함수 표현식)는 괄호 안에 함수를 줄이고 즉시 호출하여 생성 된 즉시 실행되는 함수입니다. 이는 글로벌 네임 스페이스 오염을 방지하고 폐쇄를 통한 개인 범위를 가능하게합니다. (function () { / code /}) ()로 작성되었으며, 이름 지정 또는 화살표 함수를 사용할 수 있으며, 인수 통과를 지원하며, 캡슐화, 안전한 엄격한 모드 사용 및 비동기 초기화를 위해 ES6 모듈 이전에 널리 사용되었지만, 최신 모듈 시스템에서는 사용이 떨어졌지만 .

즉시 호출 된 기능 표현식 (IIFE)은 정의 되 자마자 실행되는 함수입니다. 개인 범위를 생성하고, 글로벌 네임 스페이스를 오염시키지 않으며, 다른 스크립트를 방해하지 않고 안전하게 코드를 실행하는 데 사용되는 JavaScript의 일반적인 패턴입니다.

iife 란 무엇입니까?

iife는 괄호 안에 랩핑 된 기능이며 즉시 그것을 호출하는 또 다른 괄호가 이어집니다. 표현식 (함수 선언이 아님)이기 때문에 글로벌 범위를 오염시키지 않으며 그 변수는 명시 적으로 노출되지 않으면 외부에서 액세스 할 수 없습니다.

기본 구문은 다음과 같습니다.

 (기능() {
  // 코드가 즉시 실행됩니다
}) ();

외부 괄호는 함수를 표현식으로 바꾸고 후로 () 가 실행합니다.

iife를 쓰는 방법

여러 가지 방법으로 iife를 쓸 수 있지만 가장 일반적인 형태는 익명 기능을 사용합니다.

 (기능() {
  Console.log ( "이것은 바로 실행됩니다!");
}) ();

화살표 기능을 사용할 수도 있습니다 (가독성 과이 this 차이로 인해 덜 일반적이지만) :

 (() => {
  Console.log ( "Arrow iife도 작동합니다!");
}) ();

명명 된 iifes는 기능 이름이 스택 트레이스에 나타나기 때문에 디버깅에 유용합니다.

 (함수 myiife () {
  Console.log ( "나는 이름이 지정된 iife");
}) ();

왜 iife를 사용합니까?

iifes를 사용해야하는 몇 가지 실용적인 이유가 있습니다.

• 글로벌 가변 오염을 피하십시오
  iife 내부에 선언 된 변수는 글로벌 객체 (브라우저의 window 같은)에 추가되지 않으므로 이름 지정 충돌을 방지합니다.

   (기능() {
    var temp = "개인";
    // 임시 외부에 액세스 할 수 없습니다
  }) ();
  // 임시는 여기서 정의되지 않았습니다

• 개인 변수와 함수를 만듭니다
  iife가 만든 클로저를 사용하여 개인 상태를 모방 할 수 있습니다.

   const counter = (function () {
    count = 0을하자;
    반품 {
      증분 : () => count,
      감소 : () => -카운트,
      값 : () => count
    };
  }) ();
  
  counter.increment ();
  console.log (counter.value ()); // 1

• 'Strict'또는 라이브러리의 안전한 사용
  엄격한 모드를 안전하게 적용하거나 jQuery와 같은 라이브러리에서 $ 와 충돌을 피하려면 코드를 iife로 감싸십시오.

   (기능 ($) {
    // $는 전 세계적으로 재정의 된 경우에도 jQuery로 안전하게 사용할 수 있습니다.
    $ (document) .ready (function () {
      Console.log ( "Dom Ready");
    });
  }) (jQuery);

• 기다려서 비동기 코드를 실행하십시오
  최신 JavaScript에서는 Async Iife를 사용하여 모듈 수준에서 지원하지 않는 환경에서 최상위 수준을 기다릴 수 있습니다.

   (비동기 기능 () {
    const response = fetch ( '/api/data');
    const data = await response.json ();
    Console.log (데이터);
  }) ();

명심해야 할 것들

• iifes는 한 번만 실행됩니다.

• 함수는 표현이어야합니다. function() {}() 작성하면 함수 선언으로 해석되므로 구문 오류가 발생합니다.

• 논쟁을 iife에 전달할 수 있습니다.

   (기능 (이름) {
    Console.log ( "Hello,"Name);
  }) ( "Alice");

• 최신 ES6 코드에서는 let 및 const 와 함께 스코프를 차단하고 모듈이 IIFES의 필요성을 줄였습니다. 그러나 그들은 특정 시나리오, 특히 레거시 코드 또는 모듈 배틀러없이 작동 할 때 여전히 유용합니다.

---

기본적으로 iifes는 캡슐화 및 즉각적인 실행을위한 간단하지만 강력한 도구입니다. 오늘날 모듈의 부상으로 오늘날에는 덜 일반적이지만 레거시 코드와 특정 사용 사례 모두에 대해 이해할 가치가 있습니다.

위 내용은 JavaScript에서 즉시 호출 된 기능 표현식 (IIFE)을 작성하고 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!