[JavaScript] IIFE 즉시 실행 함수표현식

taeheeyoon·2021년 7월 21일
4

JavaScript

목록 보기
1/7
post-thumbnail

즉시 실행 함수란?

MDN 공식 문서에서는 이렇게 설명하고 있다.

IIFE

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
-MDN-

"Immediately Invoked Function Expression"의 약자로,
정의되자마자 즉시 실행되는 함수 표현식을 말한다.

표현식

(function () {
    statements
})();

IIFE를 왜 쓸까?

Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
-MDN-

  • IIFE는 외부에서 접근할 수 없는 자체 Scope를 형성한다.
  • IIFE 함수는 상위 스코프에 접근할 수 있으면서도, 내부 변수를 외부로부터 보호해 프라이버시를 유지할 수 있다.

따라서 IIFE를 사용하여 데이터 프라이버시코드 모듈화를 할 수 있다.

예제

아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 변수는 외부로부터의 접근이 불가능하다.

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

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

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

또한 ES6 문법인 화살표 함수로도 표현 가능하다.

let result = (() => {
    let name = "Apple";
    return name;
})();
result; //"Apple"
profile
생각하는 대로 살지 않으면, 사는 대로 생각하게 된다.

2개의 댓글

comment-user-thumbnail
2021년 11월 16일

IIFE는 클로저를 이용해 전역변수를 최소하하여 메모리 관리 측면에서 좋은 이점이 있다고 이해하면 괜찮을까요?

1개의 답글