JavaScript - 즉시실행함수(IIFE)

2021.11.30 — Javascript

즉시실행함수 (IIFE, Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 함수를 말한다.

즉시실행함수는 다음과 같이 소괄호(())로 함수를 감싸서 실행하는 문법을 사용한다.

1(function () {
2    console.log("IIFE");
3})();
4
5// 화살표 함수로도 사용 가능하다
6(() => {
7    console.log("IIFE");
8})();

자바스크립트 콘솔에 위 함수를 찍어보면 선언과 동시에 IIFE를 출력함을 확인 할 수 있다.

즉시실행함수에 익명 함수를 사용해야 할까?

즉시실행함수에도 이름을 붙여 기명 즉시실행함수로 사용 할 수 있다. 하지만 즉시실행함수는 선언과 동시에 호출되어 반환되어 재사용 할 수 없기 때문에 이름을 지어주는 것이 의미가 없다.

하지만 즉시실행함수에 기명,익명 함수를 사용하는 것은 개발자들 사이에서도 의견이 갈린다.

즉시실행함수를 왜 사용할까?

1. 필요없는 전역 변수의 생성을 줄일 수 있다.

함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다.

즉시실행함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다.

2. private한 변수를 만들 수 있다.

즉시실행함수는 외부에서 접근 할 수 없는 자체적인 스코프를 가지게된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호 할 수 있다는 장점이 있다.

즉시실행함수를 어떻게 활용할까?

1. 단 한 번의 사용이 필요한 함수

즉시실행함수는 한 번의 실행 이후 없어지기 때문에 단 한번의 사용한 필요한 함수에 사용된다. 대표적인 예시로는 변수를 초기화 하는 함수가 있다.

1let isAdult;
2
3(function init(age) {
4    let currentAge = age;
5    if (age >= 20) {
6        isAdult = true;
7    } else {
8        isAdult = false;
9    }
10})(20);
11
12console.log(isAdult); //  true
13console.log(currentAge); //  Uncaught ReferenceError: currentAge is not defined

위의 예제는 성인임을 나타내는 isAdult 변수를 즉시실행함수를 활용해 초기화하는 예제이다. init 함수에 입력되는 age 인자에 따라 다른 값을 할당하게 된다.

이후 isAdult 값을 콘솔로 찍어보면 true가 할당됨을 알 수 있고, 내부 변수인 currentAge는 전역으로 저장되지 않음을 확인 할 수 있다.

2. 자바스크립트 모듈

자바스크립트 모듈을 만들때에도 즉시실행함수가 많이 활용된다. 숫자를 세기 위한 Counter 싱글톤 객체를 구현해보며 알아본다.

1const Counter = (function counterIIFE() {
2    // 현재 counter 값을 저장하기 위한 변수
3    let current = 0;
4
5    return {
6        // 즉시실행함수로써 반환되는 객체
7    };
8})();

먼저 객체를 반환하는 형태의 즉시실행함수인 counterIIFE를 만든다.
즉시실행함수 내부에는 현재 counter 값을 저장하기 위한 current라는 변수를 만든다.
즉시실행함수의 반환 객체는 Counter라는 변수에 할당된다.

1const Counter = (function counterIIFE() {
2    // 현재 counter 값을 저장하기 위한 변수
3    let current = 0;
4
5    return {
6        getCurrentValue: function () {
7            return current;
8        },
9
10        increaseValue: function () {
11            current = current + 1;
12            return current;
13        },
14
15        decreaseValue: function () {
16            current = current - 1;
17            return current;
18        },
19    };
20})();
21
22console.log(Counter.getCurrentValue()); // 0
23console.log(Counter.increaseValue()); // 1
24console.log(Counter.decreaseValue()); // 0

즉시실행함수의 반환 객체에 현재 current 값을 출력하는 getCurrentValue 함수, 현재 current 값에 1을 더하는 increaseValue 함수 그리고 현재 current 값에 1을 빼는 decreaseValue 함수를 정의했다.
전역에서 반환 객체의 함수를 통해 current 값을 얻거나 수정 할 수 있다.

위의 예제에서 current 변수는 private 하기 때문에 클로저를 통한 접근 외에는 접근 및 수정이 불가능하다.