즉시 실행 함수 표현(IIFE)

기본 개념

• Immediately Invoked Function Expression의 약자
• 정의되자마자 즉시 실행되는 JavaScript Function을 의미함
• Self-Executing Anonymouse Funcion으로 알려진 디자인 패턴

(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();

---

익명함수, 기명함수 사용 여부

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

---

사용 이유

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

• 함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있음
• 하지만, 즉시 실행 함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있음

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

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

활용 방법

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

• 즉시 실행 함수는 한 번의 실행 이후 사라지기 때문에 단 한번의 사용이 필요한 함수에 사용됨
• EX. 변수를 초기화 하는 함수

let isKid;

(function init(age){
	let currentAge = age;
  	if(age <= 13){
    	isKid = true;
    }else {
    	isKid = false;
    }
})(10);

console.log(isKid); // true
console.log(currentAge); // currentAge is not define

• isKid 변수는 즉시 실행 함수 외부에서 let 키워드로 선언되었음
• isKid가 전역 스코프에 존재하기 때문에, console.log(isKid)의 결과로 ture가 나옴

• currentAge 변수는 즉시 실행 함수 내부에서 let 키워드로 선언되었음
• let으로 선언된 변수는 블록 스코프를 가지므로, 해당 변수는 함수 내부에서만 접근 가능하기 때문에 console.log(currentAge)의 결과로 currentAge is not define가 나옴

2. 자바스크립트 모듈

• 자바스크립트 모듈을 만들때에도 즉시 실행 함수를 많이 활용함

const Counter = (function counterIIFE() {
	let currentCounter = 0;
  
  	return {
    	// 즉시 실행 함수로써 반환되는 객체
    }
})();

1. 객체를 반환하는 형태의 즉시 실행 함수인 counterIIFE를 만들기
2. 즉시 실행 함수 내부에 현재 counter 값을 저장하기 위한 current 변수 만들기
3. 즉시 실행 함수 반환 객체는 Counter 변수에 할당됨

const Counter = (function counterIIFE() {
	let currentCounter = 0;
  
  	return {
    	getCurrentValue: function () {
        	return currentCounter;
        },
      
      	increaseValue: function () {
        	currentCounter = currentCounter + 1;
          	return currentCounter;
        },
      
      	decreaseValue: function () {
        	currentCounter = currentCounter - 1;
          	return currentCounter;
        }
    }
})();

console.log(Counter.getCurrentValue()); // 0
console.log(Counter.increaseValue()); // 1
console.log(Counter.decreaseValue()); // 0

• currentCounter 변수는 private 하기 때문에 클로저를 통한 접근 외에는 접근 및 수정이 불가능함

---

궁금한점 - IIFE와 클로저와의 관계

클로저를 사용하기 위해 반드시 IIFE를 사용해야 할까?

• 밀접한 관계가 있지만, 반드시 즉시 실행 함수를 사용해야 하는 것은 아님

1. 클로저와 IIFE의 관계

• 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합임
• IIFE는 정의되자마자 즉시 실행되는 함수 표현식임
• IIFE는 클로저를 생성하는 일반적인 방법 중 하나로, 클로저 생성의 유일한 방법은 아님

2. IIFE를 통한 클로저 생성

• IIFE는 private 스코프를 만들어 변수와 함수를 캡슐화하는데 자주 사용됨
• IIFE는 내부에서 함수를 반환하면, 그 함수는 IIFE의 렉시컬 환경에 대한 클로저를 형성함

3. IIFE를 사용한 클로저의 장점

• IIFE를 사용한 클로저는 전역 네임스페이스 오염을 방지하고 pricate 변수를 만드는 데 유용함

---

용어 정리

전역 네임스페이스 오염

• JavaScript에서 발생할 수 있는 문제로, 전역 스코프에 너무 많은 변수나 함수를 선언하여 발생하는 문제를 말함

---

참고

• MDN
• JONGMINFIRE.DEV