즉시 실행 함수 (IIFE, Immediately Invoked Function Expression) 간단히 알아보기

즉시 실행 함수는 말 그대로 선언과 동시에 즉시 실행되는 함수이다.

과거에는 이것이 무슨 의미가 있는가, 생각했지만 지나고보니 자바스크립트에서 유용하게 쓰이는 문법이었다.

웹팩에서도 즉시 실행 함수를 통해서 js의 스코프 이슈를 해결했다고 하니, 알아두는 편이 좋다.

기본적인 사용법은 다음과 같다.

(function(){
  let i = 0;
  console.log(`변수i는 ${i}이다.`);
})();

이 js 파일을 실행하면 바로 콘솔창에 '변수i는 0이다'가 찍힐 것이다.

(() => {
  let i = 0;
  console.log(`변수i는 ${i}이다.`);
})();

화살표 함수로도 표현할 수 있다.

즉시 실행될 함수이기에, 익명함수로 작성하여도 문제없다.

기본적인 형태는 말 그대로 () => {} 로 선언 후 곧바로 실행하는 형태이다. (() => {})();

 

즉시 실행 함수는 자바스크립트의 클로저 속성과 연관지어 생각해 볼 수 있다.

const i = "FIXED"; // 전역 스코프

const content = (() => {
  let i = 0;
  return {
    plus() {
      i++;
    },
    minus() {
      i--;
    },
    get() {
      return i;
    }
  };
})();

content.plus();
console.log(content.get()); // 1
content.minus();
console.log(content.get()); // 0

console.log(i); // FIXED

새로운 함수 스코프가 생겨나고 변수 i는 그 내부에 위치한다.

이렇게 됨으로써, 외부의 스코프(전역 스코프)와 분리되어 변수가 오염되는 것을 막을 수 있다.

역으로 외부에서 함수 스코프 내부로 변수가 들어오는 것 역시 막을 수 있다.

웹팩은 수 많은 자바스크립트 코드를 번들링하는데, 이 와중에 스코프의 충돌이 일어나 변수가 오염되는 것을 IIFE를 이용하여 방지할 수 있다.

 

https://developer.mozilla.org/ko/docs/Glossary/IIFE

IIFE | MDN