IIFE 란 정의와 동시에 즉시 실행되는 함수를 의미한다.
Immediately Invoked Function Expression (즉시 실행되는 함수 표현식) 의 약자
(function () {
// …
})();
(function() {
// ...
})();
(() => {
// …
})();
(async () => {
// …
})();즉시 실행 함수 표현식
즉시 실행 함수는 함수 리터럴을 () 로 감싼 뒤 바로 실행하는 형태가 일반적이다.
(function () { console.log('Hello World') })(); // Hello World함수 리터럴 (Function Literal)
자바스크립트에서 함수를 정의하는 표현식을 "함수 리터럴" 이라고 하며
함수 리터럴은 아래 4개의 요소로 구성된다
- 예약어 function (필수)
- 함수이름 (선택)
- 매개변수 집합 (필수)
- 함수 본문 (필수)
function add(a, b) {
return a + b
}function (a, b) { return a + b } // Uncaught SyntaxError: Unexpected token (함수 이름은 선택사항이라고 했지만,
함수 이름이 없이 정의하는 경우에는 아래 조건이 충족되어야 한다.
- 이 함수를 할당 받을 변수를 지정
- 이 함수를 즉시 호출
const add = function (a, b) { return a + b };
(function(a, b) { return a + b })(1, 2); // 3즉시 실행 함수는 언제 사용할까?
IIFE의 주요 이점은 아래와 같다.
- 불필요한 전역 변수와 함수를 생성하지 않는다.
- IIFE에서 생성된 변수와 함수의 이름은 전역 Scope와 충돌하지 않는다. (이를 오염시키지 않는다고도 말한다.)
- closure와 함께 private data를 사용할 수 있다.
보편적으로 전역 스코프를 오염시키지 않기 위해 사용하는 경우가 많다.
예시 1)
어떤 버튼의 클릭 횟수를 추적하고 10번 이상 클릭한 뒤에는 클릭이 되지 않게 하고 싶다고 가정.
전역 스코프에 클릭 횟수를 담는 변수를 만들어 처리할 수도 있지만
아래와 같이 하면 전역 스코프를 오염시키지 않고 처리가 가능하다.
<body>
<button id="button">버튼</button>
<script type="text/javascript">
const buttonHandler = (function () {
let count = 0;
return function(event) {
if (count > 9) { // 클릭 횟수가 10번 이상일 때는 클릭이벤트 무시
event.preventDefault();
alert('🚫버튼을 열 번 이상 누르면 큰일납니다. 아무튼 큰일남')
return;
}
count += 1; // 이렇게 자체 스코프에서 변수를 관리할 수 있습니다!
/* ... 이하 버튼 처리 코드 ... */
}
})()
document.querySelector('#button').addEventListener('click', buttonHandler)
</script>
</body>예시 2 )
프로그램 초기화 시점에 아래 init 함수를 실행한다고 가정.
function init() {
var operate = 'init';
console.log(operate)
}
init()이 함수는 Scope에 선언되어 name collision 이 발생할 확률을 높이며, 개발자 의도와 달리 다른 code에 의해 재호출 될 수도 있다.
따라서 외부 코드로부터 사용하지 않는 단 한번 호출하는 코드들, 이 코드에서 사용하는 변수와 함수들은 IIFE를 사용하여 전역 Scope 오염을 방지하고, 다른 개발자가 실수로 호출할 수 없도록 하는게 바람직하다.
(function init() {
var operate = 'init';
console.log(operate)
})()이렇게 IIFE 내부에 선언된 변수와 함수는 외부에서 접근이 불가능하다.
(function init() {
var operate = 'init';
console.log(operate)
})()
console.log(operate) // **operate is not defiend**
꾸준히 나아가는 프론트엔드 개발자