[javascript] 즉시 실행 함수 표현(IIFE : Immediately Invoked Function Expression)

IIFE : 즉시 실행 함수 표현

---

자바스크립트 기반 라이브러리나 api를 사용하다 보면 

(function () {

	/.../
    
})();

 

이러한 형태의 코드문법을 본적이 있을 것이다.

 

 

이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다.

 

첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다.

이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

 

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

 

 

 

 

 

예시 

---

(function () {
    var userName = "hogi";
})();

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

IIFE로 표현된 함수 내부에 정의된 변수는 외부에서 접근이 불가능합니다.

 

var result = (function () {
    var userName = "hogi";
    return userName;
})();

// 즉시 결과를 생성한다.
userName; // "hogi"

하지만 해당 값을 return 하게 되면 함수자체를 담는것이아니라, 함수가 실행된 결과만 저장되는것을 알 수 있습니다.

 

 

 

 

 

참조

---

https://developer.mozilla.org/ko/docs/Glossary/IIFE