[JS] IIFE; 즉시 실행 함수

자두·2021년 11월 28일
0

Javascript

목록 보기
1/5
post-thumbnail

즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

즉시 실행 함수란 ?
정의되자마자 즉시 실행되는 함수 (Self-Executing Anonymous Function)

즉시 실행 함수 구성

즉시 실행 함수는 크게 괄호로 둘러싸인 익명 함수즉시 실행 함수를 생성하는 괄호 두 부분으로 구성된다.

  • 익명 함수(Anonymous Function)는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 즉시 실행 함수 내부로 다른 변수들이 접근하는 것을 막을 수 있다.

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

표기 방법

즉시 실행 함수는 그룹 연산자(...)로 감싸야 한다.
만약
function () { statements }();
다음과 같은 방법으로 작성하게 된다면

  • 첫 번째 문제는, 해당 문은 함수 선언문으로 해석되는 데에 있다.
    함수 정의가 함수 이름을 생략할 수 없는 선언문의 형식에 어긋나기 때문에 에러가 발생한다.

  • 두 번째로는, 기명 함수로 작성된 선언문이라도 그룹 연산자 내에 피연산자인 값이 없기 때문이다.
    함수 선언문은 자바스크립트 엔진에 의해 ASI(자동 세미콜론 삽입) 처리로 아래와 같이 함수 몸체를 닫는 중괄호 뒤에 세미콜론이 자동으로 추가된다.
    function foo() { statements };();
    때문에 함수 호출 연산자가 아닌 그룹 연산자로 해석되어 값이 존재하지 않는 그룹 연산자로 인해 에러가 발생한다.

  • 따라서 그룹 연산자로 감싸, 해당 코드가 함수 선언문이 아닌 함수 표현식임을 나타내야 한다.

그룹 연산자를 사용한 작성 방법

(function () { statements }());

또는

(function () { statements })();

연산자를 사용한 즉시 실행 함수 작성 방법

꼭 그룹 연산자가 아니더라도 다른 연산자를 앞에 붙여주어 표현식(값으로 해석)으로 변경할 수 있다.

+function () { statements }();
-function () { statements }();
*function () { statements }();
~function () { statements }();
!function () { statements }();
^function () { statements }();
&function () { statements }();

모두 같은 결과가 도출된다.

익명 함수 사용

즉시 실행 함수는 익명 함수로 사용하는 것이 일반적이다. 기명 함수로 사용할 수도 있지만, 그룹 연산자 내의 기명 함수는 리터럴로 평가된다.
함수 이름은 몸체에서만 참조 가능하므로 기명 함수로 사용해도 즉시 실행 함수를 외부에서 재호출 할 수는 없다.

장점

그렇다면 즉시 실행 함수를 사용하는 이유는 무엇일까?
앞에서 언급한 것처럼 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라, 함수를 외부에서 호출할 수 없기 때문에 함수 내부로 다른 변수들이 접근하는 것을 막을 수 있다.
또한, 즉시 실행 함수 내에 코드를 모아 두면 혹시 있을 수도 있는 변수나 함수 이름의 충돌을 방지할 수도 있다.

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

(function () {
    var aName = "Barry";
})();
// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"

즉시 실행 함수 자체는 함수이기 때문에, 내부로 접근은 불가능해도 외부로 변수, 배열, 함수, 객체 등을 반환할 수는 있다.
함수를 변수에 할당하면 함수 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.

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

REF

모던 자바스크립트 Deep Dive (책)
PoiemaWeb - function
정보통신기술용어해설
기술 블로그

profile
블로그 이사했어요 https://ktmihs.tistory.com/

0개의 댓글