[JavaScript] Chapter 12. IIFE

IIFE (Immediately Invoked Function Expression)

• 즉시 실행되는 함수 표현식 약자
• 표현 내부 변수는 외부로부터 접근 불가
• IIFE 변수 할당 시 자체 저장 X
• 즉시 실행된 함수 결과만 저장 O
• 즉시 실행하고 없애버리기 때문에 함수명이 굳이 필요하지 않다

 

IIFE 사용 이유

• 불필요한 변수 및 함수 생성 X
• Scope 충돌 X
• 한 번만 호출하는 코드의 경우 사용

javascript

닫기 줄바꿈

function init() { // 초기 설정 로직 }

(function () { // 초기 설정 로직 })()

 

IIFE 표현식

• 함수 리터럴을 () 감싼 형태

javascript

닫기 줄바꿈

// 함수 리터럴
function sum(num1, num2) {
​​​​return num1 + num2;
}

// IIFE
(function () {
​​​​// 로직
})();

• 즉시 실행 함수 예

javascript

닫기 줄바꿈

(function (num1, num2) {
​​​​return num1 + num2;
})(10, 20);

 

ex)

javascript

닫기 줄바꿈

// Ex1
(function () {
​​​​var myAge = 30;
})();

// Error
// var의 경우, 블록 스코프는 값이 저장돼서 출력되겠지만, 즉시 실행 함수는 저장되지 않는다.
document.write(myAge); 



// Ex2
var result = (function () {
​​​​var myAge = 30;
​​​​return myAge;
})();

document.write(result); // 30



// Ex3
var result = (function (num1, num2) {
​​​​return num11 + num2;
})(10, 20);

document.write(result); // 30

 

• 즉시 실행 함수 표현식에 화살표 함수를 적용할 수 있다.

javascript

닫기 줄바꿈

// 즉시 실행 함수
var result = (function (num1, num2) {
​​​​return num11 + num2;
})(10, 20);

// 즉시 실행 함수에 화살표 함수를 적용
var result = ((num1, num2) => num1 + num2)(10, 20);

document.write(result);