사용자 도구

사이트 도구


wiki:javascript:javascript_note:iife_-_즉시_실행_함수_표현

JavaScript - IIFE

  • description : JavaScript Function Definitions
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2022-08-22


IIFE

  • Immediately Invoked Function Expression
  • 즉시 실행 함수 표현 (즉시 호출되는 함수 표현식)
  • 정의되자마자 즉시 실행되는 JavaScript Function을 의미
  • Self-Executing Anonymous Function (스스로 실행되는 익명 함수)이라고도 함


기본 구문

(function() {
    statements;
})();


첫 번째 소괄호(''**()**'', Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)
⇒ 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지하고, IIFE 내부로 다른 변수들이 접근하는 것을 받지
두 번째 소괄호 부분은 즉시 실행 함수를 생성하는 소괄호이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.


예제

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

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


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

var result = (function () {
    var name = "Bruce Willis";
    return name;
})();
// 즉시 결과를 생성한다.
console.log(`result is ${result}`);   // result is Bruce Willis


선언한 함수를 아래와 같은 방식으로는 즉시 호출될 수 없다

function foo() {
    console.log('Hello Foo');
}();
// Uncaught SyntaxError: Unexpected token ')'


하기와 같은 기명 또는 익명 함수 표현식은 즉시 호출될 수 있다.

(function foo() {
    console.log("Hello Foo");   // Hello Foo
}());
// VS Code에서는 }());라고 입력하여도 자동으로 })();으로 변경됨
 
(function food() {
    console.log("Hello Food");  // Hello Food
})();
 
 
(() => console.log("Hello World~~~~~"))();    // Hello World~~~~~


괄호 구분

구분 괄호 영문
소괄호 ( ) Square brackets
중괄호 { } Curly brackets, Curly braces
대괄호 [ ] Parentheses
홑화살괄호 < > Angle brackets
/volume1/web/dokuwiki/data/pages/wiki/javascript/javascript_note/iife_-_즉시_실행_함수_표현.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)