IIFE

IIFE

IIFE란 Immediately Invoked Function Expression의 약자로, 즉시 실행되는 함수표현식 이라는 뜻

 

즉시 실행 함수 표현식

즉시 실행 함수는 함수 리터럴을 ()로 감싼 뒤 바로 실행하는 형태가 일반적이다.

(function () { console.log('Hello') })(); // "Hello"

IIFE는 크게 두 부분으로 구성된다.

첫 번째는 괄호()로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

두 번째는 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

 

(function () { var aName = "Barry"; }) ();

//IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName //throws "Uncaught ReferenceError: aName is not defined"

표현 내부의 변수는 외부로부터 접근이 불가능하다.

 

var result = (function () { 
	var name = "Barry";
	return name;
}) ();
//즉시 결과를 생성한다.
result; // "Barray"

IIFE를 변수에 할당하면 IIFE자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.

 

함수리터럴(Function Literal)

자바스크립트에서 함수를 정의하는 표현식을 함수 리터럴 이라고 한다.

함수 리터럴은 4개의 요소로 구성된다.

1. 예약어 function (필수)
2. 함수이름 (선택)
3. 매개변수 집합 (필수)
4. 함수 본문 (필수)

어려울것같지만, 일반적으로 다들 알고있는 자바스크립트에서의 함수 선언을 위한 문법을 의미한다.

function add(a,b) {
	return a + b;
}

 

함수이름은 선택사항이라고 했지만, 이름없는 함수로 작성하면 아래와 같은 에러가 발생한다.

function (a,b) { return a + b } // Uncaught SyntaxError: Unexpected token

함수이름 없이 정의하는 경우에는 아래 조건이 충족되어야 한다.

1. 이 함수를 할당 받을 변수를 지정
2. 이 함수를 즉시 호출

 

결과가 아래의 예시이다.

const add = function (a,b) { return a + b };
(function(a,b) { return a + b })(1,2); // 3

 

위와 같은 함수 리터럴 표현식을 통해 실행 함수를 정의할 수 있다. 그리고 즉시 실행 함수는 바로 위 코드처럼 즉시 실행되어 값이되는 함수를 의미한다.

 

 

IIFE | MDN

자바스크립트의 IIFE