JavaScript

(fn)() , (fn()) - IIFE - Immediately Invoked Functional Expression

폴리프레임 2024. 5. 18. 13:48
반응형

JavaScript의 초기 버전부터 지원되었습니다. IIFE는 함수가 정의되자마자 즉시 실행되는 표현식을 만들기 위해 사용됩니다. 주로 전역 스코프 오염 방지, 클로저를 통한 데이터 은닉, 초기화 코드 실행 등을 위해 사용됩니다.

// 초기화 코드 실행
(function() {
// 초기화 코드 작성
  console.log("초기화 완료");
})();

//또는
(function() {
  console.log("IIFE 실행");
}());

 

let와 const 같은 블록스코프가 없던 시절, 전역변수의 오염방지와 클로저기능에 매우 유용하게 사용할 수 있었습니다.

(function() {
  var message = "IIFE 내부";
  console.log(message);
})();

console.log(typeof message); // "undefined"

// 클로저 기능
var counter = (function() {
  var count = 0;
  return {
    increment: function() {
      count += 1;
      return count;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

 

ES6 이후에는 다음 처럼 closure 기능을 많이 활용하기도 합니다.

// 블록 스코프
{
  let message = "블록 스코프";
  console.log(message);
}

console.log(typeof message); // "undefined"


// es module 시스템
// module.js
const privateVar = "비공개 변수";
export const publicMethod = () => {
  console.log(privateVar);
};

// main.js
import { publicMethod } from './module.js';
publicMethod(); // "비공개 변수"