javascript의 IIFE의 정의와 사용예

IIFE란?

IIFE(Immediately Invoked Function Expression: 'Iffy'로 발음)는 간단히 설명하자면 "정의와 동시에 즉시 실행되는 함수"를 말합니다.

 

IIFE에 대해서 제대로 이해하기 위해서는 2개의 사전지식이 필요합니다.

• 함수 선언과 함수 표현식의 차이
• 클로져

클로져에 대해서는 글이 길어지므로, 다른 블로그나 MDN에서 먼저 보고 오시는 것을 추천드립니다.

 

함수 선언(Declaration)과 함수 표현식(Expression)

IIFE에 대해서 더 명확히 이해하기 위해서, 함수 선언과 함수 표현식의 차이를 인지하고 있어야합니다.

// 함수 선언 (익명함수 사용 불가능)
function myFunc() {
	// do something...
}

// 함수 표현식 (익명함수 사용 가능, 화살표 함수 가능)
const myFunc = function() {
	// do something...
}

함수 선언과 함수 표현식의 차이는 크게 3가지가 있습니다.

1. 익명함수 가능 유무
2. 호이스팅 가능 유무
3. IIFE 사용 가능 유무

	함수 선언	함수 표현식
익명 함수 가능	X	O
호이스팅 가능	O	X
IIFE 사용 가능	X	O

 

이 중, IIFE를 사용할 때 중요한 것은 함수 표현식만이 IIFE로 사용될 수 있다는 것 입니다.

 

IIFE와 함수 표현식

// IIFE 기본 형태
(function myFunc() {
  // …
})();

// IIFE 기본 형태 2
(() => {
  // …
})();

IIFE의 기본 형태는 위와 같습니다.

 

여기서 어떤 분들은 질문을 하실수도 있습니다.

분명 앞에서 함수표현식만이 IIFE로 사용될 수 있다고 했는데 첫번째 형태는 함수 선언과 비슷한 형태이지 않나요?

 

맞습니다. 다만 함수 선언을 괄호가 감싸고 있다는 것이 다른 점입니다.

이 괄호는 함수 선언을 함수 표현식으로서 사용될 수 있게 해줍니다.

(괄호 이외에도 void, 연산자(!,+,-,~)를 함수 선언 앞에 붙여서 명시적으로 함수표현식임을 나타낼 수 있습니다.)

 

이제 다시 IIFE 식을 분석해보세요.

결국은 함수표현식 + () 형태로 함수를 선언과 동시에 실행시키고 있다는 것을 알 수 있습니다.

 

IIFE, 보통 어떻게 사용할까?

1.  전역 네임스페이스(global namespace) 오염 방지

재사용하지 않을 변수라면 굳이 전역 변수로서 자원을 낭비할 필요가 없습니다.

(() => {
  // some initiation code
  let firstVariable;
  let secondVariable;
})();

// firstVariable 및 secondVariable은 함수가 실행된 후 삭제됩니다.

 

 

2. 모듈 패턴으로서 사용

우리가 만드는 어플리케이션에는 보통 라이브러리를 많이 가져다씁니다.

만약 우연히 라이브러리에 있던 전역 변수와 우리가 만든 전역 변수 이름이 같은 경우가 생긴다면 어떻게 될까요?

분명 둘 중 한 곳에서 에러가 발생할 것입니다.

이런 문제를 해결하기 위해 일부 라이브러리 제작자들은 IIFE를 통해 scope를 관리합니다.

 

다음은 IIFE를 통해 private, public 변수와 메서드를 관리하는 한 예제입니다.

const makeWithdraw = (balance) =>
  ((copyBalance) => {
    let balance = copyBalance; // 이 변수는 private 합니다.
    const doBadThings = () => {
      console.log("I will do bad things with your money");
    };
    doBadThings();
    return {
      withdraw: (amount) => {
        if (balance >= amount) {
          balance -= amount;
          return balance;
        }
        return "Insufficient money";
      },
    };
  })(balance);

const firstAccount = makeWithdraw(100); // "I will do bad things with your money"
console.log(firstAccount.balance); // undefined
console.log(firstAccount.withdraw(20)); // 80
console.log(firstAccount.withdraw(30)); // 50
console.log(firstAccount.doBadThings); // undefined; 이 메서드는 private 합니다.
const secondAccount = makeWithdraw(20); // "I will do bad things with your money"
console.log(secondAccount.withdraw(30)); // "Insufficient money"
console.log(secondAccount.withdraw(20)); // 0

 

이외에도 IIFE의 예전 사용방식이 궁금하신 분들은 MDN에서 읽어보시길 추천드립니다.

 

IIFE의 주요 사용 목적은 결국 scope의 관리입니다.

그러므로 클로져를 이용해 다른 방식으로도 구현이 가능합니다.

 

추가로 궁금하신 점이나 잘못된 부분이 있다면 언제든지 지적 부탁드립니다!

참고문서

• IIFE - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• 함수 표현식 - JavaScript | MDN
• Javascript IIFE 이해하기 | Programming Note